Soul's Nest Counseling Design System

Overview

Soul's Nest Counseling presents a therapeutic digital environment that merges editorial sophistication with profound warmth. The visual language centers on a deep slate-blue canvas ({colors.canvas} — #283b50) that establishes clinical gravitas without sterility—a color choice that reads as both professional and containing, like the walls of a well-appointed consultation room. Against this grounding field, warm terracotta-coral voltage ({colors.primary} — #cf6356) appears sparingly but decisively: it animates the signature "Schedule a Session" call-to-action in handwritten script, provides directional arrow iconography, and would logically extend to interactive hover states across the site. This is not a brand of aggressive conversion; it is a brand of invitation.

The typographic architecture is the system's most distinctive feature. Freight Big Pro—an elegant high-contrast serif—operates at theatrical scale, with the primary headline reaching {typography.display-lg} at 105px, a size typically reserved for fashion editorials or luxury hospitality. This deliberate grandeur signals that the therapeutic work offered is substantial, worthy of contemplation, and un-rushed. The letter-spacing is slightly expanded ({typography.display-lg}.letterSpacing of 2.1px), lending each character breathing room that mirrors the spaciousness the practice promises. Body copy defaults to Freight Sans Pro at {typography.body-md} (13.272px), creating a comfortable reading experience that feels intimate rather than institutional. A third voice emerges in the Bitte script typeface, deployed exclusively for the primary CTA—this handwritten gesture humanizes the digital interface and signals personal connection.

Shape language reinforces this warmth-through-restraint philosophy. Buttons employ extreme rounding ({rounded.pill} at 300px), producing fully capsule-shaped touch targets that feel gentle and approachable. Most dramatically, the hero photograph is contained within an architectural arch frame ({rounded.arch}), a geometric choice that evokes doorway imagery, sanctuary thresholds, and the psychological concept of "container"—all deeply resonant metaphors for therapeutic practice. Spacing throughout is generous, with section gaps reaching {spacing.hero} (95px), ensuring content never feels compressed or anxious.

The site employs a banded layout structure where background surfaces alternate between mist-gray ({colors.surface-mist}), cream ({colors.surface-cream}), and the dominant canvas tone. Photography receives special treatment: natural-lit portraits of the practitioner appear within the arched frame, positioned to the right of headline text, creating an asymmetric but balanced composition that places the human face as the ultimate proof point of the service offered.

Key Characteristics

• Deep slate-blue {colors.canvas} (#283b50) serves as the primary canvas, establishing containment and professionalism
• Terracotta-coral {colors.primary} (#cf6356) functions as the sole voltage color, reserved for CTAs and directional cues
• Freight Big Pro headlines scale to 105px ({typography.display-lg}) with expanded letter-spacing for editorial gravitas
• Bitte script typeface ({typography.script-cta}) provides handwritten warmth exclusively on the primary CTA
• Arched image frames ({rounded.arch}) create sanctuary-doorway metaphor for photography
• Capsule-rounded buttons ({rounded.pill} — 300px radius) ensure all interactive elements feel approachable
• Cream ({colors.surface-cream}) and mist-gray ({colors.surface-mist}) surfaces provide alternating band contrast against the dark canvas
• Uppercase navigation links ({typography.nav-link} with textTransform: uppercase) maintain clinical precision while remaining inviting
• Generous vertical rhythm with section spacing up to {spacing.hero} (95px) prevents anxious compression
• Custom SVG icons including a crescent moon decorator and arrow indicators extend brand personality beyond typography

Colors

Brand & Accent

• Primary ({colors.primary} — #cf6356): Warm terracotta-coral used for the "Schedule a Session" script CTA text, arrow icons, and as the semantic action color throughout. Appears only on light backgrounds for AA contrast compliance.
• Primary Hover ({colors.primary-hover} — #c45447): Darkened coral variant for interactive states; inferred from standard accessibility patterns since hover extraction is unreliable.
• Accent Warm ({colors.accent-warm} — #d99f6b): Golden-honey tone detected in decorative shadow offsets; used for ambient depth effects on featured surfaces.

Surface

• Canvas ({colors.canvas} — #283b50): Deep slate-blue serving as the primary page background, header ground, and cookie banner fill. Reads as navy-adjacent but warmer due to green undertones.
• Surface Cream ({colors.surface-cream} — #ede6e1): Warm off-white with peach undertones; used for the lower hero band, footer ground, and cookie banner text/button borders.
• Surface Mist ({colors.surface-mist} — #dadfe7): Cool light gray-blue; forms the upper hero background behind the main headline, providing subtle temperature contrast with cream bands below.
• Surface Dark ({colors.surface-dark} — #283b50): Alias for canvas; used when semantic clarity requires explicit "dark surface" naming in component contexts.

Text & Ink

• Ink ({colors.ink} — #ffffff): Pure white text on dark surfaces; used for body copy on canvas-grounded sections and header navigation text.
• Body ({colors.body} — #283b50): The slate-blue used as text color on light surfaces (mist and cream backgrounds); identical to canvas value, creating tonal harmony.
• Body Light ({colors.body-light} — #dadee7): Very pale blue-gray; observed in minor text instances requiring reduced contrast on complex backgrounds.
• Muted ({colors.muted} — #ede6e1): Cream-toned text for de-emphasized content on dark grounds (cookie banner body copy).
• Muted Soft ({colors.muted-soft} — #dadfe7): Mist-toned variant for secondary information on dark contexts.
• On Primary ({colors.on-primary} — #ffffff): White text atop {colors.primary} backgrounds; satisfies WCAG AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface; functionally equivalent to {colors.ink} in this palette.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(237, 230, 225, 0.3)): Semi-transparent cream line for subtle dividers; opacity reduces visual weight.
• Border Strong ({colors.border-strong} — #ede6e1): Full-opacity cream border for defined edges (cookie banner buttons, input outlines).
• Border Cookie ({colors.border-cookie} — #ede6e1): Explicit token for cookie consent UI borders; semantically grouped even though value matches {colors.border-strong}.

Typography

Font Family

The system employs three distinct typefaces, each mapped to a specific rhetorical role. Freight Big Pro (Adobe Typekit) serves as the display and heading family—a sophisticated serif with moderate contrast, old-style proportions, and refined terminals. It carries all hierarchical weight from the 105px hero down through subheadings at 21px. Its presence signals editorial authority and timeless trustworthiness appropriate to therapeutic practice.

Freight Sans Pro (also Adobe Typekit) handles body copy, navigation, and functional UI text. It shares DNA with its serif sibling (same designer lineage) ensuring harmonious pairing, while its clean geometric skeleton ensures readability at small sizes (13.272px body default). Navigation links use this face at 15px weight 500 with uppercase transformation, achieving clinical precision without coldness.

Bitte is a script/handwritten face deployed in exactly one context: the "Schedule a Session" call-to-action. Its organic, personal quality interrupts the otherwise structured typographic grid, functioning as a visual whisper—"a real person is here." This constrained usage prevents the script from feeling gimmicky while maximizing emotional impact.

All fonts load via Adobe Typekit with font-display: auto, ensuring FOIT/ FOUT behavior follows platform defaults. Fallback stacks include Georgia for serifs, system sans-serif stacks for Freight Sans Pro, and Brush Script MT for Bitte.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 105px | 500 | 0.95 | 2.1px | Primary hero headline (alias for display-lg) | | {typography.display-lg} | 105px | 500 | 0.95 | 2.1px | Hero H1 "Talk Therapy & Psychedelic Integration" | | {typography.title-md} | 57px | 500 | 1.11 | 1.14px | Major section headings on dark surfaces | | {typography.title-sm} | 39px | 500 | 1.17 | 0.78px | Sub-section headings | | {typography.heading-md} | 21px | 600 | 1.23 | 0.84px | Card titles, tertiary headings | | {typography.body-md} | 13.272px | 400 | 1.4 | normal | Body copy, descriptions, paragraphs | | {typography.body-sm} | 12px | 400 | 1.4 | normal | Legal text, cookie banner, captions | | {typography.nav-link} | 15px | 500 | 1.4 | 0 | Header navigation items (uppercase) | | {typography.button} | 12px | 500 | 1.25 | 0.05em | Button labels (uppercase) | | {typography.script-cta} | 24px | 400 | 1.2 | 0 | Handwritten "Schedule a Session" CTA |

Principles

The typography system trusts scale over weight to establish hierarchy. Notice that the display weight never exceeds 500 (medium), and even the smallest heading ({typography.heading-md}) reaches only 600. This restraint prevents the page from feeling aggressive or sales-driven—critical for a therapeutic context where safety must be communicated visually. Instead, the 105px headline does the heavy lifting, occupying roughly 8 lines of vertical space and demanding attention through sheer presence rather than boldness.

Letter-spacing plays a subtle but important role. Display text uses positive tracking (2.1px at 105px scale), which prevents the tight crowding that can make large serif text feel claustrophobic. Body text uses normal (browser-default ~0em), preserving the efficient rhythm expected of readable prose. Button text adds slight expansion (0.05em) combined with uppercase transformation, giving small labels tactile crispness.

The script exception is architecturally significant: by confining Bitte to a single interaction point, it becomes a signifier of "this is where you take action." If script appeared elsewhere, this signal-to-noise ratio would degrade. Future implementers should treat {typography.script-cta} as a protected resource, not a reusable text style.

Note on Font Substitutes

Freight Big Pro and Freight Sans Pro are proprietary Adobe Typekit faces unavailable via Google Fonts. For open-source implementations, substitute:

• Freight Big Pro → Playfair Display (Google Fonts) — similar x-height, moderate contrast, elegant italic variants available
• Freight Sans Pro → DM Sans or Source Sans Pro — clean geometric sans with comparable weight range (400–700)
• Bitte → Dancing Script or Pacifico — organic handwritten feel; note that exact script matching is difficult and may require custom licensing

Define CSS variables for easy swapping:

--font-display: 'Playfair Display', 'Freight Big Pro', Georgia, serif;
--font-body: 'DM Sans', 'Freight Sans Pro', -apple-system, sans-serif;
--font-script: 'Dancing Script', 'Bitte', cursive;

Layout

Spacing System

• Base unit: 17px (the most frequently occurring spacing value in extracted CSS).

• Tokens:

  • {spacing.xxs} (2px): Hairline gaps, micro-adjustments
  • {spacing.xs} (11px): Tight internal padding (cookie buttons)
  • {spacing.sm} (16px): Small component padding
  • {spacing.md} (17px): Base unit; paragraph margins, element gaps
  • {spacing.lg} (20px): Medium component padding, loose internal spacing
  • {spacing.xl} (27px): Section-internal grouping space
  • {spacing.xxl} (48px): Major block separation
  • {spacing.section} (58px): Standard section vertical padding
  • {spacing.section-lg} (62px): Generous section padding variant
  • {spacing.hero} (95px): Hero band top/bottom padding
  • {spacing.wide} (183px): Extreme lateral offset (observed in container contexts)

• Section padding (vertical): {spacing.hero} (95px) in the hero band; {spacing.section} (58px) or {spacing.section-lg} (62px) for content sections below.

• Card internal padding: Observed at {spacing.lg} (20px) for compact components; expand to {spacing.xl} (27px) for breathing room.

• Gutters: Content sits within an implicit 1440px max-width container; lateral gutters approximate {spacing.wide} (183px) at desktop viewport.

Grid & Container

The site operates within a 1440px max-width content container centered in the viewport. This wide format accommodates the asymmetric hero layout where text occupies approximately 45–50% width (left-aligned) and the arched photograph fills the remaining right portion. The grid is fundamentally single-column editorial—no multi-column card grids are visible in the above-fold viewport, suggesting the site prioritizes narrative flow over dashboard density.

Header navigation uses a distributed flex layout: logo flush-left, navigation items centered or distributed with even spacing, and utility icons (Instagram) flush-right. The nav itself constrains to approximately 624px width when collapsed to its content footprint.

Hero column splits follow roughly a 55/45 or 50/50 ratio depending on viewport width, with the text column maintaining left-alignment and the image column right-aligning its arched frame near the container edge.

Whitespace Philosophy

This is an editorial-airy whitespace system. The 95px hero vertical padding ({spacing.hero}) alone exceeds many entire section heights on marketplace sites. This generosity is intentional: it communicates that the practitioner is not rushed, that there is space to breathe before engaging, and that the content deserves contemplation rather than scanning. The system refuses anxiety-inducing compression—even the cookie banner, often crammed into corners, receives 20px internal padding and clear typographic hierarchy.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Soul's Nest Counseling]     ABOUT CARLI  THERAPY  ...   [IG]   │
│         logo                    nav-links (uppercase)       utility │
│                                                                 │
├─────────────────────────────────────────────────────────────────→  max-width: 1440px (implicit)
│  (header height: ~80px, background: canvas)                      │
└─────────────────────────────────────────────────────────────────┘

Navigation items use uppercase transformation with 15px Freight Sans Pro weight 500, spaced evenly with horizontal gaps approximately 17–20px. The Instagram icon sits at the far right as a minimal outline SVG stroke.

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                    ┌──────────────────────┐                      │
│  Talk Therapy      │                      │                      │
│  &                 │   [Arched Photo]     │                      │
│  Psychedelic       │   Carli Genet        │                      │
│  Integration       │   in chair           │  ← surface-mist bg   │
│                    │                      │                      │
│  SERVING MAINE... │                      │                      │
│                    └──────────────────────┘                      │
│  🌙 Schedule →                                                │
│                      ← surface-cream bg starts here             │
└─────────────────────────────────────────────────────────────────┘

The hero spans two background bands: the upper headline area on {colors.surface-mist}, transitioning to {colors.surface-cream} for the subheadline and CTA zone. The arched image frame straddles this boundary, creating visual continuity. The crescent moon icon precedes the script CTA, adding celestial/psychological symbolism.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat Baseline | No shadow, solid background | Header, full-width bands, flat buttons | | 1 – Hairline Outline | 2px solid {colors.border-strong} | Cookie banner button borders | | 2 – Warm Offset Shadow | rgb(217, 159, 107) 30px -30px 0px 0px | Decorative depth accent (bottom-right offset in warm gold) | | 3 – Transparent Placeholder | Zero-opacity box-shadows | Structural shadow slots (currently invisible, reserved for future elevation) | | 4 – Modal Overlay | N/A (not observed) | Cookie banner appears as fixed-position overlay |

The depth philosophy here is color-block dominant, shadow minimal. Unlike SaaS dashboards that rely on drop shadows to indicate z-layering, this site uses background color alternation (canvas → mist → cream) to create sectional separation. The single decorative shadow ({extensions.shadows.warm-offset}) is an artistic flourish—a warm golden cast suggesting sunlight—rather than a functional elevation cue. Shadows are intentionally absent from cards, images, and buttons, keeping the aesthetic flat, print-editorial, and calm.

Decorative Depth

The warm offset shadow ({extensions.shadows.warm-offset}) is the sole non-flat depth element currently deployed. Its golden-orange hue (#d99f6b) complements the terracotta primary without duplicating it, suggesting a light source from the lower-right. This could be applied to floating elements, testimonial cards, or featured imagery in expanded implementations.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Minor inner elements (inferred for consistency) | | {rounded.DEFAULT} | 8px | Default card/component rounding | | {rounded.md} | 12px | Medium emphasis containers | | {rounded.lg} | 16px | Large content cards | | {rounded.xl} | 24px | Feature panels | | {rounded.pill} | 300px | Fully capsule-shaped buttons (cookie CTA, skip-to-content) | | {rounded.arch} | 50% 50% 0px 0px / 30% 30% 0px 0px | Hero photograph frame—elliptical top arch with flat base | | {rounded.full} | 9999px | Perfect circles (crescent moon decorator icon) |

Photography Geometry

Hero photography is cropped into a vertical rectangle (approximately 3:4 or 4:5 aspect ratio) and contained within the arched frame ({rounded.arch}). This shape creates a doorway/window effect that feels inviting rather than voyeuristic. The arch geometry uses a compound border-radius: elliptical on top (50% horizontal, 30% vertical) flattening to square corners at the bottom, mimicking classical architectural arches. No corner rounding is applied to the image itself—the frame provides all shaping. On mobile viewports, this arch would likely compress vertically or transition to a simpler rounded rectangle to prevent extreme narrowing.

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.

Navigation & Header

{component.top-nav} — Full-width sticky header bar spanning the viewport width at approximately 80px height. Background {colors.canvas} creates a seamless extension of the dark body ground. Contains the wordmark "Soul's Nest Counseling" set in Freight Big Pro (likely {typography.title-sm} or smaller) flush-left, navigation folder-titles centered or distributed, and an Instagram stroke-icon flush-right. No visible border-bottom; separation from content relies on color change to {colors.surface-mist} in the hero zone.

{component.nav-link} — Individual navigation items ("ABOUT CARLI", "THERAPY", "CONSULTATION FOR THERAPISTS", "CONTACT"). Background transparent, text {colors.body} (dark slate on the light header override, or {colors.ink} if header were truly canvas-colored per CSS). Typography {typography.nav-link}: 15px Freight Sans Pro weight 500, uppercase, with 1.5px vertical padding. These appear as folder-titles suggesting dropdown menus on hover/click.

Hero Section

{component.hero-band} — Full-viewport-width hero container spanning two background zones. Upper portion {colors.surface-mist}, lower portion transitioning to {colors.surface-cream}. Padding vertical {spacing.hero} (95px). Contains the headline, subheadline, CTA assembly, and arched image frame arranged in flex row (text left, image right).

{component.headline-primary} — The H1 "Talk Therapy & Psychedelic Integration" rendered in {typography.display-lg} (105px Freight Big Pro weight 500). Color {colors.body} (slate-blue on light background). Line height 0.95 (tight for display), letter-spacing 2.1px. Text wraps across four lines with the ampersand receiving no special treatment—it flows naturally in the serif face.

{component.subheadline} — "SERVING MAINE, PORTSMOUTH & SEACOAST NEW HAMPSHIRE." set in {typography.heading-md} (21px weight 600) or possibly {typography.body-md} with uppercase override. Color matches {colors.body}. Positioned below headline with {spacing.md} (17px) top margin, expanding to {spacing.lg} (20px) or more based on visual rhythm. Letter-spacing appears expanded for uppercase legibility.

{component.subheadline-uppercase} — Supporting descriptive text below location line (visible in meta as "A tailored approach..."). Set in {typography.body-md} at 13.272px, likely sentence case or lowercase for warmth contrast with the uppercase location line above.

{component.cta-script-button} — The signature "Schedule a Session" link rendered in {typography.script-cta} (Bitte script, 24px). Color {colors.primary} (coral-terracotta). Preceded by a crescent moon SVG icon ({component.image-frame-circle-decorator}) in {colors.canvas} and followed by a right-pointing arrow ({component.cta-arrow-icon}) in matching {colors.primary}. No background, no border—purely typographic/iconographic. This is the highest-voltage interaction point on the page despite its minimal styling.

{component.cta-arrow-icon} — Simple directional arrow (→) in {colors.primary}, sized approximately 24px, aligned baseline with script text. Indicates action directionality.

{component.image-frame-arch} — Container for the hero photograph of Carli Genet. Rounded {rounded.arch} creating the elliptical-top arch. Background transparent (image bleeds to edges internally). Positioned in the right-hand column of the hero flex layout. The photograph shows the practitioner seated in a cream armchair, smiling warmly, wearing casual attire—projecting authenticity and approachability. Image likely has subtle internal padding or mask to prevent facial cropping at the arch apex.

{component.image-frame-circle-decorator} — Crescent moon (or partial circle) SVG icon preceding the script CTA. Size approximately 48px diameter, filled with {colors.canvas} (dark slate), creating a "moon phase" visual that resonates with psychedelic integration themes and cyclical healing concepts.

Cookie Consent

{component.cookie-banner} — Fixed-position overlay appearing bottom-right (per .BOTTOM_RIGHT class). Background {colors.canvas} (dark slate), creating strong contrast with underlying content. Padding {spacing.lg} horizontally, {spacing.lg} vertically. Contains legal text and two action buttons. Rounded 0px (sharp corners distinguish it from softer page elements).

{component.cookie-banner-text} — Explanatory copy: "By using this website, you agree to our use of cookies..." Set in {typography.body-sm} (12px), color {colors.muted} (cream-on-dark). Includes inline "Learn more." link.

{component.cookie-banner-button-primary} — "OK" accept button. Background transparent, 2px solid border in {colors.border-cookie} (cream), text same cream color. Typography {typography.button}: 12px weight 500, uppercase, letter-spacing 0.05em. Rounded {rounded.pill} (300px—fully capsule). Padding 11px horizontal, 15px vertical. Hover state would invert fill (implied).

{component.cookie-banner-button-secondary} — "Decline" button. Identical styling to accept button—both are "ghost" or "outline" style. In a refined implementation, decline might receive subtly reduced opacity or thinner border to establish visual hierarchy favoring acceptance.

Accessibility & Utilities

{component.skip-to-content} — Accessibility shortcut link (typically hidden until focused). Background {colors.canvas}, text {colors.ink} (white), border 2px solid canvas. Rounded {rounded.pill}. Padding approximately 26px horizontal, 16px vertical. Typography {typography.body-md}. Appears as a prominent pill that would overlay content when tab-focused, meeting WCAG 2.44px visible focus indicator requirements.

Footer (Inferred)

{component.footer-band} — Lower page section on {colors.surface-cream} background. Would contain contact information, license details, social links, and legal footers. Typography {typography.body-md} in {colors.body} (slate on cream). Generous padding {spacing.section} or greater.

Do's and Don'ts

Do

• Do reserve {typography.script-cta} (Bitte) exclusively for the primary call-to-action; its power derives from singularity.
• Do maintain the 105px display scale ({typography.display-lg}) for H1s—the theatrical size is foundational to the brand's editorial authority.
• Do use {rounded.arch} (the elliptical-border-radius compound value) for hero photography frames; this shape carries significant symbolic meaning (doorway/threshold).
• Do apply uppercase transformation (text-transform: uppercase) to navigation links and button labels per {typography.nav-link} and {typography.button} specifications.
• Do alternate between {colors.surface-mist} and {colors.surface-cream} for sectional banding; this cool/warm oscillation creates visual rhythm without jarring contrast.
• Do keep button radii at {rounded.pill} (300px) for capsule shapes; anything sharper breaks the approachable, gentle aesthetic.
• Do position the crescent moon decorator icon ({component.image-frame-circle-decorator}) immediately left of script CTAs as a consistent visual signature.
• Do allow generous vertical padding (minimum {spacing.section}, ideally {spacing.hero}) in major sections; compressed spacing reads as anxious and antithetical to therapeutic branding.
• Do use {colors.primary} (#cf6356) sparingly—one CTA, a few arrows, perhaps link hovers; saturation fatigue undermines the sanctuary mood.
• Do pair Freight Big Pro headlines with Freight Sans Pro body copy to maintain familial type harmony; avoid mixing in third faces except for the protected script role.

Don't

• Don't apply bold weights (700+) to display typography—the system caps at 500–600; heaviness contradicts the "un-rushed" positioning.
• Don't substitute {colors.body} (#283b50) for {colors.primary} (#cf6356) in CTAs; the slate blue reads as informational, not actionable.
• Don't remove letter-spacing from display text ({typography.display-lg}.letterSpacing of 2.1px); crowded large serifs feel oppressive.
• Don't use {typography.script-cta} for secondary actions, labels, or decoration—protect its semantic exclusivity.
• Don't introduce gradient overlays or heavy drop shadows to hero photography; the flat, framed presentation honors the subject's authenticity.
• Don't collapse spacing below {spacing.md} (17px) between major blocks; the airy rhythm is non-negotiable for this brand voice.
• Don't render navigation items in sentence case; the uppercase convention ({typography.nav-link}) signals clinical precision.
• Don't expand the border-radius vocabulary beyond the defined scale—especially avoid introducing new arch variants that dilute the signature shape.
• Don't place {colors.ink} (white) text on {colors.surface-mist} or {colors.surface-cream} directly; use {colors.body} (slate) for those surfaces.
• Don't treat the cookie banner as an afterthought in component design; its polished ghost-button style ({component.cookie-banner-button-primary}) reflects overall system care.

Motion & Animation

Transition Tokens

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

Keyframe Animations

• fonts-loading — Typekit font-loading state manager; controls flash-of-unstyled-text behavior during Freight family loading sequences.

Interaction Patterns

• Cookie banner reveal: Fixed-position overlay fades in with staggered opacity delays (1.5s base, +0.008s increments per element) suggesting sequential appearance animation.
• Font loading transition: Opacity crossfade (0.4s cubic-bezier standard) swaps system fallback fonts for Adobe Typekit faces once loaded, preventing jarring reflow.
• Button micro-interactions: Ghost buttons (cookie CTA, skip-to-content) exhibit fast color/background transitions (100ms linear) on interaction states.
• Padding morphing: Some containers animate padding changes (140ms ease-in-out) likely tied to accordion or expand-collapse behaviors in dropdowns.
• Scroll-triggered fade-up: Not explicitly detected but strongly recommended for content sections below the fold; the editorial tone demands graceful entrance animations (opacity + transform Y translation) rather than abrupt appearances.
• Script CTA hover inference: The "Schedule a Session" script link would benefit from a gentle color shift toward {colors.primary-hover} or a subtle underline reveal (SVG stroke-dashoffset animation) to affirm clickability without adding visual weight.

Imagery Style

• Photography style: Natural-light portraiture with warm color grading; subjects appear in relaxed, authentic poses (seated in comfortable furniture, casual attire, genuine smile).
• Color treatment: Images lean slightly warm, complementing the {colors.surface-cream} and {colors.accent-warm} palette tones; not heavily desaturated or filtered—honesty is valued over stylization.
• Subject matter: Practitioner portrait as primary hero asset; likely expands to office environment shots, nature imagery (coastal Maine references), and abstract therapeutic metaphors on interior pages.
• Composition within frames: Subjects are center-weighted with adequate headroom for the arch crop; eye-line sits in the upper-third of the frame following rule-of-thirds conventions.
• Role relative to text: Photography supports rather than dominates—the 105px headline claims primacy; the image provides human proof point and emotional warmth.
• Arch masking effect: The {rounded.arch} frame creates a vignette-like focal effect, drawing the eye toward the subject's face while the flat bottom edge grounds the composition.
• Background environments: Interiors show curated but lived-in spaces (armchair, side table, artwork, plants)—signaling that therapy happens in real rooms, not sterile clinics.
• Absence of product/lifestyle imagery: No stock photos of people meditating on rocks or generic "wellness" scenes; specificity and authenticity are paramount.

Icon System

• Library: Custom SVG (inline, no detected icon font library). The site uses hand-crafted or template-specific SVG paths rather than Lucide, Heroicons, or Material sets.
• Specific icons observed:
  • Instagram camera outline (header utility, stroke-based)
  • Crescent moon / partial circle (CTA decorator, filled {colors.canvas})
  • Right arrow / chevron (CTA directional indicator, stroke {colors.primary})
• Treatment: Mix of stroke and fill styles. Instagram and arrow are stroke-based (likely currentColor or explicit color tokens). Moon decorator is filled solid.
• Size alignment: Icons scale relative to adjacent text. Moon icon approximates 48px diameter (matching script cap height). Arrow approximates 20–24px width. Instagram icon in header is approximately 20×20px.
• Stroke weight: Consistent 2px stroke width observed across outlined icons (matches button border thickness).
• Custom recommendation: Any additional icons should match the 2px stroke weight, use {colors.body} or {colors.primary} fills, and maintain geometric simplicity—no detailed illustrations or complex paths.

Recommended Frontend Stack

- Framework:      Squarespace 7.1 (native) or Next.js + React for custom rebuild
- Styling:        Squarespace engine (CSS variables + JSON theme) / Tailwind CSS if rebuilding
- Fonts:          Adobe Typekit (freight-sans-pro, freight-big-pro, bitte) — requires active subscription
                   Fallback: Google Fonts (Playfair Display, DM Sans, Dancing Script)
- Animation:      Native CSS transitions (detected); Framer Motion for scroll-triggered reveals if rebuilding
- Icons:          Custom SVG (inline); Lucide React for utility icons if standardizing
- Component lib:  Squarespace native blocks / shadcn/ui if rebuilding in React

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column stack; hero image moves below text or becomes full-bleed; nav collapses to hamburger; arch frame simplifies to rounded rectangle | | Tablet | 640px – 1024px | Two-column hero maintained but with reduced display font size (~70–80px); spacing compresses to {spacing.section}; arch preserved | | Desktop | 1024px – 1440px | Full specification applies: 105px headline, arch frame, distributed nav | | Wide | > 1440px | Container maxes at 1440px with auto margins; lateral whitespace increases |

Touch Targets

• {component.cookie-banner-button-primary}: ~37px × 41px (11px + 15px × 2 padding + border) — exceeds WCAG AAA 44×44 minimum comfortably
• {component.cookie-banner-button-secondary}: Identical dimensions to primary — compliant
• {component.skip-to-content}: ~60px × 48px (padding 26px + 16px) — exceeds minimum significantly
• {component.nav-link}: Height ~18px (1.5px × 2 padding + 15px font) — may fall short of 44px; recommend increasing padding to minimum 14px vertical or converting to padded hit areas
• {component.cta-script-button}: Touch area depends on clickable wrapper; script text alone is ~29px tall — requires generous invisible padding (minimum 8px all sides) to reach 44×44

Collapsing Strategy

• Navigation: Folder-titles ("ABOUT CARLI", "THERAPY") convert to a hamburger menu icon on mobile, revealing a slide-down or off-canvas drawer with stacked links retaining uppercase styling.
• Hero columns: At mobile breakpoint (< 640px), the flex row becomes a column with headline stack (H1 → subheadline → location → CTA) followed by full-width arched image or simplified rounded image.
• Arch frame: The {rounded.arch} ellipse may flatten to {rounded.lg} or {rounded.xl} on narrow viewports to prevent the image from becoming a thin sliver; alternatively, the arch persists but the image zooms/crops to fill the narrower aperture.
• Display typography: 105px headline scales down via clamp() or media queries—likely targeting 48–56px on mobile to maintain 3–4 line wrap without excessive vertical consumption.
• Cookie banner: Remains fixed bottom (or bottom-center on mobile) with button stack potentially switching from inline to vertical (OK above Decline) for thumb-friendly tap zones.

Image Behavior

• Hero portrait: Within the arch frame, the image uses object-fit: cover to fill the shape; on mobile column layout, aspect ratio may shift from ~3:4 portrait to 4:3 landscape or 1:1 square to suit narrow widths.
• Crescent moon decorator: Maintains proportion relative to script text; may shrink slightly on mobile (32–36px vs 48px desktop).
• Future imagery (office interiors, coastal scenes): Should adopt responsive art direction—wider crops for desktop, tighter focal lengths for mobile, always respecting the warm color grading convention.

Iteration Guide

1. Build a landing page closely mimicking the Soul's Nest Counseling design system using this DESIGN.md as the single source of truth. Use Next.js with Tailwind CSS (or Squarespace's native theming if extending the existing site).
2. Extract every color, font, radius, and spacing value from the YAML frontmatter via {section.token} paths. Never hard-code a value that has a canonical token—for example, always write backgroundColor: "{colors.canvas}" never backgroundColor: "#283b50".
3. Add state variants (-hover, -disabled, -focus) per your stack's conventions; the spec documents Default and Active/Pressed explicitly, but hover styling should be implemented at build time using {colors.primary-hover} for primary actions and opacity shifts for secondary elements.
4. When adding a new component, decide first which sub-system it belongs to: Editorial (hero, headlines, body copy), Navigation (header, links, skip-to-content), Conversion (script CTA, form inputs), Legal (cookie banner), or Utility (decorators, icons). Each group has distinct visual rules.
5. Variants of an existing component live as separate frontmatter entries (button-primary-active never nested under button-primary). This enables exhaustive documentation and programmatic variant generation.
6. Run npx @google/design.md lint DESIGN.md after edits—broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay particular attention to contrast ratios for {colors.body} on {colors.surface-mist} (currently ~7.5:1, passing AA large) and {colors.primary} on white (~3:1, passes AA for large text only).
7. When in doubt about emphasis: bigger type before bolder type (scale from 105px down, not weight from 400 up), signature script CTA before solid accent buttons, warm surfaces before cool ones, and generous whitespace before additional decorative elements.
8. Implement the arch frame ({rounded.arch}) as a CSS border-radius compound value or as an SVG clip-path for precise control over the elliptical-to-square transition. Test how photographs crop at various aspect ratios within this shape.
9. Load Adobe Typekit fonts asynchronously with font-display: swap to prevent render-blocking; define CSS custom properties (--font-display, --font-body, font-script) for easy substitution during development without Typekit access.
10. Reserve the Bitte script typeface for exactly one instance per page view—the primary conversion action. If multiple CTAs exist, only the most important one receives script treatment; others use {typography.button} uppercase style.

Font Setup

For development environments without Adobe Typekit access, configure these CSS variable substitutions in your :root or tailwind config:

:root {
  --font-display: 'Playfair Display', 'Freight Big Pro', Georgia, serif;
  --font-body: 'DM Sans', 'Freight Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Dancing Script', 'Bitte', cursive;
}

Import from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Dancing+Script:wght@400;500&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

Note: Freight Big Pro has noticeably different rhythm than Playfair Display (taller x-height, different serif structure). Final QA must include comparison testing with licensed fonts before production deployment.

Known Gaps

• Hover state styling: Per the no-hover policy, all interactive hover appearances (nav link underline reveals, button fill inversions, CTA color shifts) are inferred rather than extracted. Implementation should add these per platform conventions.
• Loading skeletons / pending states: No skeleton screens, spinners, or pending-state treatments were visible in the static screenshot. Therapeutic sites should consider calming loading animations (breathing circles, gentle pulses) rather than aggressive spinners.
• Form validation states: Beyond the cookie banner, no input fields or forms were captured. Error states, success toasts, and validation messaging require design decisions aligned with the warm, non-clinical tone.
• Authenticated-only flows: Client portals, scheduling interfaces, or secure document exchange surfaces were not visible. These may require a denser, more functional dialect of the design system.
• Sub-brand palettes: If the practice offers distinct services (EMDR intensive retreats vs. ongoing therapy vs. consultation for therapists), each may warrant subtle palette variations (different secondary accents) not detectable from the homepage alone.
• Pixel-exact surface colors: {colors.surface-cream} (#ede6e1) and {colors.surface-mist} (#dadfe7) were sampled from CSS declarations; subtle variations may occur in browser rendering due to gamma and color profile differences. Verify against design files.
• Dropdown/folder menu styling: Navigation items marked as "folder-title" suggest expandable menus, but their open state (dropdown panel styling, hover background, child link treatment) was not visible in the screenshot.
• Mobile navigation specifics: Hamburger icon design, slide-out drawer styling, mobile menu typography scale, and close button treatment are entirely inferred from responsive best practices, not extracted.
• Footer complete contents: The footer band was partially inferred; actual content columns, social link treatment, copyright formatting, and certification badges require reference to the full site scroll.