Mindbloom Design System

Overview

Mindbloom presents a deliberately inverted visual language that immediately distinguishes itself within the mental health and wellness space. Rather than the expected clinical white or calming blue palette, the platform adopts a warm golden-yellow canvas ({colors.canvas} — #ffdc61) as its foundational surface — a choice that reads simultaneously as optimistic, energetic, and unapologetically bold. Against this luminous ground, all primary content renders in near-black ink ({colors.ink} — #000000), creating a striking high-contrast environment where hierarchy emerges through scale, weight, and spatial rhythm rather than chromatic variation.

The brand voltage lives most visibly in the CTA system, where {button-primary} buttons carry the same signature yellow as the canvas, set against darker contexts or used as focal points within the yellow field. This creates a self-referential color logic where the brand's most identifiable hue functions simultaneously as environmental atmosphere and actionable signal. The typography system centers entirely on ABC Diatype, a geometric grotesque with humanist warmth that maintains legibility at display scales while feeling contemporary and approachable — never cold or institutional.

Shape language leans heavily into extreme roundness. Buttons default to {rounded.pill} (800px radius, effectively fully rounded capsules), while cards and containers use a more restrained {rounded.DEFAULT} (10px). A distinctive {rounded.lg} (128px) radius appears on stat callout cards, creating soft lozenge forms that feel organic against the photographic backgrounds. Shadows are equally intentional: rather than neutral gray drops, interactive elements emit a warm {shadows.glow} — a yellow-tinted halo that reinforces the brand's chromatic identity even in depth cues.

The system contains two clear dialects: a hero/editorial dialect using dark photographic backdrops with light text ({hero-band}, {stat-card}), and a content dialect using the yellow canvas with dark text ({card-feature}, {top-nav}). A third utility dialect handles overlays and modals ({popup-sidebar}, {cookie-banner}) on clean white or translucent grounds. Navigation occupies a particularly interesting position: the {top-nav} sits on the yellow canvas with dark links, while the primary conversion action ({button-primary} in nav context) re-injects the yellow as a contained pill.

Key Characteristics

• Inverted canvas: Primary page background is {colors.canvas} (#ffdc61) — warm yellow, not white or gray
• High-contrast ink: All readable text on canvas uses {colors.ink} (#000000) at 18px minimum
• Signature glow shadows: Interactive elements use {shadows.glow} (yellow-tinted) instead of neutral drops
• Pill-first buttons: Default button radius is {rounded.pill} (800px); only inputs use {rounded.DEFAULT} (10px)
• ABC Diatype monoculture: Single typeface across all scales; weights stay at 400–500 except rare 700 moments
• Dark hero bands: Hero photography underlays use {colors.surface-dark} (#000000) with {colors.body-on-dark} text
• Stat lozenges: Floating metrics use {rounded.lg} (128px) with semi-transparent dark backgrounds
• 18px body floor: Body copy never drops below 18px; this is an accessibility-forward large-type system
• 250ms transition standard: All state changes animate at {extensions.motion.duration} with ease-out timing
• Two-tone semantic: Black = primary/action; yellow = canvas/accent/energy; white = elevated/utility surfaces

Colors

Brand & Accent

• Primary ({colors.primary} — #000000): Pure black serving as the primary action color, text color, and structural anchor across the system. Used for all body copy, headlines, borders, and primary interactive states on light surfaces.
• Primary Active ({colors.primary-active} — #1a1a1a): Slightly lifted black for pressed/focused button states, providing subtle tactile feedback without breaking the monochrome brand commitment.
• Primary Hover ({colors.primary-hover} — #333333): Medium-gray hover state for links and secondary interactions, offering clear affordance change while maintaining the achromatic vocabulary.
• Accent / Signature Yellow ({colors.accent} — #ffdc61): The brand's chromatic soul — a warm golden-yellow that functions as canvas, CTA fill, highlight, and glow-shadow tint. This single hue carries nearly all the brand's visual energy.

Surface

• Canvas ({colors.canvas} — #ffdc61): The dominant page-level background color. Warm, optimistic, high-visibility yellow that defines the Mindbloom environmental experience. Not a neutral — it's a statement.
• Surface Soft / Dark ({colors.surface-soft} — #000000): Deep black used for hero photography underlays, modal overlays, and high-emphasis content blocks. Creates maximum contrast when paired with {colors.body-on-dark}.
• Surface Warm ({colors.surface-warm} — #f1efed): Off-white with slight warmth for elevated content cards, form backgrounds, and areas requiring visual rest from the yellow canvas.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white reserved for utility surfaces — input fields, cookie banners, sidebar panels, and any component needing maximum neutrality.
• Surface Overlay Black ({colors.surface-overlay-black} — rgba(0, 0, 0, 0.15)): Semi-transparent dark overlay for dimming underlying content behind modals, dropdowns, or stat callouts.
• Surface Overlay Light ({colors.surface-overlay-light} — rgba(255, 255, 255, 0.12)): Subtle white transparency for inner highlights or glass-like effects on dark surfaces.

Text & Ink

• Ink ({colors.ink} — #000000): The primary reading color on all light/yellow surfaces. Pure black ensures WCAG AAA contrast against the yellow canvas.
• Body ({colors.body} — #000000): Functionally identical to Ink in current usage; maintained as separate token for potential future differentiation in nested contexts.
• Body on Dark ({colors.body-on-dark} — #ffdc61): The inverse reading color — yellow text rendered on black/dark surfaces. Used for hero headlines, stats, and any text overlaid on photography or {colors.surface-soft} backgrounds.
• Muted ({colors.muted} — rgba(0, 0, 0, 0.5)): 50%-opacity black for secondary text, captions, placeholder text, and de-emphasized UI labels on light surfaces.
• Muted Dark ({colors.muted-dark} — rgba(0, 0, 0, 0.65)): Stronger opacity variant for text that must remain secondary but retain higher readability.
• On Primary ({colors.on-primary} — #ffffff): White text reserved for rendering atop {colors.primary} (black) buttons or surfaces — rare but necessary for inverted CTAs.
• On Canvas ({colors.on-canvas} — #000000): Explicit mapping confirming black text on yellow canvas — reinforces the inverted convention.
• On Surface Dark ({colors.on-surface-dark} — #ffdc61): Alias for {colors.body-on-dark}, used when referencing dark-surface text in component contexts.
• On Surface White ({colors.on-surface-white} — #000000): Black text on {colors.surface-elevated} — used for cookie banner copy, input placeholders, and sidebar content.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(0, 0, 0, 0.15)): Subtle 15%-opacity black for dividers, input borders in default state, and non-emphatic rules.
• Hairline Strong ({colors.hairline-strong} — #000000): Solid black borders for focused inputs, active states, or emphatic containment lines.
• Border Subtle ({colors.border-subtle} — #cccccc): Medium gray for disabled-state borders or very low-emphasis separators where even transparent black feels too heavy.

Semantic

• Error ({colors.error} — #c13515): Warm red for validation failures, error states, and destructive actions. Chosen to maintain warmth alongside the yellow palette rather than introducing cool blue-reds.
• Success ({colors.success} — #006400): Deep green for confirmation states, successful submissions, and positive indicators.
• Link ({colors.link} — #000000): Links render as pure black, differentiated from body text solely by underline or interaction feedback — no separate link color in the default state.
• Link Active ({colors.link-active} — #333333): Darkened state for visited or actively-pressed links.

Signature / Brand-Specific

• Signature Glow ({colors.signature-glow} — #ffdc61): The unique shadow-tint color — identical to the accent yellow. When elements elevate, they glow with the brand color rather than casting neutral gray shadows.

Typography

Font Family

Mindbloom's typographic voice is unified under ABC Diatype, a contemporary geometric sans-serif with subtle humanist influences that prevent it from feeling mechanical. The font family ships in four cuts: Regular (400), Medium (500), Bold (700), and Regular Italic (400 italic). In practice, the visible system relies almost exclusively on Regular and Medium weights, reserving Bold for rare emphasis moments. The fallback stack is "ABC Diatype", sans-serif, ensuring graceful degradation to system fonts if the WOFF2 files fail to load.

Two supplementary typefaces exist in the loaded font inventory but appear sparingly: Ivar Text (a serif face likely used for testimonial or editorial-asides content not visible in the hero viewport) and Telegraf (a condensed geometric possibly used in data-dense tables or labeling systems). Neither appears in the above-fold composition, so their roles remain inferred rather than documented.

The choice of ABC Diatype is strategic: its relatively large x-height and open apertures support the 18px minimum body size requirement, maintaining readability even when users view the site on mobile devices where the yellow canvas creates intense ambient brightness.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 400 | 1.1 | -0.01em | Section openers, campaign headlines (inferred) | | {typography.display-lg} | 48px | 400 | 1.1 | normal | Hero headline ("Psychedelic medicine is here") | | {typography.title-lg} | 24px | 500 | 1.2 | normal | Section headings on dark surfaces | | {typography.title-regular} | 24px | 400 | 1.4 | normal | Secondary headlines, card titles | | {typography.title-md} | 18px | 500 | 1.2 | normal | Navigation links, stat labels, UI headings | | {typography.body-md} | 18px | 400 | 1.4 | normal | Hero subhead, body paragraphs, primary reading | | {typography.body-sm} | 16px | 400 | 1.5 | normal | Secondary body, descriptions (inferred) | | {typography.caption} | 14px | 400 | 1.4 | normal | Legal lines, timestamps, metadata | | {typography.button} | 18px | 500 | 1.25 | normal | Button labels, CTA text | | {typography.stat-number} | 28px | 400 | 1.2 | normal | Large numerics in stat cards | | {typography.label-sm} | 13px | 500 | 1.3 | 0.02em | Tags, category labels, tiny UI |

Principles

The typography system operates on a philosophy of size-over-weight hierarchy. Notice that the display headline ({typography.display-lg} at 48px) and body copy ({typography.body-md} at 18px) share the exact same weight (400). The system achieves visual distinction through dramatic size deltas (nearly 3× between headline and body) and contextual color inversion (headline is {colors.body-on-dark} on photo backgrounds, body is {colors.ink} on yellow canvas). Weight bumps to 500 serve as micro-hierarchy signals within a given size tier — distinguishing a {typography.title-md} navigation link from surrounding whitespace, or a {typography.button} label from its container.

Letter spacing remains at normal across virtually all tokens, with only {typography.display-xl} receiving a barely-perceptible -0.01em tightening at large sizes, and {typography.label-sm} getting a slight +0.02em expansion for the smallest tracked labels. This restraint keeps the type feeling intimate and contemporary — no 1970s wide-track headlines here.

Line heights are consistently generous (1.1–1.5 range), reflecting the wellness/therapeutic context where reading comfort matters more than information density. The 18px body size is notably larger than industry standard (typically 16px), positioning Mindbloom as an accessibility-conscious product that respects users who may have visual processing sensitivities.

Note on Font Substitutes

ABC Diatype is a commercial typeface from Dalton Maag and is not available via Google Fonts. For prototyping or open-source implementations, the closest Google Fonts equivalent is DM Sans (which shares similar geometric construction, slightly humanist terminals, and matching weight distribution). Define CSS variables as:

:root {
  --font-body: "DM Sans", "ABC Diatype", -apple-system, BlinkMacSystemFont, sans-serif;
}

For the serif face (Ivar Text), substitute Lora or Crimson Pro from Google Fonts. For Telegraf, substitute Barlow Condensed or Manrope.

Layout

Spacing System

• Base unit: 4px (implied from the {spacing.xxs} value), with practical working units clustering at 8px, 12px, 16px, 20px, 24px, 32px, 40px, and 48px.
• Tokens: {spacing.xxs} (4px — micro-adjustments), {spacing.xs} (6px — tight internal gaps), {spacing.sm} (8px — icon-text gaps), {spacing.md} (12px — compact padding), {spacing.lg} (16px — standard padding), {spacing.xl} (20px — comfortable padding, dominant spacing value per frequency analysis), {spacing.xxl} (24px — loose padding), {spacing.section-sm} (32px — small vertical rhythm), {spacing.section} (40px — major section spacing), {spacing.section-lg} (48px — generous section breaks), {spacing.section-xl} (60px — hero vertical padding).
• Section padding (vertical): {spacing.section-xl} (60px) — applied to the hero band and major content sections.
• Card internal padding: {spacing.section} (40px) for feature cards; {spacing.lg} (16px) to {spacing.xl} (20px) for compact UI cards like stat callouts.
• Gutters: Content constrains to approximately 1440px max-width with horizontal padding of {spacing.nav-padding} (33px) at desktop — an unusually specific value suggesting precise alignment with the logo mark or grid math.

Grid & Container

Max content width is 1440px, established by the <main> and <section> element widths. This is a wide-format layout optimized for immersive hero photography and editorial storytelling rather than dense dashboard interfaces. The grid behavior suggests a flexible column system where:

• The hero section uses a roughly 45/55 or 50/50 split between text column (left-aligned, ~40% width) and image column (right, ~60% width) on desktop
• Navigation spans full-width with logo flush-left, menu items centered-ish, and CTA flush-right
• Stat cards float as absolutely-positioned or flex-end elements within the hero band, breaking out of the main text flow
• No explicit 12-column or 6-column grid detected — the layout relies more on flexbox spatial distribution than rigid column arithmetic

Whitespace Philosophy

This is an airy, editorial-whitespace system. Despite the visually loud yellow canvas, the actual content density is low — the hero shows one headline, one paragraph, one CTA button pair, and one stat card. Generous line heights (1.4+ on body), 40–60px section paddings, and 20px+ internal component spacing create breathing room that counterbalances the canvas intensity. The design trusts whitespace to provide structure rather than rules or boxes.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Mindbloom Logo]     Program  Science  Reviews  Pricing  Learn   │  ← 80px height
│                                          [Login]  [Get started] │  ← yellow pill
│                                                                 │
├─────────────────────────────────────────────────────────────────┤  ← full-bleed below
│                                                                 │
│  HERO BAND (dark photo bg, 60px vert padding)                    │
│  ┌──────────────┐                                    ┌────────┐ │
│  │ HEADLINE     │                                    │        │ │
│  │ 48px yellow  │         PHOTOGRAPHY                │ STAT   │ │
│  │              │                                  → │ CARD   │ │
│  │ SUBHEAD      │                                    └────────┘ │
│  │ 18px yellow  │                                               │
│  │              │                                   ┌────────┐ │
│  │ [CTA PILL]───│                                   │ [CTA]  │ │
│  └──────────────┘                                   └────────┘ │
└─────────────────────────────────────────────────────────────────┘

Hero Section

The hero employs a full-bleed photograph (ketamine therapy still life — pills, sleep mask, water glass on wooden surface) with a dark overlay gradient ensuring text readability. Text content stacks vertically on the left third: headline first ({typography.display-lg}), then descriptive paragraph ({typography.body-md}), then primary CTA ({cta-button-hero} — yellow pill). A floating {stat-card} anchors to the bottom-right quadrant, showing "863,085 sessions facilitated" in large numerics with a label. The stat card uses {rounded.lg} (128px) radius and {colors.surface-overlay-black} background, creating a soft lozenge that doesn't compete with the rectangular photo frame.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, direct surface contact | Top nav, hero band base, static text blocks | | 1 – Hairline outline | 2px solid {colors.hairline-strong} (black) | Input fields in focus state | | 2 – Soft drop | {shadows.sm} — rgba(0,0,0,0.12) 0 2px 8px | Cookie banner, subtle elevation | | 3 – Glow elevation | {shadows.glow} — rgb(255,220,97) 0 0 8px 2px | Interactive buttons, hovered/focused CTAs | | 4 – Modal depth | {shadows.md} — rgba(0,0,0,0.2) 0 0 10px -2px | Pop-up sidebars, dropdown panels |

The elevation philosophy is layered-with-personality. Unlike neutral design systems that use grayscale shadows exclusively, Mindbloom injects brand color into its depth cues. The {shadows.glow} treatment — a soft yellow halo — appears on primary interactive elements, making buttons feel literally radiant when elevated. This is a deliberate brand moment: even in the z-axis dimension, the yellow asserts itself.

For non-interactive elevation (banners, modals, cards), shadows return to neutral grays/black-transparencies, preventing visual noise. The system reserves colored depth for moments of user agency (buttons, toggles, focus rings).

Decorative Depth

The hero photograph provides significant atmospheric depth through real-world imagery — wood grain texture, glass refraction, fabric softness, metallic ruler edge. This isn't abstract gradient decoration but documentary-style photography that grounds the psychedelic-medicine concept in tangible physical reality. The darkening overlay (likely a linear-gradient from transparent to {colors.surface-overlay-black}) creates a vignette effect that focuses attention toward the center-left where text content lives.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Close icon containers, minimal rounding | | {rounded.DEFAULT} | 10px | Input fields, feature cards, standard containers | | {rounded.md} | 10px | Identical to DEFAULT; alias for clarity | | {rounded.lg} | 128px | Stat callout cards, soft lozenge badges | | {rounded.xl} | 128px | Duplicate of LG; reserved for future larger lozenges | | {rounded.pill} | 800px | All primary/secondary buttons, tags, fully-rounded elements | | {rounded.full} | 8000px | Avatar circles, perfectly-round decorative elements |

The shape vocabulary is intentionally bipolar: either gently rounded rectangles (10px) or extremely rounded pills (800px+). The middle-ground radii (16px, 24px common in other systems) are absent here. This binary choice creates visual consistency — users quickly learn that "round = button/action" and "slightly-round = container/content." The {rounded.lg} (128px) outlier exists specifically for stat cards, giving them an organic, badge-like quality that differentiates them from standard content cards.

Photography Geometry

Hero photography is full-bleed, uncropped at desktop scale — spanning edge-to-edge beneath the header with no corner rounding (effectively 0px radius or clipped by the viewport). The image aspect ratio appears to be approximately 16:9 or wider, optimized for cinematic landscape orientation. No border, no inset shadow, no frame — the photo is the background. On smaller viewports (inferred), this will likely crop to a central focal point or shift to a stacked composition where the photo sits above/below the text block.

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

{component.top-nav} — The global navigation bar occupying the top 80px of every page. Background {colors.canvas} (yellow), containing the Mindbloom wordmark on the left, navigation links ({component.nav-link}) centered, and utilities (Login link + Get Started CTA) on the right. Height fixed at 80px with horizontal padding of {spacing.nav-padding} (33px). Uses {typography.button} sizing for its interactive children.

{component.nav-link} — Individual navigation items (Program, Science, Reviews, Pricing, Learn). Transparent background, {colors.ink} text at {typography.title-md} (18px/500). Padding of 12px horizontal with asymmetric 8px bottom padding creating a subtle baseline offset. No visible border or shadow in default state; underline or color change likely on hover (undocumented).

{component.button-primary} — The signature conversion button. Background {colors.accent} (yellow), {colors.ink} (black) text at {typography.button} weight. Fully rounded via {rounded.pill} (800px). Compact padding of 9px 18px 7px (asymmetric top/bottom suggests optical correction for the font's metrics). Appears in the nav as "Get started" and in the hero as the primary CTA. Carries {shadows.glow} on elevation/focus.

{component.button-primary-active} — Pressed or focused state of the primary button. Maintains yellow background but text shifts to {colors.on-primary} (white) per pre-assigned convention — this creates an inversion effect where the button "fills" with darkness when activated. Same pill radius.

{component.button-primary-hover} — Hover-intermediary state. Background remains {colors.accent}, text transitions to {colors.primary-hover} (dark gray #333333), providing subtle feedback short of full activation. Timing follows {extensions.motion.duration} (250ms ease-out).

{component.button-secondary} — Ghost/outline button variant for secondary actions. Transparent background, {colors.body-on-dark} (yellow) text — designed for placement on dark surfaces (hero bands, photo overlays). Pill-shaped ({rounded.pill}), matching padding to primary. Used for "Am I a candidate?" style qualifying CTAs.

{component.button-secondary-active} — Active state of ghost button. Text shifts to {colors.on-primary} (white), background may gain subtle fill. Maintains pill geometry.

{component.cta-button-hero} — Hero-specific CTA with amplified presence. Larger padding (14px 28px) than the nav version of {component.button-primary}, making it the dominant clickable element in the fold. Same yellow background, black text, pill shape. Positioned below the hero subhead paragraph.

Cards & Containers

{component.stat-card} — Floating metric display in the hero's lower-right area. Background {colors.surface-overlay-black} (15% black opacity), {colors.body-on-dark} (yellow) text. Uses {rounded.lg} (128px) radius creating the signature lozenge shape. Contains a large {typography.stat-number} (28px) numeric value paired with a {typography.title-md} label describing the metric ("Ketamine therapy sessions facilitated"). Internal padding of {spacing.lg} (16px) horizontal, {spacing.xl} (20px) vertical. No visible border; relies on opacity contrast against the photo backdrop.

{component.card-feature} — Standard content card for features, benefits, or editorial sections below the hero. Background {colors.canvas} (yellow), {colors.ink} text at {typography.body-md}. Rounded corners at {rounded.DEFAULT} (10px). Generous internal padding of {spacing.section} (40px) supporting multi-line content. Likely contains heading + body + optional illustration or icon.

{component.cookie-banner} — Bottom-fixed or inline cookie consent notification. Background {colors.surface-elevated} (white), {colors.ink} text at {typography.body-sm} (16px). Zero border radius (sharp rectangle) to distinguish it from branded content. Padding of {spacing.md} (12px) vertical, {spacing.lg} (16px) horizontal. Contains legal copy, Privacy Policy link ({component.cookie-link}), and dismiss control ({component.cookie-close}).

{component.popup-sidebar} — Slide-in panel for program details or mega-navigation. Background {colors.surface-elevated} (white), {colors.ink} body text. Full-height, anchored to right viewport edge, width approximately 380–450px (inferred from nav width data). Padding of {spacing.xl} (24px) providing room for structured content lists. Dismissed via close button or overlay click.

{component.popup-overlay} — Scrim behind {component.popup-sidebar}. Background {colors.surface-overlay-black} (15% opacity black), covering full viewport. Closes sidebar on click. No text content, no rounded corners.

Inputs & Forms

{component.text-input} — Email/name input field for lead capture forms. Background {colors.surface-elevated} (white), {colors.ink} text at {typography.body-md} (18px — notably large for an input). Border of 2px solid {colors.hairline} (transparent black 15%) in default state, transitioning to {colors.hairline-strong} (solid black) on focus ({component.text-input-focus}). Rounded at {rounded.DEFAULT} (10px). Generous internal padding of 18px all-around — this is an accessible, thumb-friendly input height (approximately 54–58px total).

{component.text-input-focus} — Focused state of text input. Border thickens/opacity increases to solid black. May acquire subtle shadow elevation. Background and typography unchanged. Transition duration matches the 250ms system standard.

Navigation & Structural

{component.hero-band} — Full-width hero section container. Background {colors.surface-dark} (pure black or darkened photo). Contains the overlapping photograph, text column, and stat card. Vertical padding of {spacing.section-xl} (60px). Text content uses {colors.body-on-dark} (yellow). Typography defaults to {typography.display-lg} for headline.

{component.hero-headline} — The H1 element: "Psychedelic medicine is here". Transparent background, {colors.body-on-dark} (yellow) text at {typography.display-lg} (48px/400). No border, no shadow — pure type-on-photo impact.

{component.hero-subhead} — Descriptive paragraph beneath headline: "Experience fast, life-changing relief..." Transparent background, {colors.body-on-dark} (yellow) text at {typography.body-md} (18px/400). Line height 1.4 (~25px computed). Max-width likely constrained to ~550px for optimal reading measure.

{component.stat-label} — Small label text inside {component.stat-card}. Transparent background, {colors.body-on-dark} (yellow) at {typography.title-md} (18px/500). Sits beside or below the large numeric value.

{component.cookie-link} — Inline link within cookie banner (e.g., "Privacy Policy", "here"). Transparent background, {colors.link} (black) text at {typography.body-sm}. Underlined or otherwise differentiated from surrounding legal copy.

{component.cookie-close} — X-dismiss button on cookie banner. Transparent background, {colors.ink} (black) icon/text. Fixed size of 24px (square hit target). Likely an SVG X icon or typographic × character.

Do's and Don'ts

Do

• Do use {colors.canvas} (#ffdc61) as your primary page background. The yellow is the defining characteristic of the Mindbloom experience — never substitute white or off-white for it in the hero or landing page context.
• Do maintain 18px as the minimum body copy size. The {typography.body-md} token reflects an accessibility-first choice; dropping to 16px or 14px for body text undermines the brand's welcoming, readable voice.
• Do apply {rounded.pill} (800px) to all primary and secondary buttons. The fully-rounded capsule shape is a core identifier; avoid squaring off CTAs or using intermediate radii like 16px or 24px.
• Do use {shadows.glow} (yellow-tinted) for interactive element elevation. When buttons lift or receive focus, they should glow with the brand color, not cast gray shadows.
• Do keep headline weights at 400 (regular). Both {typography.display-lg} and {typography.body-md} share weight 400; hierarchy comes from size (48px vs 18px), not bolding. Reserve 500 for navigation and UI labels only.
• Do place dark text ({colors.ink}) directly on the yellow canvas. The contrast ratio exceeds WCAG AAA requirements; do not fear the intensity.
• Do use {rounded.lg} (128px) for stat cards and badge-like callouts. The lozenge shape differentiates quantitative data from prose content.
• Do apply {colors.body-on-dark} (yellow) for all text on photographic or black backgrounds. Maintain the inverted convention consistently throughout hero and dark-band sections.
• Do allow 250ms ease-out timing for all state transitions. The {extensions.motion.duration} and easing values create a cohesive, unhurried interaction feel appropriate for a therapeutic brand.
• Do reserve {colors.surface-elevated} (#ffffff) for utility surfaces only. White backgrounds should appear in inputs, modals, and cookie banners — never as a primary content canvas.
• Do use ABC Diatype (or DM Sans substitute) exclusively for UI text. Avoid mixing in serif faces unless specifically implementing the testimonial/inferred editorial subsystem.
• Do give inputs 18px internal padding and 54px+ total height. The {component.text-input} dimensions ensure mobile touch targets meet accessibility guidelines.

Don't

• Don't replace the yellow canvas with white "for cleanliness." The yellow is intentional and clinically associated with optimism in the wellness space; neutralizing it erases brand recognition.
• Don't bold the hero headline. At 48px/400 weight ({typography.display-lg}), the headline has authority through scale alone; adding bold (700) would make it aggressive and clinical.
• Don't introduce blue or cool-toned accent colors. The entire palette is warm (yellows, blacks, warm off-whites); blues would clash with the therapeutic-optimism positioning.
• Don't use sharp-cornered (0px radius) buttons. Even ghost/secondary buttons should use {rounded.pill}; square buttons read as 2010-era enterprise software.
• Don't add gradient overlays to the hero photo beyond the subtle dark vignette. The photography should feel documentary, not digitally composited with rainbow washes.
• Don't let stat cards use {rounded.DEFAULT} (10px). Their distinct {rounded.lg} (128px) radius signals "this is data, not prose" — squaring them loses that semantic signal.
• Don't reduce line heights below 1.4 for body copy. The generous leading ({typography.body-md} at 1.4) supports the wellness/accessibility mission; tighter lines feel anxious.
• Don't mix Helvetica Neue or system fonts into the primary UI stack. These appear only in edge-case fallback scenarios; the ABC Diatype monoculture is a brand asset.
• Don't create new color tokens for "slightly lighter yellow" or "warm gray." The existing palette of 30+ tokens covers all observed surfaces; invention risks fragmenting the system.
• Don't apply shadows to the top navigation bar. The {component.top-nav} sits flat on the canvas with no elevation; adding a drop shadow would break the clean header-to-content transition.
• Don't forget the inverted text convention on dark surfaces. Always check: am I on yellow? Use {colors.ink}. Am I on black/photo? Use {colors.body-on-dark}.

Motion & Animation

Transition Tokens

--transition-all: all 250ms ease-out;
--transition-bg-transform: background-color 250ms ease-out, transform 250ms ease-out;
--transition-filter: filter 250ms ease-out;
--transition-color: color 250ms ease-out;
--transition-color-opacity: color 250ms ease-out, opacity 250ms ease-out;
--transition-box-shadow: box-shadow 250ms ease-out;
--transition-border: border-color 250ms ease-out;
--transition-color-bg: color 250ms ease-out, background-color 250ms ease-out;

All transitions share the 250ms duration with ease-out easing. This creates a snappy-yet-organic feel — fast enough to feel responsive, slow enough to perceive the state change. No spring physics, no cubic-bezier custom curves beyond the standard ease-out.

Keyframe Animations

• spin — Continuous 360° rotation, likely used for loading indicators or decorative spinner icons.
• slideInOut — Horizontal translation for sidebar/modal entrance/exit (e.g., {component.popup-sidebar} sliding in from right edge).
• rotation — Variable-angle rotation, possibly for decorative flourishes or icon state changes (e.g., chevron rotating 180° on accordion expand).

Interaction Patterns

• Button press/feedback: Background color shift from {colors.accent} toward activated state over 250ms; simultaneous glow shadow intensification.
• Sidebar reveal: {component.popup-sidebar} slides in from right viewport edge with slideInOut keyframe; {component.popup-overlay} fades in concurrently (opacity 0→1 over 250ms).
• Focus ring expansion: Input borders transition from {colors.hairline} (15% opacity) to {colors.hairline-strong} (100%) with possible subtle shadow lift.
• Scroll-triggered reveals: GSAP library detected in source (gsap.registerPlugin(ScrollTrigger)), indicating that content below the fold likely animates on scroll (fade-up, parallax, or staggered entry).
• Cookie banner slide: Banner animates up from bottom of viewport or fades in on page load.
• Nav link hover: Color shift from {colors.ink} to {colors.primary-hover} with possible underline reveal.
• Stat counter animation: Numeric values in {component.stat-card} may count up from 0 to final value on scroll-into-view (common pattern for "863,085" style metrics).

No explicit motion tokens were detected for hover-lift (Y-axis translate), scale transforms, or complex orchestration sequences — the motion vocabulary is restrained to color, opacity, position, and simple rotation.

Imagery Style

• Photography style: Documentary/lifestyle still-life with warm color grading. The hero shot depicts a ketamine treatment setup (pill blister pack, sleep mask, water glass) arranged on a wooden surface with natural window light. Feels intimate, tactile, and real — not stock-photo polished.
• Subject matter: Physical objects related to the therapy journey — medication, comfort items, hydration, home-environment cues. Human subjects are absent from the hero, keeping focus on the tools of transformation rather than specific patient representations.
• Color treatment: Photography carries strong warm tones (amber wood, golden light) that harmonize with the {colors.canvas} yellow without matching it exactly. Dark areas (black sleep mask, deep shadows) connect to the {colors.surface-dark} system.
• Composition rule: Objects arranged loosely with negative space allowing text overlay. Shallow depth-of-field suggested by the soft background blur (bokeh) on distant surfaces.
• Role of imagery: Dominant in the hero (occupies ~60% of viewport), likely supportive or absent in lower sections where content takes precedence. The image is the emotional hook; text explains the science.
• Lighting direction: Natural side-lighting (window-right implied) creating long shadows and dimensional modeling on objects. This lighting choice feels hopeful (sunlight) rather than clinical (studio flat-light).
• Texture emphasis: Visible wood grain, fabric weave, glass reflection, metal edge — the image celebrates materiality and physical touch, grounding the digital experience in bodily reality.
• Future imagery inference: Based on the wellness/therapy context, expect subsequent sections to include: provider portraits (warm, approachable lighting), before/after mood imagery (abstract/emotional), home environment lifestyle shots, and possibly microscopic/abstract neural-pathway illustrations in the Science section.

Icon System

• Library: Custom SVG icons. No Lucide, Heroicons, Material Icons, or Font Awesome class names detected in the extracted classes. The site uses Webflow's built-in icon system plus custom SVG embeds.
• Specific icons observed:
  • Mindbloom wordmark logo (text-based mark with dotted-circle graphic element upper-right of "m")
  • Close/X icon in cookie banner (likely SVG path or HTML entity ×)
  • Chevron or arrow indicators (inferred on nav links with dropdowns, not explicitly visible in hero)
  • Possible spinner/loading icon (supported by spin keyframe detection)
• Treatment: Icons render in currentColor, inheriting from parent text color (black on yellow, yellow on dark). Stroke-based appearance suggested by the minimalist logo construction. Sizes appear to be 16–24px for UI icons, 24–32px for decorative/logo marks.
• Alignment: Icons sit inline with text (nav links, button labels) or standalone (close button, logo). No outlined/icon-button circles detected in the hero viewport — icons are either part of text-flow or functional standalone controls.

Recommended Frontend Stack

- Framework:      Next.js (React) with App Router — matches Webflow-export patterns
                 and SSR needs for a healthcare-marketing site with SEO requirements
- Styling:        Tailwind CSS v3+ with custom theme extension for Mindbloom tokens;
                 or CSS Modules for closer fidelity to the extracted cascade
- Fonts:          Self-host ABC Diatype WOFF2 files from CDN (urls extracted from
                 @font-face declarations); fallback to DM Sans via Google Fonts
- Animation:      Framer Motion (React) or GSAP (already present in source code)
                  for scroll-triggered reveals and sidebar transitions
- Icons:          Custom SVG components (React-based) matching the detected
                  stroke-style,currentColor approach; no external icon library needed
- Component lib:  Radix UI Primitives for accessible modal/sidebar/popup patterns
                  (matches the popup_sidebar structure detected)
- Deployment:     Vercel (native Next.js hosting) or Cloudflare Pages for Edge

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column stack; hero text above photo; nav collapses to hamburger; stat card moves below CTA | | Tablet | 768px – 991px | Two-column hero begins; nav may show abbreviated menu; padding compresses to 20px | | Desktop | 992px – 1439px | Full nav visible; hero 50/50 text-photo split; stat card floats right | | Wide | ≥ 1440px | Max-container engages (1440px); extra horizontal padding; photography may scale beyond container |

Note: The 992px breakpoint is explicitly referenced in extracted media queries (@media screen and (min-width: 992px) affecting nav styling).

Touch Targets

• {component.button-primary}: Effective tap target ~44px height (9px + 18px font + 7px padding ≈ 44px) × variable width — meets WCAG AAA minimum.
• {component.button-secondary}: Same dimensions as primary — passes accessibility thresholds.
• {component.text-input}: Total height ~54–58px (18px font + 18px padding × 2 + 2px border × 2) — comfortably exceeds 44px minimum.
• {component.nav-link}: Tap area extends via 12px vertical padding — adequate for finger activation.
• {component.cookie-close}: 24px × 24px square — technically below 44px recommendation but acceptable for dismiss controls per WCAG exception for inline controls.

Collapsing Strategy

• Navigation: At < 992px, the horizontal nav links (Program, Science, Reviews, etc.) collapse into a hamburger menu or slide-down panel. The {component.button-primary} ("Get started") likely persists as a always-visible CTA in the collapsed header. Logo remains fixed left.
• Hero columns: The side-by-side text/photo layout stacks vertically on mobile. Headline, subhead, and CTA occupy the upper portion (above fold), followed by the hero photograph as a full-bleed image block. Stat card relocates to below the photo or becomes an inline metric.
• Stat card: The floating {component.stat-card} with {rounded.lg} cannot overlap the text column on narrow screens. It either moves to a post-hero position (stacked below CTA) or converts to an inline "863,085 sessions" text line within the subhead.
• Typography scaling: {typography.display-lg} (48px) likely reduces to 36px or 32px on mobile via fluid typography or breakpoint-specific overrides. {typography.body-md} (18px) may hold steady or drop to 16px on very narrow screens (< 375px).
• Spacing compression: Section padding reduces from {spacing.section-xl} (60px) to {spacing.section} (40px) or {spacing.section-sm} (32px) on mobile, preserving some breathing room while respecting limited viewport height.
• Cookie banner: Remains fixed-bottom on mobile but may increase in height to accommodate wrapped legal copy. Close button stays accessible in bottom-right corner.

Image Behavior

• Hero photograph: On desktop, spans full-viewport width with the text column overlaid (absolute positioning or grid layering). On mobile, switches to <img> or <picture> element in document flow, likely with width: 100%; height: auto and an aspect-ratio constraint (16:9 or 4:3). The focal point (pill blister pack) should remain visible in the crop.
• Logo: SVG-based wordmark, likely scales down slightly on mobile (max-width constraint) but maintains proportions. The dotted-circle graphic element remains attached to the "m".
• No avatar/user images detected: The hero viewport contains no user photos, so responsive avatar behavior (circle crops, cover-fit) is not yet applicable but should be planned for testimonial/provider sections below the fold.

Iteration Guide

1. Initialize with the yellow canvas. Start every page implementation by setting background-color: {colors.canvas} (#ffdc61) on the <body>. Build upward from this non-negotiable foundation. Do not begin with white and "add yellow later."
2. Import all tokens from YAML, never hard-code. Every color reference must resolve to a {colors.x} token, every font size to a {typography.y} role, every spacing value to a {spacing.z} constant. Hard-coded hex codes or pixel values outside the token system will fail lint checks and create drift.
3. Implement the inverted text convention early. Create two CSS utility classes or Tailwind arbitrary variants immediately: .text-on-canvas { color: #000000 } and .text-on-dark { color: #ffdc61 }. Apply these based on parent background, never on individual elements in isolation.
4. Build the pill-button primitive once, reuse everywhere. The {component.button-primary} spec (yellow bg, black text, 800px radius, 18px/500 type, 9px 18px 7px padding) should be a single React/Button/Pascal component. Derive {component.button-secondary} (ghost variant) and state variants (-active, -hover, -disabled) from this base via props.
5. Respect the two-dialect structure. Before adding any new section, determine whether it belongs to the editorial dialect (yellow canvas, black text, {card-feature} containers) or the hero dialect (photo/dark bg, yellow text, {stat-card} overlays). Mixing dialects mid-section confuses the visual hierarchy.
6. Wire up GSAP ScrollTrigger for below-fold content. The production site already includes GSAP; plan for fade-up, stagger, or parallax animations on sections not visible in the initial screenshot. Use the 250ms/{extensions.motion.easing} values defined in the extensions block.
7. Self-host the ABC Diatype font files. Use the exact WOFF2 URLs extracted from the @font-face declarations. Define --font-body: "ABC Diatype", sans-serif as a CSS custom property and apply it to the font-family of html or body. Fall back to DM Sans (Google Fonts) for environments where the CDN is unreachable.
8. Implement the stat card as a positioned overlay. The {component.stat-card} (128px radius, 15% black bg, yellow text) must use absolute or sticky positioning relative to the hero band. Test that it doesn't overlap the primary CTA on tablet widths (768px–991px) where space compresses.
9. Run the linter after each iteration. Execute npx @google/design.md lint DESIGN.md frequently. Watch specifically for broken-ref (token paths that don't resolve), orphaned-token (tokens defined but never referenced in components or body prose), and contrast-ratio warnings (the yellow/black pairing should pass easily, but verify).
10. When in doubt, choose airiness over density. The Mindbloom aesthetic trusts generous whitespace (60px section padding, 1.4+ line heights) to convey calm authority. If a layout feels cramped, increase {spacing.xl} (20px) or {spacing.section} (40px) before adding visual embellishment.

Font Setup

Add the following CSS to your global stylesheet or Tailwind config's @layer base:

@font-face {
  font-family: "ABC Diatype";
  src: url("https://cdn.prod.website-files.com/63a1c97b43b15d4c89e1c2c4/63a1c97b43b15de4ece1c2f6_ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Diatype";
  src: url("https://cdn.prod.website-files.com/63a1c97b43b15d4c89e1c2c4/63a1c97b43b15da03de1c2f5_ABCDiatype-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Define CSS variables for the design tokens */
:root {
  --font-body: "ABC Diatype", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --color-canvas: #ffdc61;
  --color-ink: #000000;
  --color-accent: #ffdc61;
  --radius-pill: 800px;
  --shadow-glow: rgb(255, 220, 97) 0px 0px 8px 2px;
  --motion-duration: 250ms;
}

If ABC Diatype is unavailable (licensing restrictions), substitute DM Sans via Google Fonts: <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Known Gaps

• Hover state specifics: Per the no-hover policy, exact hover styles for {component.nav-link}, {component.button-primary}, and {component.cookie-link} are undocumented. Implementers should derive these from the Active/Focus states and the 250ms transition tokens.
• Loading/skeleton states: No loading spinners, skeleton screens, or pending-content treatments were visible in the hero viewport. Recommend designing a pulse animation using the spin keyframe and {colors.muted} for skeleton fills.
• Form validation states: Beyond {component.text-input-focus}, error/success/validation states for email inputs are not documented. Plan for red border ({colors.error}) and helper text below the input.
• Below-fold section designs: The screenshot captures only the hero band and top navigation. Feature grids, pricing tables, testimonials, science explanations, and footer architecture are inferred from the section HTML structure but lack visual documentation.
• Mobile hamburger menu: The collapsed navigation pattern (< 992px) is referenced in media queries but the actual slide-down panel design, icon animation, and link stacking order are unknown.
• Provider/testimonial imagery: If the site includes doctor photos, patient stories, or video content (common in telehealth marketing), their treatment (circular crop? rounded rect? play button overlays?) is undetermined.
• Dark mode: The {extensions.mode} is "light", and the design's heavy reliance on a specific yellow canvas makes a traditional "dark mode" inversion non-trivial. A potential "reduced-brightness" or "high-contrast" accessibility mode may exist but wasn't detectable.
• Pixel-exact stat card positioning: The {component.stat-card} coordinates (bottom-right of hero, overlapping photo edge) are estimated from the screenshot composition. Exact bottom/right offsets or transform translations require viewport testing.
• GSAP ScrollTrigger configurations: While GSAP and ScrollTrigger are present in the source, the specific trigger points, animation parameters (fade distance, stagger delay, scrub values), and which elements they affect are not extractable from static CSS.
• Accessibility announcements: Screen reader behavior for the stat counter (does it announce "863,085" or animate silently?), the cookie banner dismissal, and the sidebar open/close states should be implemented following WAI-ARIA Authoring Practices but aren't documented in the extracted markup.