Soul's Nest Counseling Design System

Overview

Soul's Nest Counseling presents a therapeutic digital environment that balances clinical professionalism with profound warmth. The design system rests on an intimate foundation: a warm cream canvas ({colors.surface-soft} — #ede6e1) that evokes natural materials—linen, unbleached cotton, parchment—while deep navy ({colors.canvas} — #283b50) provides grounding authority where content needs weight and focus. Brand voltage lives selectively in a terracotta-coral accent ({colors.primary} — #cf6356), deployed sparingly for the signature script greeting, active navigation states, and decorative botanical illustrations that soften geometric layouts into something organically human.

The typographic voice is the system's defining character. Freight Big Pro carries headlines with elegant serifs and restrained weight (500–600), never bold—this is a practice that trusts subtlety over announcement. Body copy flows in Freight Sans Pro at a precise 13.272px, creating an intimate reading size that feels like a letter rather than a billboard. The single exuberant exception is the "Hi, I'm Carli" greeting rendered in Bitte, a warm script font that introduces the therapist as a person before she is a practitioner—a deliberate hierarchy of relationship over credential.

Shape language favors softness without sacrificing structure. Pill-shaped buttons ({rounded.pill} — 300px radius) carry every interactive element from cookie consent to navigation CTAs, while content cards use gentle {rounded.DEFAULT} corners. A distinctive shadow system employs hard-edged color offsets rather than soft Gaussian blurs—teal (#bccedc) casting upper-left and warm amber (#d99f6b) lower-right—that creates a layered, almost paper-cut aesthetic on photographic frames.

The system operates across two visual dialects: the editorial landing dialect (cream backgrounds, coral accents, mixed photography and illustration) and the content card dialect (deep navy panels with white text for therapeutic philosophy statements). These alternate to create rhythm without jarring transition.

Key Characteristics:

• Cream canvas ({colors.surface-soft}) as primary background, not white—warmth is foundational
• Navy ({colors.canvas}) reserved for content cards requiring visual weight and focus
• Terracotta ({colors.primary}) used exclusively for brand moments: script greeting, active states, decorative elements
• Freight Big Pro headlines at weight 500 maximum—never bold; presence comes from scale, not density
• Freight Sans Pro body at 13.272px—intentionally intimate, anti-billboard
• Pill-radius ({rounded.pill}) on all buttons; small radius ({rounded.DEFAULT}) on cards
• Hard-edge color-offset shadows instead of soft drop shadows
• Script font (Bitte) reserved for the singular personal introduction moment
• Uppercase navigation labels with letter-spacing ({typography.nav-link}) for quiet authority

Colors

Brand & Accent

• Primary ({colors.primary} — #cf6356): Terracotta-coral serving as the sole brand voltage color. Applied to the "Hi, I'm Carli" script greeting, decorative branch illustration, hover/active states on interactive elements, and any signature brand moment requiring emotional warmth.
• Primary Hover ({colors.primary-hover} — #c45547): Darkened terracotta for interactive feedback states on links, buttons, and navigation items.
• Link ({colors.link} — #cf6356): Aligned with primary; inline links within body copy carry the terracotta treatment.
• Link Hover ({colors.link-hover} — #c45547): Active link state matching primary-hover.

Surface

• Canvas ({colors.canvas} — #283b50): Deep navy-slate functioning as both the darkest surface (content cards, cookie banner) and body text color on light backgrounds. This is the anchor color—the visual equivalent of a therapist's office walls painted in a calming, serious tone.
• Surface Soft ({colors.surface-soft} — #ede6e1): Warm cream-beige forming the primary page background across the editorial dialect. Evokes natural fiber and creates immediate psychological warmth before content is read.
• Elevated ({colors.surface-elevated — #dae7e7): Cool light gray-blue appearing in shadow offsets and subtle elevation treatments. Used decoratively rather than structurally.
• Surface Card ({colors.surface-card} — #283b50): Navy content panel carrying the therapist's philosophy statement. High contrast with white text creates a "moment of seriousness" within the warmer page flow.
• Surface Cookie ({colors.surface-cookie} — #283b50): Matching navy for the GDPR cookie consent banner, ensuring it reads as an overlay/system element distinct from editorial content.

Text

• Ink ({colors.ink} — #ffffff): Pure white text on dark surfaces (navy cards, cookie banner). Maximum contrast for readability against {colors.canvas}.
• Body ({colors.body} — #283b50): Deep navy text on light surfaces (cream background). Nearly black but with slight warmth; avoids the harshness of #000000.
• Muted ({colors.muted} — #ede6e1): Cream-white text on dark surfaces for secondary information within navy contexts (cookie disclaimer text).
• Muted Soft ({colors.muted-soft} — #dadee7): Pale cool gray for subtle text elements on light backgrounds where de-emphasis is needed.
• On Primary ({colors.on-primary} — #ffffff): White text on terracotta backgrounds; satisfies AA contrast against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface; synonymous with ink in this palette.
• On Surface ({colors.on-surface} — #283b50): Navy text on cream surfaces; synonymous with body in this palette.

Hairlines & Borders

• Hairline ({colors.hairline} — #ede6e1): Cream-toned border for subtle dividers, matching the canvas warmth. Used on photo frame borders and outline buttons.
• Border Light ({colors.border-light} — #dade7e7): Cool pale gray for secondary border treatments where more visibility than hairline is needed.
• Border Strong ({colors.border-strong} — #cf6356): Terracotta border for emphasized outlines, active state indicators, or brand-bordered elements.

Semantic

The semantic palette merges with brand tokens here: errors would use desaturated terracotta variants, success would introduce a muted sage (not present in current extraction but recommended for form validation states).

Typography

Font Family

The system employs three typefaces from Adobe Fonts (formerly Typekit), each playing a distinct emotional role:

Freight Big Pro (serif) serves all headline and display typography. Its humanist serif character—with slightly modulated stroke width and approachable letterforms—conveys literary sophistication without academic coldness. Available in weights 500 (regular) and 600 (semibold) per the extracted font-face declarations, plus italic variants not currently deployed in this view. This face carries the weight of the practice's philosophy statements, page titles, and navigation identity.

Freight Sans Pro (sans-serif) handles all body copy, UI labels, captions, and functional text. Its clean geometry with subtle humanist touches (the slightly open apertures, the warm x-height) ensures readability at the intimate 13.272px size while maintaining visual harmony with the serif headlines. Weight range spans 400 (regular) through 700 (bold), though current deployment stays at 400–500 for body and 500–600 for labels.

Bitte (script) appears exactly once in the entire system: the "Hi, I'm Carli" personal greeting. This intentional scarcity makes it a signature moment—a handwritten note at the opening of a consultation. It should never be deployed for headers, labels, or any repeated UI element.

Fallback stacks include 'Georgia', serif for Freight Big Pro, -apple-system, sans-serif for Freight Sans Pro, and 'Brush Script MT', cursive for Bitte.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-script} | 96px | 400 | 1.1 | -0.01em | Personal greeting ("Hi, I'm Carli") — single instance | | {typography.display-xl} | 57px | 500 | 1.11 | 0.02em | Major page titles (H1-level) | | {typography.title-md} | 39px | 500 | 1.17 | 0.02em | Section headings (H2/H3) | | {typography.display-lg} | 36px | 500 | 0.95 | 0.02em | Site logo lockup | | {typography.title-sm} | 21px | 600 | 1.23 | 0.04em | Sub-section headings, card titles | | {typography.body-md} | 13.272px | 400 | 1.4 | 0 | Paragraph body copy | | {typography.nav-link} | 15px | 500 | 1.4 | 0.02em | Navigation menu items (uppercase) | | {typography.button} | 12px | 500 | 1.25 | 0.08em | Button labels (uppercase, tracked-out) | | {typography.body-sm} | 12px | 400 | 1.4 | 0 | Secondary body, legal text, cookie copy | | {typography.caption} | 11px | 400 | 1.38 | 0 | Metadata, timestamps, fine print |

Principles

The typographic system operates on a philosophy of restrained presence. Headlines achieve hierarchy through scale (57px down to 21px represents a nearly 3x reduction) rather than weight escalation—the heaviest weight in regular use is 600 on sub-headings, and even this is deployed sparingly. This restraint signals the therapeutic context: a practice that speaks softly because it doesn't need to shout.

Letter-spacing plays a structural role. Navigation links receive 0.02em tracking combined with uppercase transformation, creating a quiet, spaced-out label style that feels organized without being corporate. Buttons push further to 0.08em, ensuring the small 12px caps remain legible while feeling deliberately designed. Headlines receive minimal positive tracking (0.02em) to maintain the elegance of Freight Big Pro's native spacing at large sizes.

Line heights are notably tight on display type (0.95–1.17) and comfortable on body (1.4). This creates visual tension between the "stacked" presence of large headlines and the "breathing" body copy below—a compositional technique borrowed from editorial magazine design.

The single script exception is architecturally significant. By reserving Bitte for one moment—the initial personal introduction—the system creates a ritual encounter: the visitor meets the therapist as a human (script) before encountering her as a professional (serif/sans). This sequencing is intentional UX writing made visible through type choice.

Note on Font Substitutes

Freight Big Pro and Freight Sans Pro are proprietary Adobe Fonts not available on Google Fonts. For open-source implementations, substitute:

• Freight Big Pro → Cormorant Garamond (Google Fonts) — similar humanist serif with elegant italics; use weights 500–600 to match the system's restrained weight ceiling. Define as --font-display: 'Cormorant Garamond', Georgia, serif.
• Freight Sans Pro → DM Sans or Nunito Sans (Google Fonts) — clean humanist sans with similar x-height and openness; DM Sans offers closer geometric alignment. Define as --font-body: 'DM Sans', -apple-system, sans-serif.
• Bitte → Dancing Script or Great Vibes (Google Fonts) — warm, informal scripts; Dancing Script offers better legibility at large sizes. Define as --font-script: 'Dancing Script', 'Brush Script MT', cursive.

Layout

Spacing System

• Base unit: ~1px with practical increments derived from the extracted value set (2, 11, 15, 17, 20, 27, 30, 48, 58, 62, 95, 183px).

• Tokens:

  • {spacing.xxs} (2px) — micro-adjustments, hairline borders
  • {spacing.xs} (11px) — tight internal padding (button vertical)
  • {spacing.sm} (15px) — compact spacing, small gaps
  • {spacing.md} (17px) — most frequent internal spacing, baseline rhythm unit
  • {spacing.lg} (20px) — standard component padding
  • {spacing.xl} (27px) — comfortable internal padding
  • {spacing.xxl} (30px) — section-internal margins
  • {spacing.section-sm} (48px) — minor vertical sections
  • {spacing.section-md} (58px) — standard section padding
  • {spacing.section-lg} (62px) — major section padding
  • {spacing.section-xl} (95px) — hero vertical breathing room
  • {spacing.section-xxl} (183px) — dramatic full-viewport spacing (hero top margin)

• Section padding (vertical): {spacing.section-xxl} (183px) above the hero greeting; {spacing.section-lg} (62px) between major content bands.

• Card internal padding: {spacing.content-card-dark} uses {spacing.section-md} (58px) vertical and {spacing.xl} (27px) horizontal for the philosophy statement card.

• Gutters: Column gutters approximate {spacing.xl} (27px) in the hero two-column layout (photo frame left, content card right).

Grid & Container

• Max content width: 1440px (extracted from main/article container widths). Content centers within viewport beyond this.
• Editorial density: The system chooses generous editorial spacing over marketplace density. The hero section occupies significant vertical real estate (183px top margin alone), signaling that this is a space for lingering, not scanning.
• Grid behavior at desktop: The above-fold layout uses an asymmetric two-column grid. Left column (~40% width) holds the framed photograph; right column (~60% width) holds the dark philosophy card. The script heading breaks out above the grid, spanning full container width with left alignment.
• Hero column splits: Approximately 45/55 or 40/60 (photo/card), with the card column receiving more horizontal space to accommodate paragraph text at comfortable measure lengths (ideally 60–75 characters).

Whitespace Philosophy

The system practices generous negative space as hospitality. The cream background isn't just a color—it's permission to breathe. Margins of {spacing.section-xxl} (183px) above the hero greeting create a "landing strip" effect, letting the eye settle before engaging content. Within the content card itself, {spacing.section-md} (58px) padding prevents the navy box from feeling claustrophobic despite its visual weight. This is antithetical to dashboard-dense or e-commerce-squeezed layouts; the message is "we have time for you."

Header Architecture

[1440px max-width container, centered]
┌─────────────────────────────────────────────────────────────────┐
│ [Logo: "Soul's Nest Counseling"]        [ABOUT CARLI] [THERAPY] │
│         (display-lg, body color)     [CONSULTATION...] [CONTACT] │
│                                              [📷 Instagram]     │
│  ← 80px height, surface-soft background, no bottom border →    │
└─────────────────────────────────────────────────────────────────┘

Navigation items are uppercase, weight 500, 15px, with {spacing.sm} (15px) horizontal gap between items. Instagram icon sits flush-right at 24px size. Current page indicator appears as underline beneath "About Carli."

Hero Section

[Full-width surface-soft background]
┌──────────────────────────────────────────────────────────────┐
│                                                              │
│  [183px top margin]                                          │
│                                                              │
│  "Hi, I'm Carli"                                             │
│  (display-script, primary color, left-aligned)               │
│                                                              │
│  ┌──────────────────┐  ┌─────────────────────────────────┐  │
│  │                  │  │                                 │  │
│  │  [Photo Frame]   │  │  [Content Card - Dark Navy]     │  │
│  │  Portrait photo  │  │                                 │  │
│  │  with thin       │  │  "I want to help you            │  │
│  │  border          │  │  understand..."                 │  │
│  │                  │  │                                 │  │
│  │                  │  │  Body text in white             │  │
│  └──────────────────┘  │  at 13.272px                    │
│                         │                                 │  │
│                         └─────────────────────────────────┘  │
│                                    [Decorative branch SVG]    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The decorative branch illustration sits overlapping the bottom-right area of the content card, rendered in {colors.primary} (terracotta) with organic line weight, breaking the geometric rigidity of the card rectangle.

Cookie Banner (Overlay)

[Floating BOTTOM_RIGHT position]
┌─────────────────────────────────────────────┐
│                                             │
│  By using this website, you agree to...     │
│  (body-sm, muted color on navy)             │
│                                             │
│  [  OK  ]        [ DECLINE ]                │
│  (button-primary) (button-secondary)        │
│  (pill, outlined, uppercase)               │
│                                             │
└─────────────────────────────────────────────┘

Fixed-position overlay with {spacing.lg} (20px) internal padding, dark navy background matching {colors.surface-cookie}.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat Baseline | No shadow, direct surface contact | Page background, header, flat UI elements | | 1 — Hairline Outline | 1–2px solid border in {colors.hairline} | Photo frame border, input fields, button outlines | | 2 — Hard Offset Shadow | Color-block shadow at ±30px offset (no blur) | Photo frame depth effect (two-tone offset) | | 3 — Overlay Surface | Solid {colors.surface-card} background, no shadow | Content card, cookie banner (treated as material layer, not floating) | | 4 — Focus Ring | Not detected; recommend 2px {colors.border-strong} outline | Future implementation for accessibility |

The elevation philosophy here is material-layering rather than atmospheric depth. Unlike modern SaaS dashboards that use soft multi-stop shadows to suggest Z-space floating, Soul's Nest uses a paper-craft metaphor: the photo frame casts a hard teal shadow upper-left and a hard amber shadow lower-right, suggesting physical paper stacked at an angle. This is intentional—therapy offices often feature tactile, material objects (textured fabrics, wooden furniture, plants), and the shadow system mirrors that materiality.

No gradient washes, glassmorphism, or backdrop-blur effects are present. Depth comes from solid color blocks and the occasional hard-shadow offset.

Decorative Depth

Beyond the offset-shadow system, the decorative branch SVG provides organic depth—its lines overlap the geometric boundary of the content card, creating a "nature reclaiming structure" metaphor appropriate for a somatic/embodied therapy practice. This is illustrative depth, not technical elevation.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xxs} | 2px | Micro-elements, inner highlights | | {rounded.DEFAULT} | 4px | Content cards, photo frames, subtle corner softening | | {rounded.md} | 8px | Not currently deployed; available for medium cards | | {rounded.lg} | 16px | Not currently deployed; available for featured cards | | {rounded.xl} | 24px | Not currently deployed; available for large containers | | {rounded.pill} | 300px | All buttons (primary, secondary, outline), skip link | | {rounded.full} | 9999px | Avatar circles (if added); synonym for pill |

Photography Geometry

Portrait photographs appear in vertical/portrait aspect ratio (approximately 3:4 or 4:5) within the photo frame. The frame applies:

• Thin solid border (likely 1–2px in {colors.hairline} or a slightly darker tone)
• {rounded.DEFAULT} (4px) corner radius—barely perceptible softening
• Hard dual-color offset shadow creating the stacked-paper effect
• No internal padding between image edge and border

The secondary lifestyle photograph (therapist seated on bench) appears in a looser crop, possibly square or slight landscape, positioned in the right column above/beside the content card. It lacks the formal frame treatment, suggesting environmental context rather than portrait formality.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Interactive Elements

{component.top-nav} — The global navigation header occupying the full viewport width with 80px height. Background {colors.surface-soft}, text {colors.body} using {typography.nav-link}. Contains logo lockup left, navigation center/right, utility icon far-right. No visible border or shadow; separation from hero content relies on spacing alone.

{component.top-nav-link} — Individual navigation menu items ("About Carli," "Therapy," etc.). Transparent background, {colors.body} text, {typography.nav-link} styling with uppercase transform and letter-spacing. Padding {spacing.xxs} 0. Active state indicated by underline (not captured in component YAML; implement via border-bottom or pseudo-element). Hover should darken toward {colors.primary-hover} or underline appear.

{component.top-nav-link-active} — Currently active navigation item (About Carli in screenshot). Same properties as {component.top-nav-link} with underline decoration applied. The underline likely uses {colors.body} or potentially {colors.primary} for brand reinforcement.

{component.top-nav-icon} — Instagram icon button at 24×24px in the nav right rail. Transparent background, {colors.body} color (currentColor). Stroke-based icon, likely custom SVG matching Squarespace's Social Icons block. No padding container—icon sits inline with text baseline.

{component.skip-link} — Accessibility "Skip to Content" link (visible in extracted button data). Background {colors.canvas}, text {colors.muted}, pill-rounded ({rounded.pill}). Padding 16px 27px. This is typically hidden until focused; when focused, it overlays near the top of the viewport.

{component.button-primary} — Primary action button as seen in the cookie banner ("OK"). Transparent background with 2px solid border in {colors.muted}, text color {colors.muted}, {typography.button} (12px, 500 weight, uppercase, 0.08em letter-spacing). Pill-rounded ({rounded.pill}), padding 11px 15px. No box-shadow. On {colors.surface-cookie} (navy) background, this creates an outlined button treatment.

{component.button-secondary} — Secondary/destructive action button ("Decline"). Identical specs to {component.button-primary} in this context—both are outlined pills. In other contexts, secondary might use a different background; here they're visually twin buttons differentiated only by label semantics.

{component.button-outline} — Generic outlined button token sharing the pill-border, transparent-background, tracked-out-uppercase pattern. Used for any non-filled button in the system. Border color adapts to context (on navy: {colors.muted}; on cream: {colors.body} or {colors.hairline}).

Cards & Containers

{component.hero-band} — Full-width hero section container. Background {colors.surface-soft}, padding {spacing.section-xxl} vertical and {spacing.md} horizontal minimum. Contains the script greeting, photo frame, content card, and decorative branch as children. No border, no shadow—it is the base layer.

{component.hero-heading-script} — The "Hi, I'm Carli" signature element. Transparent background, {colors.primary} (terracotta) text color, {typography.display-script} (96px Bitte/script). Positioned above the two-column grid, left-aligned. This is the most emotionally charged component in the system—the only place where brand color + script font converge.

{component.photo-frame} — Framed portrait photograph in the hero left column. Transparent background (shows {colors.surface-soft} behind), contains <img> element. Rounded {rounded.DEFAULT} (4px). No internal padding—image fills frame. Paired with {component.photo-frame-border} which applies the 1–2px solid border treatment.

{component.photo-frame-border} — Visual border wrapper around the photograph. Applies solid border (color likely {colors.border-light} or slightly darker than {colors.hairline}), {rounded.DEFAULT} corners. The hard dual-offset shadow ({extensions.shadows.offset-teal} and {extensions.shadows.offset-warm}) attaches to this element, creating the paper-stack illusion.

{component.content-card-dark} — Navy content panel in hero right column. Background {colors.surface-card} (#283b50), text {colors.ink} (white), {typography.body-md} for contained text. Rounded {rounded.DEFAULT}, padding {spacing.section-md} (58px) vertical and {spacing.xl} (27px) horizontal. Contains the therapist's philosophy statement paragraph(s). This is the "serious moment" component—where clinical credibility lives visually.

{component.content-card-body-text} — Text content within the dark card. Inherits card background (transparent override), white text, {typography.body-md}. Vertical spacing between paragraphs approximately {spacing.md} (17px). Line length optimized to 60–75 characters for readability.

{component.decorative-branch} — Organic line-art SVG (branch/leaf motif) positioned overlapping the content card lower region. Color {colors.primary} (terracotta). Transparent background. Stroke-only illustration (no fill). Variable line weight suggesting hand-drawn quality. Serves as visual "breathing" element breaking card geometry.

{component.site-logo} — "Soul's Nest Counseling" wordmark in header. Transparent background, {colors.body} color, {typography.display-lg} (36px Freight Big Pro, weight 500). No border or decoration. Functions as home link.

Overlays & System Elements

{component.cookie-banner} — GDPR/privacy consent overlay fixed to bottom-right viewport corner. Background {colors.surface-cookie} (navy), rounded {rounded.DEFAULT}, padding {spacing.lg} (20px). Width approximately 360px (from extracted section data). Contains legal text and two action buttons. Uses {typography.body-sm} (12px) for copy. z-index elevated above all page content.

{component.cookie-banner-text} — Legal/disclaimer text inside cookie banner. Transparent background, {colors.muted} text (cream on navy), {typography.body-sm}. Contains hyperlink ("Learn more") styled in underlined {colors.muted} or potentially {colors.primary} for visibility.

Do's and Don'ts

Do

• Do reserve {colors.primary} (terracotta) for brand-signature moments only — the script greeting, active/hover states, decorative illustrations, and occasional accent lines. Never use it as a dominant background or for large text blocks.
• Do maintain the 13.272px body size ({typography.body-md}) for all paragraph content. This intimate size signals therapeutic closeness; enlarging it to 16px+ would shift the voice toward marketing/corporate.
• Do apply {rounded.pill} (300px radius) to every button regardless of context. Sharp-cornered buttons would violate the system's approachable, soft aesthetic.
• Do use uppercase with letter-spacing for navigation ({typography.nav-link}) and button labels ({typography.button}). This quiet, spaced treatment conveys organization without aggression.
• Do allow generous vertical spacing — {spacing.section-xxl} (183px) above hero content, {spacing.section-md} (58px) inside cards. Compressing these margins would make the site feel hurried, contradicting the therapeutic "we have time" promise.
• Do keep headline weights at 500–600 maximum ({typography.display-xl}, {typography.title-sm}). Bold (700+) headlines would feel like shouting in a whispering room.
• Do use the dark card ({component.content-card-dark}) for philosophy/mission statements — the navy background creates a "contemplation zone." Reserve it for text that asks the reader to pause.
• Do deploy the script font ({typography.display-script}) once per page at the personal introduction moment. Repeating it dilutes its emotional impact.
• Do apply hard-offset shadows ({extensions.shadows.offset-teal}, {extensions.shadows.offset-warm}) to photographed frames rather than soft Gaussian drops. This maintains the material/paper aesthetic.
• Do pair cream ({colors.surface-soft}) backgrounds with navy ({colors.body}) text for the primary reading experience. This warm-on-deep combination reduces eye strain compared to pure white/black.

Don't

• Don't substitute white (#ffffff) for {colors.surface-soft} (#ede6e1) as the page background. The cream tint is psychologically essential—it reads as "warm space" not "blank screen."
• Don't use {colors.primary} as a fill background for large containers. Terracotta is a voltage accent, not a surface. Large terracotta blocks would overwhelm the restrained palette.
• Don't bold the display typography beyond weight 600. {typography.title-sm} at 600 is the absolute ceiling. If emphasis is needed, increase size or use the script font (sparingly).
• Don't add gradient overlays to hero imagery or cards. The system relies on solid color blocks and photographic authenticity. Gradients would introduce a "tech startup" vocabulary foreign to this therapeutic context.
• Don't mix serif and sans-serif within a single text block. Headlines = Freight Big Pro (serif). Body = Freight Sans Pro (sans). Never set body copy in the serif face or vice versa.
• Don't remove the uppercase transform from navigation or buttons. The tracked-out caps are a signature micro-detail; sentence-case nav items would look like a different brand.
• Don't expand the radius vocabulary beyond {rounded.DEFAULT} (cards/frames) and {rounded.pill} (buttons). Introducing {rounded.sm} squares or {rounded.lg} blob shapes would break the binary shape language.
• Don't place white text on {colors.surface-soft} (cream). Contrast fails. White-on-dark ({colors.ink} on {colors.canvas}) and dark-on-light ({colors.body} on {colors.surface-soft}) are the only approved pairings.
• Don't add drop shadows to the cookie banner. It rests as a material layer, not a floating card. Elevation comes from background color contrast, not Z-space simulation.
• Don't use the script font for anything other than the personal greeting. Not headers, not pull quotes, not signatures. Its power is singularity.

Motion & Animation

Transition Tokens

--transition-fast: background-color 0.1s linear, color 0.1s linear;
--transition-standard: background 0.3s ease-in-out, padding 0.14s ease-in-out, transform 0.14s ease-in-out 0.14s;
--transition-fade: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow-fade: opacity 1.5s;

The extracted transitions reveal a layered animation philosophy: instant color changes (0.1s linear) for button hover states (responsive feel), moderate timing (0.3s ease-in-out) for structural shifts like padding or background changes, and extended opacity fades (0.4s–1.5s) for entrance/exit animations.

Notably, the transform transition includes a 0.14s delay, suggesting staggered micro-animations where movement follows padding changes—a "settle then move" sequence.

Keyframe Animations

• fonts-loading — Detected in keyframes list; this is Squarespace's built-in font-loading swap animation (FOUT prevention). Not a content animation.

No content-specific keyframe animations (counters, marquees, parallax) were detected in the extraction. The page likely relies on scroll-triggered opacity fades (implied by the multiple opacity transitions with varying delays: 0s, 0.006s, 0.012s, 0.018s — a stagger pattern for sequential fade-in of child elements).

Interaction Patterns

• Button hover: Near-instantaneous background-color shift (0.1s linear) — feels tactile and responsive without drawing attention to the transition itself.
• Scroll-triggered reveals: Sequential opacity fades for hero elements (heading → photo → card → decoration) using staggered 1.5s durations offset by ~6ms each, creating a gentle cascade entrance.
• Cookie banner appearance: Opacity fade-in (0.4s cubic-bezier(0.4, 0, 0.2, 1)) — smooth but not sluggish, respecting that it's a functional overlay needing clear visibility.
• Focus rings: Not explicitly detected; recommend implementing outline: 2px solid {colors.border-strong} with outline-offset: 2px for keyboard navigation.
• Navigation dropdowns: Not visible in static screenshot; if folder-type menus exist, they likely use --transition-standard timing.

The overall motion level is subtle — animation serves content revelation, not entertainment. Timing functions favor ease-in-out and cubic-bezier(0.4, 0, 0.2, 1) (standard ease), avoiding bouncy or elastic curves that would feel incongruent with the therapeutic tone.

Imagery Style

• Photography style: Naturalistic, environmental portraiture. The primary image shows the therapist in a bright interior with a plant (Monstera-like) nearby—suggesting warmth, life, organic context. Lighting is soft and diffused, avoiding harsh studio aesthetics.
• Color treatment: Photographs appear minimally processed—natural skin tones, realistic color. No heavy filters, duotones, or vintage effects that would undermine clinical credibility. The images "live" in real-world color space.
• Composition: Direct eye contact with camera (primary portrait), genuine smile, relaxed posture (seated cross-legged in secondary shot). Body language conveys openness and groundedness—aligned with somatic/embodied therapy values.
• Framing strategy: Vertical portrait receives formal bordered treatment (photo frame with shadow); lifestyle/environmental shot appears unframed or loosely cropped, suggesting "behind the scenes" authenticity.
• Role of imagery: Photography supports rather than dominates. The layout gives equal or greater visual weight to the text card and script heading. Images humanize the practitioner; text does the therapeutic positioning work.
• Illustration: Single decorative element—the branch/leaf line art in terracotta. Hand-drawn aesthetic (variable stroke weight, organic curve imperfections). Functions as visual punctuation, not explanatory graphic.
• Absence of imagery types: No abstract gradients, 3D renders, patterns, textures-as-backgrounds, or icon-heavy infographics. The visual vocabulary is photograph + typography + minimal line art.

Icon System

• Library: Custom SVG (Squarespace Social Icons block for Instagram; custom inline SVG for decorative branch).
• Specific icons observed:
  • Instagram (camera/outlined platform icon) — 24px, stroke-based, {colors.body} on cream background in nav
  • Decorative branch/leaf (organic line art) — variable size (~150px+), stroke-only, {colors.primary} color
• Treatment: Stroke-based icons (not filled). Color set to currentColor for inheritance consistency.
• Size alignment: Instagram icon at 24px aligns with the nav's 15px text cap height (icon slightly taller than x-height, creating visual balance).
• Stroke weight: Appears to be 1.5–2px for the Instagram icon; decorative branch uses variable weight (1–3px approx) for hand-drawn effect.
• Icon font usage: None detected — all icons are SVG, not glyph fonts (no Font Awesome, Material Icons, etc.).

Recommended Frontend Stack

- Framework:      Squarespace 7.1 (Fluid Engine) — apparent from container classes, 
                  cookie banner markup, and font-face Adobe Fonts integration
- Styling:        Squarespace Custom CSS (LESS compiler) + injected <style> blocks
                  For rebuild: Tailwind v4 with custom theme extension mapping these tokens
- Fonts:          Adobe Fonts (Typekit): Freight Big Pro, Freight Sans Pro, Bitte
                  Fallback: Google Fonts substitutes (Cormorant Garamond, DM Sans, Dancing Script)
- Animation:      Native CSS transitions (detected); potential Squarespace-built-in 
                  scroll-triggered animations (SS animations plugin)
- Icons:          Inline SVG (custom) + Squarespace Social Icons block
- Component lib:  Squarespace native blocks (Text, Image, Button, Code Injection)
                  For headless rebuild: React + Radix primitives for accessible components

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤ 767px | Single-column stack; script heading shrinks; photo frame full-width; card stacks below photo; nav collapses to hamburger; cookie banner full-width bottom | | Tablet | 768px – 1023px | Two-column grid may persist with reduced gutter; script heading scales down (64–72px?); padding compresses to {spacing.section-md} | | Desktop | 1024px – 1439px | Full layout as shown; 1440px container max-width active | | Wide | ≥ 1440px | Container centers with equal margins; hero spacing may increase proportionally |

Touch Targets

• {component.button-primary} / {component.button-secondary}: 37px height (11px × 2 padding + ~12px text + 2px × 2 border ≈ 38px). Below WCAG AAA 44×44px minimum. Recommend increasing vertical padding to 16px minimum for mobile touch targets.
• {component.top-nav-link}: Height approximately 20–24px (text + tiny padding). Critically below touch target minimum. Nav links must be wrapped in tap areas ≥44px tall on mobile, or replaced by a hamburger menu (standard Squarespace mobile behavior).
• {component.top-nav-icon} (Instagram): 24×24px. Below 44px minimum. Should be embedded in a larger tap container (min 44×44px) with transparent padding expansion.
• {component.cookie-banner} buttons: Same 37px issue. On mobile, increase to 14px 20px padding to reach ~44px height.

Collapsing Strategy

• Navigation: At tablet/mobile breakpoint, the horizontal nav collapses to a hamburger menu icon (standard Squarespace behavior). The folder-type "About Carli" item may expand to a dropdown or separate page.
• Hero columns: The asymmetric two-column layout (photo left, card right) stacks vertically on mobile: script heading → photo frame (full width) → content card (full width, reduced padding) → decorative branch.
• Photo frame: Maintains aspect ratio but scales to container width (likely 100% of mobile viewport minus horizontal padding). Shadow offsets may reduce (±15px vs ±30px) to prevent overflow.
• Content card: Padding reduces from {spacing.section-md} (58px) to {spacing.lg} (20px) on mobile. Font size remains {typography.body-md} (13.272px)—do not shrink below 14px for mobile body copy accessibility.
• Script heading: {typography.display-script} (96px) scales down significantly—likely to 48–56px on mobile—to prevent horizontal overflow and maintain proportion.
• Cookie banner: Transforms from fixed bottom-right corner (360px wide) to full-width bottom banner on mobile, maintaining {spacing.lg} padding.

Image Behavior

• Primary portrait (photo frame): Maintains vertical aspect ratio (3:4 or 4:5), width: 100% of parent column. Object-fit: cover if container constrains height. At mobile, becomes full-viewport-width (minus padding) with proportional height.
• Secondary lifestyle photo: Likely uses object-fit: cover within its container. May be hidden on mobile to simplify layout, or stacked between heading and main photo.
• Decorative branch SVG: Scales proportionally via width % or viewBox. Position may shift from overlapping card edge to sitting below card on mobile stack.

Iteration Guide

1. Build a landing page closely mimicking this design system using Squarespace 7.1 Fluid Engine or, for a headless implementation, Next.js with Tailwind v4 mapping every token below to your tailwind.config.ts theme extension.
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via {section.token} paths. Never hard-code a value that has a token—for example, write padding: var(--spacing-md) or @apply px-[var(--spacing-md)], never padding: 17px.
3. Add state variants (-hover, -disabled, -focus) per your stack's conventions; this spec documents Default and Active/Pressed only for buttons, and Focus for inputs. Implement hover as color darkening (10–15% luminance reduction) and focus as 2px solid outline in {colors.border-strong}.
4. When adding a new component, decide first which visual dialect it belongs to: editorial (cream background, navy/terracotta text, photo-forward) or content-card (navy background, white text, contemplative). Do not create new dialects.
5. Variants of an existing component live as separate frontmatter entries (button-primary-active, never nested objects). State names use kebab-case suffixes: -active, -disabled, -focus, -hover.
6. Run accessibility audit after each iteration: ensure {typography.body-md} at 13.272px passes WCAG AA contrast on {colors.surface-soft} (it does: navy #283b50 on cream #ede6e1 exceeds 4.5:1 ratio). Verify all buttons meet 44×44px touch target minimum on mobile.
7. When in doubt about emphasis: choose scale over weight (larger type before bolder), color placement over quantity (one terracotta accent beats many), and whitespace over decoration (let the cream canvas breathe).
8. Font setup for open-source builds:

   :root {
     --font-display: 'Cormorant Garamond', 'Freight Big Pro', Georgia, serif;
     --font-body: 'DM Sans', 'Freight Sans Pro', -apple-system, sans-serif;
     --font-script: 'Dancing Script', 'Bitte', 'Brush Script MT', cursive;
   }
   

   Load Cormorant Garamond (weights 500, 600), DM Sans (weights 400, 500, 600), and Dancing Script (weight 400) from Google Fonts.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors/transitions for buttons, nav links, and photo frames are not documented. The frontmatter includes {colors.primary-hover} as a recommended hover shade.
• Mobile navigation collapsed state: The hamburger menu, slide-out drawer, and mobile nav styling were not extractable from the desktop-only screenshot.
• Loading skeletons / pending states: No skeleton loaders, spinners, or pending states were visible. Recommended: subtle pulse animation using {colors.hairline} for content loading placeholders.
• Form validation states: Beyond the cookie banner, no forms (contact inputs, newsletter signup) were present in the viewport. Error/success/warning semantic color applications remain undefined.
• Sub-page templates: This spec captures the "About Me" landing page. Other pages (Therapy services, Consultation for Therapists, Contact) may introduce new component patterns (pricing tables, testimonial sliders, booking widgets) not represented here.
• Dark mode: The system as designed uses a light-mode canvas ({colors.surface-soft} cream). A true dark mode would require rethinking the entire surface/text relationship; no evidence suggests one exists or is planned.
• Pixel-exact shadow offset values: The hard shadows (±30px) were extracted from computed styles but their exact RGB values (#bccedc teal, #d99f6b amber) may vary slightly across browsers due to color profile rendering.
• Squarespace-specific CSS variables: The source likely contains --tweak-* namespace variables controlling spacing, colors, and fonts via the Squarespace visual editor. These were not exposed in the extracted DOM snapshot and would be needed for template-level customization without code injection.