Soul's Nest Counseling Design System

Overview

Soul's Nest Counseling presents a deeply atmospheric, emotionally resonant visual identity built around a moody, slate-blue canvas ({colors.canvas} — #283b50) that immediately signals calm authority and clinical warmth. This is not the sterile white of medical practice websites; instead, it embraces darkness as a container for trust, allowing the white ink of its elegant Freight Big Pro headlines to breathe with editorial luxury while maintaining readability through careful contrast management.

The brand voltage lives almost entirely in a single, carefully chosen coral-salmon accent ({colors.primary} — #cf6356) that appears on the hero CTA and nowhere else on the visible page—a restrained choice that makes every touchpoint feel intentional rather than decorative. This restraint is the defining characteristic of the system: where other therapy sites might deploy pastels or gradient washes, Soul's Nest trusts its typographic hierarchy and tonal palette to carry the emotional weight.

The typography move that defines the system is its dual-family pairing: Freight Big Pro (a refined transitional serif) handles all display and headline work at dramatic sizes—105px for the hero's "Intuition" script-like wordmark, 57px for "meets Insight"—while Freight Sans Pro (its humanist sans companion) manages UI chrome, navigation labels set in uppercase at 15px weight 500, and readable body copy at 13.272px. The result is a conversation between elegance and clarity, between the poetic and the practical.

Shape language is dominated by extreme rounding: {rounded.DEFAULT} sits at 300px, creating pill-shaped buttons and containers throughout. This soft geometry counters the angular confidence of the serif letterforms, producing a visual tension that feels both grounded and approachable—exactly the emotional register for a practice specializing in EMDR intensives, ketamine-assisted therapy, and somatic modalities.

The site operates within what appears to be a Squarespace framework, with a single full-bleed hero band carrying a photographic portrait of the practitioner against an interior backdrop, overlaid with the typographic stack and a decorative dotted circle pattern in low-opacity white that suggests mandala-like mindfulness imagery without being literal.

Key Characteristics:

• Deep slate-blue canvas ({colors.canvas}) creates emotional containment; never pure black, never light mode
• Single coral CTA ({button-primary}) as the only saturated brand moment above the fold
• Freight Big Pro display type at {typography.display-xl} (105px) for maximum editorial presence
• Uppercase {typography.nav-link} navigation in weight 500, tracking slightly open
• Pill-shaped everything via {rounded.pill} (300px radius)—buttons, banner CTAs, even the accessibility skip link
• Warm neutral surface tones ({colors.surface-warm}, {colors.surface-soft}) for content bands below the hero
• Opacity-based decorative elements (the dotted circle at ~15% white) rather than flat color blocks
• Staggered opacity animations on load ({extensions.motion.opacity-duration} with sequential delays)

Colors

Brand & Accent

• Primary ({colors.primary} — #cf6356): Warm coral-salmon used exclusively on the hero "Schedule a Session" CTA button. This is the sole voltage point on the entire visible page—a deliberate scarcity that amplifies its call-to-action urgency.
• Primary Hover ({colors.primary-hover} — #c55547): Darkened coral for hover state on the primary button.
• Primary Active ({colors.primary-active} — #b84a3d): Deepest press-state coral for the active/pressed button state.

Surface

• Canvas ({colors.canvas} — #283b50): Deep slate-blue, the dominant background for the header, hero band, and any dark-themed sections. This is the emotional ground of the design—not quite navy, not quite charcoal, but a specific desaturated blue-grey that reads as both professional and soothing.
• Surface Soft ({colors.surface-soft} — #dadfe7): Light cool grey-blue used for alternating content bands below the hero. Provides gentle contrast against {colors.body} text.
• Surface Warm ({colors.surface-warm} — #ede6e1): Creamy off-white with subtle warm undertones. Used for the cookie banner background, outline button borders, and likely for light-mode content cards. This is the "paper" of the system when it needs one.
• Surface Dark ({colors.surface-dark} — #1e2d3d): Deeper than canvas, used for elevated overlays like the cookie consent banner to create depth layering.
• Surface Elevated ({colors.surface-elevated} — #344a61): Slightly lighter than canvas, for cards or panels floating on dark backgrounds.

Text / Ink

• Ink ({colors.ink} — #ffffff): Pure white, the primary text color on all dark surfaces (canvas, surface-dark). Used for headlines, navigation, and hero body copy.
• Body ({colors.body} — #283b50): Matches canvas value; used as text color on light surfaces (surface-soft, surface-warm).
• Body Light ({colors.body-light} — #f5f2ef): Very light warm off-white, used for secondary hero text elements and labels that need to sit on dark backgrounds with less emphasis than pure white.
• Muted ({colors.muted} — #9aacbf): Muted blue-grey for secondary information on dark surfaces—captions, metadata, less-important navigation hints.
• Muted Warm ({colors.muted-warm} — #c4b8af): Warm-toned muted text, specifically observed on the hero's location/service-line subtext ("Serving Portsmouth & Seacoast NH...").
• On Primary ({colors.on-primary} — #ffffff): White text on the coral primary button, meeting AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): Alias for white-on-dark-surface contexts.
• On Warm ({colors.on-warm} — #283b50): Dark slate text on warm/light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.15)): Subtle white-at-15% opacity dividers for dark-surface separation lines. Nearly invisible, used sparingly.
• Border Warm ({colors.border-warm} — #ede6e1): Cream/warm border color matching surface-warm, used for outlined buttons (cookie banner CTAs) and focus indicators in light contexts.
• Border Strong ({colors.border-strong} — rgba(255, 255, 255, 0.25)): More visible white divider at 25% opacity for when a hairline needs more presence.

Semantic

• Error ({colors.error} — #d64545): Red for form validation errors or alert states (inferred from standard patterns).
• Success ({colors.success} — #4a9d6e): Muted green for confirmation messages.
• Warning ({colors.warning} — #d4a84b): Amber for cautionary notices.
• Info ({colors.info} — #6b9fc7): Cool blue for informational callouts.

Typography

Font Family

The system employs two proprietary Adobe Fonts (formerly Typekit) faces that function as a designed pair: Freight Big Pro carries all display and headline responsibilities, while Freight Sans Pro handles body copy, UI chrome, and functional text. Both are premium typefaces from the Freight superfamily, ensuring optical consistency across weights and sizes despite their genre difference (serif vs. sans-serif).

Freight Big Pro is loaded in four cuts (500 regular, 700 bold, plus italic variants), though the visible page primarily uses weight 500 for its display work. It is a transitional serif with high contrast, bracketed serifs, and an editorial quality that evokes literary journals and high-end magazine design—appropriate for a practice positioning itself as thoughtful, depth-oriented, and philosophically grounded rather than transactional.

Freight Sans Pro provides the humanist counterweight: clean but not geometric, warm but not casual. It appears in weights 400 (body copy), 500 (navigation, buttons), and 600 (small headings). The fallback stack includes -apple-system, BlinkMacSystemFont, Segoe UI for graceful degradation if the Typekit fonts fail to load.

A third face, Bitte, appears once in the extracted data (count: 1)—likely reserved for the script-like "Intuition" word in the hero, though the primary assignment maps that word to Freight Big Pro at display size. If Bitte is indeed the script face, it would be a specialty display font used only for that single signature moment.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 105px | 500 | 0.95 (99.75px) | 2.1px | Hero headline—"Intuition" | | {typography.display-lg} | 57px | 500 | 1.11 (63.27px) | 1.14px | Hero subheadline—"meets Insight" | | {typography.display-md} | 39px | 500 | 1.17 (45.63px) | 0.78px | Section headlines on content bands | | {typography.title-md} | 21px | 600 | 1.25 (25.83px) | 0.84px | Card titles, subsection headers | | {typography.body-lg} | 15px | 400 | 1.5 | normal | Logo text, emphasized body | | {typography.body-md} | 13.272px | 400 | 1.4 (18.58px) | normal | Standard paragraph text | | {typography.body-sm} | 12px | 400 | 1.4 | normal | Secondary text, legal copy | | {typography.button} | 12px | 500 | 1.25 | 0.05em | Button labels, CTA text | | {typography.nav-link} | 15px | 500 | 1.4 | 0.02em | Header navigation items | | {typography.label} | 11px | 500 | 1.3 | 0.12em | Uppercase labels, location text | | {typography.caption} | 10px | 400 | 1.4 | 0.08em | Tiny metadata, timestamps |

Principles

The typographic system trusts size and family contrast over weight manipulation for establishing hierarchy. Notice that the hero headline hits 105px while staying at weight 500—the same weight as the 39px section headline and the 57px subheadline. Bold (600–700) is reserved almost entirely for small text ({typography.title-md}) where size cannot do the work. This is an anti-bolding philosophy: big type stays medium-weight to preserve its elegance, while small type gets bolder to remain legible without becoming shouting.

Letter-spacing is deployed expressively and systematically: the massive {typography.display-xl} gets +2.1px tracking (proportionally tiny at that size, but optically opening), while {typography.label} gets +0.12em (quite open for its 11px size) to support its uppercase usage. Navigation links receive minimal positive tracking (+0.02em) to give the uppercase treatment breathing room without feeling loose.

The most distinctive principle is color-as-hierarchy: on the dark hero canvas, the main headline and subheadline use pure {colors.ink} (white), while the supporting service description drops to {colors.muted-warm} (a desaturated warm taupe) at a much smaller size and uppercase treatment. Three dimensions—size, case, and color value—work simultaneously to create a clear reading order without needing weight changes.

Note on Font Substitutes

Freight Big Pro and Freight Sans Pro are commercial Adobe Fonts not available on Google Fonts. For open-source implementation:

• Freight Big Pro → Playfair Display or Cormorant Garamond: Both offer similar transitional serif character with good weight range. Load via Google Fonts with wght@400;500;600;700.
• Freight Sans Pro → Nunito Sans or Source Sans 3: Humanist sans-serifs with comparable warmth. Load with wght@400;500;600;700.
• Bitte → Dancing Script or Great Vibes: If the script face is confirmed for "Intuition," these Google Fonts provide similar flowing character.

Define CSS variables:

--font-display: 'Playfair Display', 'Georgia', serif;
--font-body: 'Nunito Sans', -apple-system, sans-serif;

Layout

Spacing System

• Base unit: Approximately 1px with no strict 4/8px grid; values cluster around organic measurements (17px, 27px, 30px, 47px) suggesting a layout tuned by eye rather than grid-rationalized.
• Tokens:
  • {spacing.xxs} (2px) — micro-separators, hairline gaps
  • {spacing.xs} (10px) — tight internal padding, small gaps
  • {spacing.sm} (16px) — standard tight padding
  • {spacing.md} (20px) — default component internal padding
  • {spacing.lg} (27px) — comfortable element spacing
  • {spacing.xl} (48px) — major vertical rhythm
  • {spacing.section} (62px) — section-to-section vertical padding
  • {spacing.nav-gap} (17px) — horizontal gap between nav items
  • {spacing.element-gap} (30px) — gap between stacked hero elements
  • {spacing.wide} (58px) — generous outer padding for hero content
• Section padding (vertical): {spacing.section} (62px) — applied to content bands below hero.
• Card internal padding: {spacing.lg} (27px) per {component.card} specification.
• Gutters: No explicit gutter system detected; the Squarespace template uses percentage-based fluid columns within a max-width container.

Grid & Container

• Max content width: 1440px for the main container (both <main> and <article> share this width). The visible hero appears to be a full-viewport-width image with text overlaid in a left-aligned column roughly 40-50% width.
• Editorial density: The hero is intentionally sparse—one headline pair, one descriptive line, one CTA. This is editorial-airy, not marketplace-dense. Content below the hero (not fully visible) likely alternates between text-heavy and image-heavy bands.
• Grid behaviors: The Squarespace framework uses a flexible 12-column-ish implicit grid. The nav centers within the 1440px container with logo flush-left and utilities flush-right.
• Hero column split: Left-aligned text column (roughly 45-50% width) containing the typographic stack, with the photograph occupying the full viewport behind/beside it. The text sits atop the image with no solid background card—it's directly composited onto the photo with the canvas color providing legibility through the image's lighter areas.

Whitespace Philosophy

The system practices generous, asymmetric whitespace: the hero breathes with 58px+ of padding on all sides of the text block, and the 105px headline has ample room around it. Vertical rhythm between the headline (105px), subheadline (57px), body label (~11px), and button is managed through {spacing.element-gap} (30px) increments. This is not tight SaaS-ui whitespace; it's editorial-magazine whitespace where the empty space is part of the emotional composition, giving the viewer's eye places to rest in an otherwise information-dense field (therapy services, locations, credentials).

Header Architecture

[Logo: "Soul's Nest Counseling"]  [ABOUT CARLI] [THERAPY] [CONSULTATION...] [CONTACT]  [Instagram Icon]
← flush-left                      ← center-spaced nav items (17px gap)              → flush-right
└──────────────────────── 1440px max-width container ──────────────────────────────────────────────┘

Navigation items are {typography.nav-link}, uppercase, weight 500, white on canvas. Spacing between items is {spacing.nav-gap} (17px).

Hero Section

┌──────────────────────── FULL VIEWPORT WIDTH ──────────────────────────┐
│  ┌────────────── TEXT COLUMN (~50%) ─────────────┐                   │
│  │                                              │   ┌──────────┐     │
│  │   [Decorative Dotted Circle - left aligned]   │   │          │     │
│  │                                              │   │ PHOTO:   │     │
│  │   Intuition            (display-xl, 105px)    │   │ Carli    │     │
│  │   meets Insight        (display-lg, 57px)     │   │ seated   │     │
│  │                                              │   │ interior │     │
│  │   Talk Therapy, EMDR... (title-md?, 21px)    │   │ setting  │     │
│  │                                              │   │          │     │
│  │   SERVING PORTSMOUTH... (label, 11px, upper) │   │          │     │
│  │   ALL AVAILABLE ONLINE  (label, 11px, upper)  │   └──────────┘     │
│  │                                              │                   │
│  │   [SCHEDULE A SESSION]  (button-primary)     │                   │
│  └──────────────────────────────────────────────┘                   │
│  ← 58px padding →                                             ← bg │
└──────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, direct color on canvas | Base surfaces, header background, hero text overlay | | 1 (Hairline) | Subtle opacity border ({colors.hairline}) | Section separators, subtle dividers on dark backgrounds | | 2 (Soft drop) | {extensions.shadows.cookie-banner} (0 8px 32px rgba(0,0,0,0.25)) | Cookie consent banner floating above content | | 3 (Decorative) | {extensions.shadows.md} (teal-green offset shadow) | Potential card accent or decorative element (observed once in data) |

Philosophy: The system is predominantly flat and color-block based rather than shadow-driven. Depth is created through layer opacity (the cookie banner sits on {colors.surface-dark} which is darker than {colors.canvas}), not through drop shadows. The single detected shadow (rgb(188, 206, 205) 30px -30px) is a stylistic offset in a teal-green tone—likely a decorative card treatment or a specific component accent rather than a systemic elevation tool. Buttons are flat (no shadow), the header is flat, and the hero text floats on the photograph without a scrim or gradient overlay.

Decorative Depth

The dotted circular pattern visible on the left side of the hero is rendered in approximately {colors.hairline} (white at ~15% opacity) and creates a mandala-like graphic element that suggests mindfulness, wholeness, and the cyclical nature of therapeutic work. This is vector-style decoration (likely SVG or CSS radial dots) sitting at z-index between the background photo and the text overlay.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.DEFAULT} | 300px | Default system radius—produces fully pill-shaped buttons and containers | | {rounded.sm} | 4px | Slightly squared corners for cards and small containers | | {rounded.md} | 8px | Moderate rounding (reserved for potential future components) | | {rounded.lg} | 16px | Large rounding (reserved for potential future components) | | {rounded.pill} | 9999px | Explicit pill/max-rounding alias for buttons | | {rounded.full} | 9999px | Alternative full-rounding token (avatars, icon circles) | | {rounded.arch} | 50% 50% 0 0 / 30% 30% 0 0 | Arched top edge (observed once—possibly a decorative card or image mask) |

Dominant shape language: Extreme rounding (300px+) on all interactive elements. This creates a soft, approachable, non-clinical feeling that contrasts productively with the serious, dark canvas and the formal serif typography. The combination reads as "professional warmth."

Photography Geometry

The hero photograph is full-bleed, no corner rounding, occupying the entire viewport behind the text overlay. It features the practitioner (Carli Genet) in a warm interior setting (appears to be a naturally lit room with window, plant life, and upholstered seating), wearing a burgundy/maroon dress that harmonizes with the {colors.primary} coral without matching it exactly. The photo is cropped loosely with the subject positioned in the right half of the frame, creating negative space on the left for the typographic composition.

Aspect ratio: appears to be a 3:2 or 16:9 landscape crop, displayed at full viewport height/width.

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-hover}, {component.cookie-banner-button-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The signature "Schedule a Session" CTA appearing centered below the hero text block. Background {colors.primary} (coral), white text using {typography.button} (12px, weight 500, uppercase with 0.05em letter-spacing), fully pill-shaped via {rounded.pill} (300px), padded {spacing.xl} vertically and generously horizontally (14px × 28px). Flat design—no shadow, no gradient. State variant: {component.button-primary-hover} darkens to {colors.primary-hover}; {component.button-primary-active} presses to {colors.primary-active}. This is the only saturated-color button on the entire visible page.

{component.button-outline} — Ghost/outlined button style used for the cookie banner's "OK" and "Decline" actions. Transparent background, {colors.border-warm} (cream) text and 2px border, same {typography.button} specs and {rounded.pill} geometry, tighter padding (11px × 15px). Hover state ({component.button-outline-hover}) adds a subtle 10%-opacity tint of the border color as background fill. Uppercase text transform applied.

{component.skip-link} — Accessibility "Skip to Content" link (hidden until focused). Background {colors.surface-warm}, dark text {colors.body}, pill-shaped with generous padding (16px × 27px). Uses {typography.body-md} sizing.

Cards & Containers

{component.card} — Standard content card for light-background sections. Background {colors.surface-warm} (cream), dark text {colors.body}, body typography, slight rounding {rounded.sm} (4px), internal padding {spacing.lg} (27px). Likely used for service descriptions, testimonial blocks, or bio cards below the hero.

{component.card-dark} — Variant for dark-themed sections or overlays. Background {colors.surface-elevated} (slightly lighter than canvas), white text {colors.ink}, same structural specs as {component.card}.

{component.cookie-banner} — Fixed-position consent notification in bottom-right corner. Background {colors.surface-dark} (deeper slate), white text at {typography.body-sm} size, small rounding {rounded.sm}, padded {spacing.md} (20px × 24px). Casts a moderate drop shadow ({extensions.shadows.cookie-banner}) to float above page content. Contains body copy explaining cookie usage plus two action buttons.

Navigation

{component.top-nav} — Full-width header bar spanning the viewport. Background matches {colors.canvas} (transparently blending with hero), height approximately 80px. Contains logo text left, navigation items center-right, social icon far-right.

{component.nav-link} — Individual navigation menu item ("About Carli", "Therapy", "Consultation for Therapists", "Contact"). Transparent background, white text at {typography.nav-link} (15px, weight 500, uppercase), no border, minimal vertical padding (1.5px). Horizontal spacing between items: {spacing.nav-gap} (17px). Hover variant ({component.nav-link-hover}) shifts text to {colors.muted} (desaturated blue-grey).

{component.logo-text} — "Soul's Nest Counseling" wordmark in the header's left position. White text, {typography.body-lg} size (15px, weight 400), sentence case (not uppercase unlike nav items). No background treatment.

{component.social-icon} — Instagram icon link in header's rightmost position. White, 24px × 24px area, transparent background. Stroke-style icon (not filled).

Hero & Signature Components

{component.hero-band} — The full-viewport hero section. Background is the photographic image (no solid color block), but the compositional base is treated as {colors.canvas} for token reference purposes. Contains the complete typographic stack and CTA. Padding: {spacing.wide} (58px) horizontal, substantial vertical.

{component.hero-headline} — The "Intuition" word (or first line of the h1). Display typography at {typography.display-xl} (105px!—extremely large), Freight Big Pro weight 500, white, with +2.1px letter-spacing. This is the most visually dominant element on the page.

{component.hero-subheadline} — "meets Insight" continuation. {typography.display-lg} (57px), same font and weight, slightly tighter line-height. Together with headline forms the complete H1 "Intuition meets Insight."

{component.hero-body-text} — "Talk Therapy, EMDR & Ketamine Assisted Therapy" descriptive line. Appears in a smaller size (likely {typography.title-md} or slightly larger), white or near-white.

{component.hero-label} — Two-line location/availability text: "SERVING PORTSMOUTH & SEACOAST NH AND MAINE." / "ALL AVAILABLE ONLINE." Rendered in {typography.label} (11px, uppercase, 0.12em letter-spacing) in {colors.muted-warm} (warm taupe). This is the lowest-priority text in the hero hierarchy—small, muted, uppercase.

{component.decorative-circle} — The concentric dot-pattern graphic on the hero's left side. Rendered in very low-opacity white (~15%), creating a mandala-like decorative element. Not interactive; purely atmospheric. Size appears to be roughly 400–500px diameter, positioned to the left of the "Intuition" text.

Footer & Utility

{component.footer} — Page footer (partially inferred). Background {colors.canvas}, muted text {colors.muted} at {typography.body-sm} size, generous padding {spacing.xl} (48px+ vertically). Would contain copyright, contact details, and supplementary links.

{component.footer-link} — Links within the footer area. White or muted-white text, small size, standard line height.

{component.cookie-banner-link} — "Learn more." link inside the cookie banner's explanatory text. White, caption-sized (10px), underlined or otherwise subtly differentiated.

Section Bands

{component.section-band} — Alternating content section with light background. Background {colors.surface-soft}, dark text {colors.body}, headline at {typography.display-md} (39px). Padded {spacing.section} (62px) vertically.

{component.section-band-dark} — Dark-themed alternating section. Background {colors.canvas}, white text, same structural treatment as light band.

Do's and Don'ts

Do

• Do use {colors.primary} (coral) sparingly—reserve it for the single primary CTA per section. Overuse dilutes its emotional impact as the "one warm thing" on a cool canvas.
• Do maintain the {typography.display-xl} size (105px) for the hero headline on desktop. This aggressive scale is intentional and defines the site's editorial personality.
• Do apply {rounded.pill} (300px) to all buttons. Sharp-cornered buttons would fight against the system's soft, approachable geometry.
• Do set navigation items in uppercase with {typography.nav-link} specs (15px, weight 500). Sentence-case nav would look informal against the serif display type.
• Do use {colors.muted-warm} (taupe) for tertiary hero text rather than pure white or pure {colors.muted} (blue-grey). The warmth connects to the photography's interior lighting.
• Do let the hero photograph bleed full-viewport without a gradient scrim. The current design trusts the image's natural tonal range to provide contrast.
• Do employ the decorative dotted circle (or equivalent mindfulness-inspired motif) as a recurring signature element across inner pages. It's the system's only non-typographic brand mark.
• Do maintain {spacing.element-gap} (30px) or greater between stacked hero elements. Tight vertical rhythm would compress the editorial breathing room.
• Do use {typography.label} (11px, uppercase, tracked-out) for metadata lines like location and availability. This establishes clear hierarchy below the display type.
• Do keep the cookie banner on {colors.surface-dark} (darker than canvas) so it visually "floats" above the page content.

Don't

• Don't add drop shadows to {component.button-primary}. The flat treatment is deliberate; shadows would introduce a materiality that conflicts with the editorial-flat aesthetic.
• Don't substitute {colors.primary} for {colors.error} in validation states. The coral is a brand color, not a semantic danger signal.
• Don't use {typography.display-xl} below the hero. That size is reserved for the singular "Intuition meets Insight" moment; section headlines should use {typography.display-md} (39px) or smaller.
• Don't round card corners beyond {rounded.sm} (4px) unless they're buttons. Cards should read as slightly structured containers, not pills.
• Don't introduce new typefaces into the system. The Freight Big Pro / Freight Sans Pro pairing is the entire voice; adding a third face (unless it's the specialty script for "Intuition") breaks the designed cohesion.
• Don't lighten {colors.canvas} to create "sections" within the hero. The deep slate is continuous—section differentiation happens through typography scale and content placement, not background value shifts.
• Don't remove the letter-spacing from {typography.label} or {typography.button}. The open tracking is essential to making uppercase small caps readable and elegant.
• Don't place {colors.surface-warm} (cream) text on {colors.canvas} (dark slate) except in outline/button-border contexts. The contrast ratio would fail accessibility minimums.
• Don't expand the radius vocabulary beyond the defined tokens. The system has intentionally few rounding options because consistency in shape language matters more than flexibility here.
• Don't add gradients or glassmorphism effects to the cookie banner or any overlay. The flat {colors.surface-dark} fill with a simple drop shadow is the complete elevation strategy.

Motion & Animation

Transition Tokens

--transition-fast: background-color 0.1s linear, color 0.1s linear;
--transition-base: 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 ease;

Keyframe Animations

• fonts-loading — Font-face loading animation (standard browser behavior triggered by the font-display: auto property on the @font-face declarations). Controls the flash-of-unstyled-text behavior as Freight fonts download.

Interaction Patterns

• Staggered fade-in: Elements on page load animate opacity from 0 to 1 using {extensions.motion.opacity-duration} (400ms) with cubic-bezier(0.4, 0, 0.2, 1) easing. Successive elements have incremental delays of ~0.005s (detected as opacity 1.5s 0.00540541s, opacity 1.5s 0.0108108s, etc.), creating a cascading reveal effect down the hero text stack.
• Button hover lift: Buttons transition background-color rapidly (0.1s linear) on hover/press, creating responsive tactile feedback without jarring movement.
• Cookie banner entrance: The consent banner slides/fades in from the bottom-right, likely triggered after a short delay post-load. Its dismissal animates opacity out.
• Navigation folder expand: Nav items marked as header-nav-folder-title suggest dropdown folders on hover (About Carli, Therapy likely contain submenus). These would animate open with the base transition timing.
• Focus ring: Form inputs and buttons would show a focus indicator (not explicitly styled in extracted CSS, but standard for accessibility compliance)—recommend a 2px {colors.border-warm} or {colors.ink} outline offset by 2px.

Note on motion level: The system is classified as {extensions.motion.level}: subtle. Animations serve polish and perceived performance, not expressive storytelling. Nothing parallax, nothing dramatic.

Imagery Style

• Photography style: Naturalistic, lifestyle-portrait photography with warm, soft interior lighting. The hero image shows the practitioner in a candid-smile pose within a tastefully decorated room (visible: large window with natural light, snake plant in woven basket, upholstered vintage-style bench, framed artwork leaning on floor).
• Color grading: Images lean warm—creams, woods, soft greens from plants, and the subject's burgundy dress complement the {colors.primary} coral without matching it. No heavy filters or desaturation; the photography feels authentic and unretouched.
• Subject matter: Human-centric, emphasizing presence and approachability. The practitioner looks directly at camera (or slightly off-camera with genuine expression), conveying openness and warmth.
• Composition: Loose environmental portraiture with shallow depth implied. Subject positioned using rule-of-thirds (right third), leaving left-side negative space for text overlay.
• Treatment: Full-bleed, no frame, no corner rounding, no gradient mask over the photo. Text sits directly on the image with the canvas color providing baseline contrast assumption.
• Role of imagery: Supportive but not dominant—the typography is actually larger and more commanding than the photograph. The photo provides emotional texture; the type provides information hierarchy.
• Additional imagery expected (inferred): Interior shots of therapy space, detail shots of objects (plants, textiles, art materials), perhaps abstract textures for section backgrounds. All would maintain the warm-natural-light aesthetic.

Icon System

• Library: Custom SVG icons (no standard library detected in CSS class names or font references).
• Specific icons observed: Instagram (outline/stroke style, 24px, in header's rightmost position); decorative dotted circle (custom SVG/CSS pattern); hamburger menu or chevron icons may exist on mobile (not visible in desktop screenshot).
• Treatment: Stroke-based (not filled), monoline weight (~1.5–2px stroke), rendered in {colors.ink} (white) against the dark header background, or currentColor for flexibility.
• Size: Social icon is 24px × 24px. Other UI icons likely range 16–20px.
• Alignment: Icons align center-vertical with adjacent text (Instagram icon lines up with nav link baselines approximately).
• Recommendation: Continue using stroke-style custom SVGs. If expanding the set, Lucide or Feather icons (both stroke-based, consistent line weight) would integrate well without clashing with the hand-crafted feel.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first, ideal for brochure sites)
- Styling:        Tailwind CSS v3.4+ with custom theme extension (or vanilla CSS variables + Squarespace native)
- Fonts:          Adobe Fonts (Typekit) for Freight Big Pro + Freight Sans Pro; fallback to Playfair Display/Nunito Sans via Google Fonts CDN
- Animation:      Framer Motion (for React/Next) or vanilla CSS transitions (for static/Astro); GSAP unnecessary given subtlety
- Icons:          Custom SVG sprite (continue existing pattern) or Lucide React for any added UI icons
- Component lib:  None (hand-rolled) or Radix Primitives for accessible cookie banner / dialog primitives
- Deployment:     Vercel (if Next.js) or Netlify/Astro hosting; or continue Squarespace as CMS platform

Note on Squarespace: Since the current site runs on Squarspace (evidenced by class names like sqs-button-element, header-nav-folder-title, sqs-cookie-banner-v2), a reimplementation could either (a) stay within Squarespace using its CSS editor and custom code injection, or (b) migrate to a headless setup with Squarespace as CMS. The design tokens here are framework-agnostic and apply equally to either approach.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤ 768px | Single-column hero, stacked text above/below photo, nav collapses to hamburger, button full-width | | Tablet | 769px – 1024px | Two-column hero begins (text + photo side-by-side at reduced scale), nav may condense or show partial items | | Desktop | 1025px – 1440px | Full layout as shown: 105px headline, side-by-side hero, full nav visible | | Wide | > 1440px | Container maxes at 1440px; hero image may extend beyond while text stays constrained |

Touch Targets

• {component.button-primary}: Estimated tap area ~56px × 44px (padding 14px × 28px + text height). Meets WCAG AAA 44×44 minimum comfortably.
• {component.button-outline} (cookie banner): ~40px × 37px (padding 11px × 15px + text). Marginal for AAA—consider increasing to 44px minimum height on mobile.
• {component.nav-link}: Text-only, approximate hit area 15px height × variable width. Should be wrapped in padding to reach 44px height on mobile (Squarespace typically handles this automatically).
• Social icon ({component.social-icon}): 24px × 24px—too small for reliable touch target. Should be expanded to 44px × 44px tap area with invisible padding on mobile.

Collapsing Strategy

• Navigation: On mobile, the five nav items ("About Carli", "Therapy", "Consultation for Therapists", "Contact") collapse into a hamburger menu (implied by header-nav-folder-title classes which suggest folder/dropdown structure already exists). The menu would slide in from right or drop down, with white text on {colors.surface-dark} background.
• Hero columns: The hero splits from side-by-side (desktop) to stacked (mobile). Text column moves above the photograph, or the photograph becomes a narrow strip with text wrapping beside it. The {typography.display-xl} (105px) must scale down dramatically—likely to 48–56px on mobile to fit viewport width while maintaining hierarchy.
• CTA button: {component.button-primary} expands to full-width (100% of text container) on mobile, centered alignment maintained.
• Cookie banner: Remains fixed bottom but compresses horizontally, potentially stacking the "OK" and "Decline" buttons vertically on very narrow screens (< 380px).
• Decorative circle: May be hidden on mobile (reduces to display: none or becomes much smaller, ~200px diameter) to avoid competing with reduced screen real estate and scaled-down typography.

Image Behavior

• Hero photograph: On desktop, covers full viewport (background-size: cover, background-position: center-right to keep subject visible). On mobile, likely shifts position to center or center-left (subject moves toward center of frame as text stacks above). Aspect ratio maintained (no cropping to square).
• Potential content images: Below-fold images would follow responsive-img best practices: srcset for 1x/2x/3x, lazy loading, aspect-ratio boxes to prevent layout shift.

Iteration Guide

1. Set up your project with the recommended stack (Next.js + Tailwind, or Squarespace custom CSS) and define CSS custom properties for every token in this file's frontmatter. Map {colors.x} to --color-x, {typography.y} to --font-y, etc., so your implementation code references tokens, never raw values.

2. Build the header first ({component.top-nav}) with its exact 80px height, {colors.canvas} background, logo left, nav items center-right using {typography.nav-link} specs (uppercase, 15px, weight 500, 17px gaps), and social icon at 24px far-right. Test that the nav collapses gracefully to hamburger below 768px.

3. Implement the hero band ({component.hero-band}) with the full-bleed photograph background, then overlay the typographic stack: {typography.display-xl} "Intuition" at 105px, {typography.display-lg} "meets Insight" at 57px, the service line, the {typography.label} location/availability text in {colors.muted-warm}, and finally the {component.button-primary} coral CTA. Add the decorative dotted circle as an absolutely-positioned SVG or CSS radial-gradient pattern at ~15% white opacity, left-aligned.

4. Create the cookie banner component ({component.cookie-banner}) as a fixed-position element bottom-right, {colors.surface-dark} background, {extensions.shadows.cookie-banner} shadow, containing body copy at {typography.body-sm} and two {component.button-outline} actions ("OK"/"Decline"). Implement the staggered fade-in animation using the transition tokens defined in Motion & Animation.

5. Build out section bands below the hero: alternate {component.section-band} (light {colors.surface-soft} background) and {component.section-band-dark} (dark {colors.canvas}) with {typography.display-md} (39px) headlines. Populate with {component.card} and {component.card-dark} components for service descriptions, testimonials, or practitioner bio content.

6. Implement state variants for every interactive component: -hover, -active (pressed), -disabled (where applicable), -focus. Reference the separate frontmatter entries (e.g., {component.button-primary-hover}) for exact color/token values. Add :hover and :active pseudo-class styles per your framework's conventions.

7. Add the footer ({component.footer}) with {colors.canvas} background, {colors.muted} text, multi-column link layout, and appropriate padding. Ensure all footer links use {component.footer-link} styling.

8. Run accessibility audits: Check contrast ratios for {colors.primary} on {colors.on-primary} (passes AA), {colors.ink} on {colors.canvas} (white on #283b50 passes easily), and especially {colors.muted-warm} on {colors.canvas} for the hero label text (verify this meets WCAG AA at 11px uppercase). Verify all touch targets meet 44×44px minimum on mobile.

9. Test typography scaling: At the {typography.display-xl} size (105px), ensure the headline wraps appropriately on viewports between 1025px–1440px. Implement a clamp() media query if needed: font-size: clamp(48px, 8vw, 105px) for fluid responsiveness while respecting the design intent.

10. Font Setup: Load Freight Big Pro and Freight Sans Pro via Adobe Fonts (Typekit) with the project ID embedded in the <link> tag or @import. Define the CSS variables:

:root {
  --font-display: 'freight-big-pro', 'Playfair Display', Georgia, serif;
  --font-body: 'freight-sans-pro', 'Nunito Sans', -apple-system, sans-serif;
}

If Adobe Fonts unavailable, substitute Playfair Display (weights 400;500;600;700) and Nunito Sans (weights 400;500;600;700) from Google Fonts, adjusting letter-spacing values slightly to match the Freight optical spacing.

Known Gaps

• Hover state styling: Per the no-hover policy, specific hover color values for nav links, cards, and footer links are inferred but not extracted from the static screenshot. Implement hover states using the provided {component.*-hover} token entries as authoritative targets.
• Mobile navigation design: The hamburger menu appearance, animation, and internal structure (dropdown folders for "About Carli" and "Therapy" sub-items) is not visible in the desktop screenshot. The header-nav-folder-title class names imply folder/submenu architecture, but the actual mobile collapsed state is unknown.
• Form input styling: No text inputs, textareas, or selects appear in the visible page or extracted CSS. Contact forms, scheduling widgets, or newsletter signups (likely present on inner pages) would need input component designs derived from the system's established tokens ({colors.canvas} backgrounds, {rounded.sm} corners, {typography.body-md} text).
• Loading/skeleton states: No loading spinners, skeleton screens, or pending-state UI were captured. Recommended: simple opacity fade (matching the {transition-fade} timing) for async content.
• Validation/error states: Beyond the semantic {colors.error} token, no red-bordered-input or error-message component was observable. Form validation styling should follow the system's shape language (pill or slightly-rounded) and use {colors.error} with supporting text in {typography.body-sm}.
• Inner page layouts: Only the homepage hero is documented. Service detail pages, about pages, blog, or booking flow pages likely exist with additional component patterns (pricing tables, FAQ accordions, testimonial carousels) not captured here.
• "Intuition" script font ambiguity: The word "Intuition" appears in a script-like face in the screenshot, but the pre-assigned typography maps it to freight-big-pro at 105px. A separate script face (Bitte, count 1 in font data) may be responsible for this word specifically, which would make it a specialty display font used exactly once in the system. Confirm before final implementation whether Freight Big Pro alone produces this effect or if Bitte should be loaded for that single wordmark instance.
• Cookie banner legal text: The exact wording and link destination for "Learn more." in the cookie consent is partially visible but may vary by jurisdiction. Ensure compliance text matches legal requirements for the target audience's region (GDPR for EU visitors, CCPA for California, etc.).
• Photography licensing/usage rights: The hero photograph of the practitioner is clearly a professional portrait. Any reimplementation should source original photography or properly license stock imagery that matches the described aesthetic (warm interior, natural light, lifestyle portraiture).