Matt Hankerson

Generated Oct 20, 2026

DESIGN.md for www.sacredhealingjourneys.org

www.sacredhealingjourneys.org6 colors5 componentsAlice + Work Sans

Remix

2 screenshots captured· www.sacredhealingjourneys.org

1 / 2 · Sacred Healing Journeys | Begin Your Healing Journey Today · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Sacredhealingjourneys
description: |
  Sacred Healing Journeys embodies a serene, spiritually grounded aesthetic that
  merges natural symbolism with contemplative elegance. The design breathes with
  warm, earthy tones and thoughtful whitespace, evoking a sense of inner peace
  and transformative possibility. Visual language draws from nature—imagery of
  dragonflies, sage bundles, and misty landscapes—reinforcing themes of renewal
  and spiritual awakening. Typography is deliberately generous and unhurried,
  using serif and humanist sans-serif typefaces to convey both wisdom and
  approachability. The overall mood is meditative yet inviting: a space where
  seekers feel safe to explore their healing journey.
source:
  url: "https://www.sacredhealingjourneys.org/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-20
  tokensMeasured: true
colors:
  primary: "#055F7C"
  canvas: "#E7CEC1"
  surface-alt: "#475047"
  on-primary: "#FFFFFF"
  ink: "#475047"
  body: "#FFFFFF"
  accent-1: "#C57557"
  neutral-1: "#000000"
typography:
  display-lg:
    fontFamily: Alice
    fontSize: 63.04px
    fontWeight: 400
    lineHeight: 1.07
    letterSpacing: -1.26px
  display-lg-strong:
    fontFamily: Alice
    fontSize: 63.04px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: -1.26px
  display-md:
    fontFamily: Alice
    fontSize: 46.24px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.92px
  display-md-tight:
    fontFamily: Alice
    fontSize: 46.24px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.92px
  heading-md:
    fontFamily: Alice
    fontSize: 36.16px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.72px
  heading-sm:
    fontFamily: Alice
    fontSize: 19.36px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.39px
  body-xl:
    fontFamily: Alice
    fontSize: 26.08px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: -0.52px
  body-lg:
    fontFamily: "Work Sans"
    fontSize: 22.72px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "Work Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-uppercase:
    fontFamily: "Work Sans"
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0px
    textTransform: uppercase
  body-sm:
    fontFamily: "Work Sans"
    fontSize: 14.272px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 10px
spacing:
  xxs: 4px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 24px
  xl: 28px
  xxl: 40px
  xxxl: 44px
  section: 56px
  band: 60px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#E7CEC1"
    surface: "#475047"
    surfaceRaised: "#475047"
    text: "#475047"
    textMuted: "#FFFFFF"
    border: "#D4BFB2"
    accent: "#055F7C"
    accentFg: "#FFFFFF"
    focusRing: "#055F7C"
    elevation: shadow
  dark:
    bg: "#0B1013"
    surface: "#1A1E21"
    surfaceRaised: "#262A2D"
    text: "#F5F9FA"
    textMuted: "#9CA0A2"
    border: "#323639"
    accent: "#078CB7"
    accentFg: "#0B0B0C"
    focusRing: "#066E90"
    elevation: "border+surface"
  contrastFailures:
    - "light: muted on bg = 1.5:1 (needs 4.5:1)"
    - "light: text on surface = 1:1 (needs 4.5:1)"
components:
  button-primary:
    typography: "{typography.body-md-uppercase}"
    textColor: "{colors.body}"
    border: "1px solid {colors.primary}"
    height: 67.9375px
    padding: "0px 20.8px 0px 20.8px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.body-md-uppercase}"
    textColor: "{colors.body}"
    height: 67.9375px
    padding: "0px 20.8px 0px 20.8px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  card:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: sans-serif
    fontWeight: 400
    backgroundColor: "{colors.canvas}"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
  navigation:
    textColor: "{colors.ink}"
    height: 27.1875px
    fontSize: 16px
    fontFamily: "Work Sans"
    fontWeight: 400
    lineHeight: 1
  link:
    typography: "{typography.body-md-uppercase}"
    textColor: "{colors.ink}"
    padding: "16px 20.8px 16px 20.8px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.canvas}"
  link-lg:
    textColor: "{colors.ink}"
    fontSize: 0px
    fontFamily: "Work Sans"
    fontWeight: 400
    lineHeight: 0px
breakpoints:
  - width: 375
    containerWidth: 345
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 707
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 942
    gridColumns: 6
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1178
    gridColumns: 3
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 59
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1325
    gridColumns: 3
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 63
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 0
  gradientsFound: 0
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Sacred Healing Journeys

1. Visual Theme & Atmosphere

Sacred Healing Journeys embodies a serene, spiritually grounded aesthetic that merges natural symbolism with contemplative elegance. The design breathes with warm, earthy tones and thoughtful whitespace, evoking a sense of inner peace and transformative possibility. Visual language draws from nature—imagery of dragonflies, sage bundles, and misty landscapes—reinforcing themes of renewal and spiritual awakening. Typography is deliberately generous and unhurried, using serif and humanist sans-serif typefaces to convey both wisdom and approachability. The overall mood is meditative yet inviting: a space where seekers feel safe to explore their healing journey.

Key Characteristics

Warm, earth-toned palette anchored in sage green and terracotta accents
Generous whitespace and breathing room between content blocks
Serif-forward typography hierarchy with distinctive negative letter-spacing on display sizes
Nature-inspired imagery with soft, diffused lighting
Calm, professional tone reflecting spiritual authenticity
Primary brand accent applied sparingly but decisively to high-intent CTAs
Minimal use of shadows; depth achieved through colour-blocking and surface contrast

2. Color Palette & Roles

Primary

Brand Accent ({colors.primary} — #055F7C): Primary call-to-action buttons, brand accent, active states. Deep teal that signals trust and intentional action.

Accent Colors

Decorative Warm Accent ({colors.accent-1} — #C57557): Unassigned decorative role. Used as supporting visual accent (e.g., sage bundle wrapping in hero imagery). No measured interface role.

Neutral Scale

Canvas / Page Background ({colors.canvas} — #E7CEC1): Default page background. Warm, off-white cream that grounds the entire experience.
Surface Alt / Ink ({colors.surface-alt} — #475047): Alternating section bands and primary heading text. Deep sage green that anchors readability and section distinction.
Body / On Primary ({colors.on-primary} — #FFFFFF): Body copy and label colour on brand surfaces. Clean white for legibility and contrast.
Neutral ({colors.neutral-1} — #000000): Unassigned neutral. Full black available for maximum contrast where needed.

Semantic / Status

No error, success, warning, or info colours are declared on the site. Do not invent semantic states; see Known Gaps.

3. Typography Rules

Font Family

Primary (Display & Headings): Alice (serif), fallback: Georgia, serif
Secondary (Body & UI): Work Sans (humanist sans-serif), fallback: -apple-system, BlinkMacSystemFont, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Alice	63.04px	400	1.07	-1.26px	Hero headlines; most prominent. Tight line height, negative tracking emphasize gravitas.
Display Large Bold	Alice	63.04px	700	1.07	-1.26px	Stronger emphasis variant of Display Large.
Display Medium Tight	Alice	46.24px	400	1.11	-0.92px	Section headers; secondary display size. Condensed line height.
Display Medium	Alice	46.24px	400	1.5	-0.92px	Large body or intro copy; negative tracking retained.
Heading Medium	Alice	36.16px	400	1.14	-0.72px	Section subheaders; moderate prominence.
Heading Small	Alice	19.36px	400	1.11	-0.39px	Smaller headings and labels; still serif.
Body Large Bold	Alice	26.08px	700	1.17	-0.52px	Emphasis text within body; serif weight.
Body Large	Work Sans	22.72px	400	1.5	0px	Large body copy and descriptive text.
Body Medium	Work Sans	16px	400	1.5	0px	Standard body text, links, buttons.
Body Medium Uppercase	Work Sans	16px	400	—	0px, text-transform: uppercase	Navigation, labels, button text.
Body Small	Work Sans	14.272px	400	1.5	0px	Smaller body copy, captions, metadata.

Principles

Negative Tracking on Display: Alice display sizes carry deliberate negative letter-spacing (-0.92px to -1.26px), creating a compressed, elegant silhouette. This is a core brand trait; never normalize it to 0.
Serif for Authority: Alice serif is reserved for display and heading roles, reinforcing spiritual authority and timelessness.
Sans-Serif for Clarity: Work Sans handles all body and UI text, ensuring legibility and accessibility at smaller sizes.
Generous Line Heights: Body text consistently uses 1.5 line height, supporting readability and breathing room.
Weight Restraint: The system favours weight 400 (regular); 700 (bold) is used sparingly for emphasis only.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#055F7C)
Text Color: {colors.on-primary} (#FFFFFF)
Font: Work Sans, 16px, weight 400
Padding: 0px 20.8px
Height: 67.9375px
Border: 1px solid #055F7C
Border Radius: {rounded.xs} (10px)
Box Shadow: none
Line Height: normal
Example use: "BOOK A SESSION" CTA on hero

Cards & Containers

Default Card (Full Page Container)

Background: {colors.canvas} (#E7CEC1)
Text Color: {colors.surface-alt} (#475047)
Font: Work Sans (fallback), 16px, weight 400
Padding: 0px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Line Height: normal
Use: Page background and full-bleed content sections

Card Small (Content Section)

Background: transparent / rgba(0, 0, 0, 0)
Text Color: {colors.surface-alt} (#475047)
Font: Work Sans, 16px, weight 400
Line Height: 24px
Padding: 0px
Border: none
Border Radius: {rounded.none} (0px)
Use: Nested content blocks within page sections

Inputs & Forms

Link / Label (as measured)

Background: {colors.canvas} (#E7CEC1)
Text Color: {colors.surface-alt} (#475047)
Font: Work Sans, 16px, weight 400
Padding: 16px 20.8px
Height: 51px
Border: 0px solid #E7CEC1
Border Radius: {rounded.xs} (10px)
Box Shadow: none
Use: Interactive text links and button labels within content

Navigation

Navigation Menu

Background: transparent / rgba(0, 0, 0, 0)
Text Color: {colors.surface-alt} (#475047)
Font: Work Sans, 16px, weight 400
Line Height: 16px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Use: Horizontal menu links (Team, Services, Courses, Events, Retreats, Contact)

Footer

Footer

Background: transparent / rgba(0, 0, 0, 0)
Text Color: {colors.surface-alt} (#475047)
Font: Work Sans, 16px, weight 400
Line Height: 24px
Padding: 0px
Border: none
Border Radius: {rounded.none} (0px)
Use: Site-wide footer content and meta links

5. Layout Principles

Spacing System

The spacing scale is built on a base unit of 4px, with semantic breakpoints for responsive control:

{spacing.xxs} = 4px — Tight micro-spacing (between inline elements)
{spacing.xs} = 12px — Small gaps (icon padding, compact layouts)
{spacing.sm} = 16px — Standard padding (button, input, card internal)
{spacing.md} = 20px — Medium gaps (between related components)
{spacing.lg} = 24px — Larger gaps (stacked sections)
{spacing.xl} = 28px — Emphasis spacing (featured blocks)
{spacing.xxl} = 40px — Significant breathing (between major sections)
{spacing.xxxl} = 44px — Extra large separation
{spacing.section} = 56px — Large section margins
{spacing.band} = 60px — Full-bleed section padding

Usage Context:

Button internal padding: {spacing.sm} (16px)
Section top/bottom padding: {spacing.band} (60px)
Card gaps: {spacing.lg} to {spacing.xl} (24–28px)
Micro-interactions: {spacing.xxs} (4px)

Grid & Container

Max Container Width: 1325px (measured at 1440px viewport)
Max Content Column Width: 1178px (measured at 1280px viewport)
Grid Columns: System adapts from 3 columns at small viewports to 6 columns at medium/large viewports (measured at 1024px+)
Section Padding: Consistent 0px horizontal padding across all measured breakpoints; vertical breathing is achieved through {spacing.band} (60px) top/bottom margins
Pattern: Full-bleed colour blocks (canvas and alternating surface bands) containing centred content columns, creating visual hierarchy through surface contrast rather than contained boxes

Whitespace Philosophy

Whitespace is not empty; it is a design element that reinforces the meditative, unhurried mood. Large gaps between sections (60px bands), generous line heights (1.5), and breathing room in typography create rhythm and focus. Content is never cramped; the layout trusts in space to guide the eye and calm the mind.

Border Radius Scale

{rounded.none} = 0px — Cards, images, full-bleed sections, badges. Hard edges reinforce structural clarity.
{rounded.xs} = 10px — Buttons and interactive elements. Subtle softness without diminishing legibility or impact.

Component Application:

Buttons: {rounded.xs} (10px)
Cards: {rounded.none} (0px)
Images: {rounded.none} (0px)
Badges: {rounded.none} (0px)

Border Widths

Button borders: 1px solid (used on primary button)
No other visible border weights extracted or measured on this site

6. Depth & Elevation

Sacred Healing Journeys uses color-blocking to achieve depth rather than traditional shadow layering. Surfaces are distinguished by background colour shifts ({colors.canvas} alternating with {colors.surface-alt}) and text colour contrast, not by shadows or layered elevation.

Elevation Strategy: Color-Blocking

All measured components report boxShadow: none. Depth and visual hierarchy arise from:

Canvas band (#E7CEC1) alternating with sage surface (#475047)
Text colour shifts from sage on cream to white on brand accent
Typography scale and weight emphasis
Strategic whitespace

This approach maintains the calm, meditative aesthetic without visual noise from shadow stacks.

Opacity Levels

100% / 1.00 — Full opacity; all solid elements (buttons, type, backgrounds)
99% / 0.99 — Near-solid; minimal fade (subtle overlays, if any)
50% / 0.50 — Half transparent (secondary/disabled states, if measured; see Known Gaps)
28% / 0.28 — Light fade (background tints, overlays)
15% / 0.15 — Very faint (watermarks, very subtle backgrounds)

Z-index / Layering

The site measures z-index values 1–8, indicating a shallow stacking context:

z-index: 1 — Base content layer
z-index: 2 — Elevated content (cards, sections)
z-index: 3 — Local elevation
z-index: 4 — Raised elements
z-index: 5 — Dropdowns, popovers
z-index: 6 — Sticky navigation / headers
z-index: 7 — Modals, overlays (if any)
z-index: 8 — Top-level alerts, toasts

No specific component-to-z-index mapping was extracted; use these values as a general hierarchy for new component layers.

7. Do's and Don'ts

Do

Leverage negative tracking on display text. The -0.92px to -1.26px letter-spacing on Alice headings is a defining brand trait. Maintain it precisely; do not normalize to 0.
Alternate section backgrounds between canvas (#E7CEC1) and sage (#475047) to create visual rhythm and guide the eye.
Prioritize whitespace. Use {spacing.band} (60px) vertical gaps and 1.5 line heights to reinforce calm and breathing room.
Use the primary brand accent (#055F7C) on high-intent CTAs only (e.g., "Book a Session"). Reserve it for moments of decisive action.
Pair serif and sans-serif intentionally. Alice (serif) for headings/display, Work Sans for body/UI. Never mix roles.
Apply {rounded.xs} (10px) consistently to buttons and interactive controls for gentle softness.
Keep shadows minimal or absent. Colour-blocking achieves depth; shadows add noise to the meditative aesthetic.
Test typography at measured sizes. Display Large is 63.04px, not 64px; precision reinforces the intentional, considered design.

Don't

Invent interaction states. Hover, active, focus, and disabled styles were not extracted. Do not guess; document them under Known Gaps if needed later.
Apply rounded corners to cards or images. They measure {rounded.none} (0px); hard edges are intentional.
Overuse colour. The palette is restrained: canvas, sage, teal, white, and one warm decorative accent. Introduce new colours only if semantically justified (error/success, not decorative).
Compromise line height for compactness. Body text is 1.5; display text is 1.07–1.5. These ratios support readability and meditation; do not tighten.
Treat whitespace as a leftover. Large gaps (60px bands, 24–28px card spacing) are active design. Minimize them at risk of breaking the mood.
Mix font weights casually. The system is weight 400 primary; 700 bold is reserved for emphasis. Do not introduce 300, 500, or 800 without justification.
Apply shadows to flat components. All cards and containers report boxShadow: none. Maintain this; depth comes from colour, not shade.
Use the decorative warm accent (#C57557) as a semantic or interactive colour. It has no measured role; reserve it for imagery and decoration only.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Grid Columns	Nav Visible	Key Changes
Mobile	375px	345px	3	No	Smallest display headline ~46px, body 16px, minimal horizontal padding
Tablet	768px	707px	3	No	Content column widens; heading size unchanged (~42px), layout still mobile-friendly
Small Desktop	1024px	942px	6	Yes (6 links)	Navigation becomes visible; grid expands to 6 columns; heading ~50px
Desktop	1280px	1178px	3	Yes (6 links)	Content column ~1178px; heading ~59px
Large Desktop	1440px	1325px	3	Yes (6 links)	Max content column ~1325px; display headline full 63px

Measured Observations:

Body text remains 16px across all breakpoints; no size reduction on mobile.
Horizontal padding is consistently 0px (full-bleed sections).
Grid column count adjusts (3 → 6 → 3) but layout remains centred with max-width constraints.
Navigation links appear at 1024px breakpoint; below that, presumed mobile menu (toggle state not observed in extraction).
Display headline size scales from ~46px (tablet) to full 63px (1440px), suggesting responsive font scaling or breakpoint-specific sizing.

Touch Targets

No explicit touch target sizes were extracted. However, the measured button height of 67.9375px (approximately 68px) exceeds mobile best practices (48px minimum) and is suitable for touch. Input and link padding of 16px 20.8px provides comfortable tap area. Assume all interactive elements meet or exceed 48px minimum touch target; test on actual mobile devices.

Collapsing Strategy

375–768px (Mobile/Tablet): Full-bleed sections, single-column layout, headings scale down slightly, navigation likely hidden behind toggle (not observable in extraction).
1024px+ (Desktop): Multi-column grid options available (6 columns at 1024px), but layout still respects max-width constraint; navigation becomes visible as horizontal menu.
Section Behaviour: All sections maintain full-width (no horizontal padding, max-width container centres content). Stacked imagery and text reflow naturally as viewport shrinks.
Typography: Display and heading sizes respond to breakpoint; body text size stable at 16px.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Accent ({colors.primary} — #055F7C)
Page Background: Canvas ({colors.canvas} — #E7CEC1)
Heading / Section Text: Surface Alt ({colors.surface-alt} — #475047)
Body Text (on Primary): On Primary ({colors.on-primary} — #FFFFFF)
Decorative Accent: Accent-1 ({colors.accent-1} — #C57557, unassigned; imagery/decoration only)
Full Black (Contrast): Neutral-1 ({colors.neutral-1} — #000000)

Iteration Guide

Typography is specific: Use exact pixel values (63.04px, not 64px). Letter-spacing is negative on display (-1.26px to -0.39px); do not normalize it. Alice serif for headings, Work Sans for body.
Buttons are teal with soft corners: Primary button is #055F7C background, white text, 10px border-radius, 16px font, 68px height. Use sparingly for high-intent actions.
Sections alternate colour-blocked backgrounds: Cream (#E7CEC1) and sage (#475047) backgrounds create visual separation; no shadows. Vertical spacing is 60px ({spacing.band}); horizontal padding is 0 (full-bleed).
Whitespace is intentional: Line heights are 1.5 for body, 1.07–1.14 for display. Do not compress. 60px band gaps, 24–28px card spacing.
No interaction states documented: Hover, active, focus, disabled states were not extracted. Implement accessible defaults (WCAG contrast, focus outline) but do not rely on extracted state styles.
Colour-blocking achieves depth: No shadows (boxShadow: none). Depth comes from surface colour shifts and typography scale.
Responsive max-width, not mobile-first cramping: At 1440px, content is ~1325px max; at 375px, ~345px. All breakpoints maintain whitespace philosophy; do not sacrifice padding to fit mobile.
Decorative elements are warm terracotta: #C57557 appears in imagery (sage bundle, accents) but has no UI role; do not use it as status or semantic colour.

10. Known Gaps

Interaction States Not Observable: Stylesheets were cross-origin and unreadable. No hover, active, focus, or disabled styles were extracted. Implement accessible defaults (e.g., focus outline, disabled opacity) but do not reference extracted state data—it does not exist. Full interactive behaviour documentation is missing.
No Semantic / Status Colour Ramp: The site declares no error, success, warning, or info states in its markup. Do not invent a semantic colour palette. If status colours are needed for future features, they must be introduced as new tokens and validated against the brand.
No Gradients or Decorative Meshes: The colour palette and component styles are solid fills only. No gradients, mesh overlays, or animated colour transitions were observed or extracted.
2 Extracted Colours Remain Unassigned: The decorative warm accent (#C57557) and the full black neutral (#000000) have no measured interface role. The warm accent appears in hero imagery (sage bundle); black is available for maximum-contrast use cases. Treat both as supplementary, not primary, and validate their UI roles before widespread implementation.
Derived Themes / Dark Mode: Only one theme (light, cream/sage) was observed and measured. No dark mode or alternate theme was measured on-site. Do not assume a dark-mode derivative; it is not part of this extraction.
Coverage Limited: Only the homepage (landing page) was analysed. Surfaces behind authentication (member portals, account settings) and interior pages (full course details, retreat booking flow, checkout) were not visited. Colour, typography, and component patterns may differ on those pages.
Border Width Data: Only button borders (1px solid) were observable. No other explicit border-width scale or stroke weights were extracted. Cards and containers report 0px or no border.
Shadow Elevation: All measured components report boxShadow: none. The system uses colour-blocking for depth, not shadow layering. If subtle shadows or elevation are added in future, they must be measured and documented separately.
Component Variants: Only primary button, default card, navigation, link, and footer variants were extracted. Secondary buttons, tertiary buttons, disabled button states, and other component modes (skeleton, loading, empty) are not documented here; measure them if needed for implementation.
Animation & Transition Timing: No CSS animations, transitions, or timing functions were extracted. Interaction speeds, easing curves, and motion design are undocumented.

Document Version: 1.0
Last Measured: Based on extraction from https://www.sacredhealingjourneys.org/
Analyst Notes: This design system is intentionally restrained and meditative. It prioritizes whitespace, typography precision, and colour-blocking over shadows and complex interactions. Implement with calm discipline; every value is specific and measured.

Want a DESIGN.md like this for your own website?

Remixes of www.sacredhealingjourneys.org

Latest remixes

No public remixes yet. Be the first to make one.

Remix it