Juno Companion Design System

Overview

Juno Companion presents itself as a deeply human digital health assistant — a brand that lives in the intersection of clinical rigor and emotional warmth. The visual system anchors itself in atmospheric, full-bleed photography (golden-hour portraiture, natural environments) overlaid with heroic-scale serif typography. The dominant impression is one of quiet confidence: this is not a flashy startup landing page but a thoughtful, research-backed tool for people navigating chronic illness.

The color philosophy is deliberately restrained. The palette orbits around {colors.ink} (#020817) — a near-black with subtle cool undertones — paired with {colors.on-dark} (#ffffff) for high-contrast readability against photographic backgrounds. Brand voltage appears sparingly: a coral accent ({colors.accent-coral}, #f9591f) and forest green ({colors.accent-forest}, #1e3e30) emerge only in specific feature cards or semantic contexts, never competing with the photography. Surface tones lean warm — {colors.surface-warm} (#f7f6f2) and {colors.surface-soft} (#f2f5f8) — creating a gentle, paper-like reading environment below the fold.

The single typographic move that defines this system is the contrast between Playfair Display at 216px (the "Juno" wordmark, rendered at magazine-cover scale) and Inter at light weights (300) for sectional headings. Body copy in the hero sits at an unusually large 44.64px with 600 weight — bold enough to read over imagery but never aggressive. This creates a dual-register voice: the serif speaks to heritage, trust, and care; the sans-serif delivers information cleanly.

Shape language favors {rounded.pill} (9999px) for interactive elements (the Download button) while using {rounded.lg} (20px) and {rounded.xl} (24px) for content containers — soft but not playful, mature without being austere. A subtle handwritten font ({typography.handwriting}) appears for personal notes or patient-voice quotes, introducing an intimate counterpoint to the system's otherwise polished surfaces.

Sub-systems include: a hero dialect (photographic backgrounds, white type, pill CTAs), an editorial content dialect (warm off-white surfaces, dark ink, serif pull quotes), and what appears to be a feature-card dialect (dark forest-green cards with white type for capability showcases). Animations are pervasive and expressive — cursor movements, floating elements, pulsing indicators — suggesting a living, responsive interface rather than static marketing.

Key Characteristics

• Heroic serif display type at {typography.display-xl} (216px Playfair Display) set in {colors.on-dark} over full-bleed atmospheric photography
• Near-black ink ({colors.ink}, #020817) as the primary brand color and text anchor across all non-hero sections
• Pill-shaped primary CTA ({component.button-primary}) with {colors.canvas} background, floating over photographic hero content
• Warm surface palette ({colors.surface-warm}, {colors.surface-soft}) creating paper-like reading zones below the fold
• Light-weight Inter headings ({typography.title-md} at 300 weight) with tight letter-spacing (-1.12px) for editorial elegance
• Multi-layer shadow system ({extensions.shadows.lg}) combining hairline borders with diffuse depth for elevated cards
• Expressive animation layer with 20+ keyframe sequences (floating UI elements, cursor choreography, pulse effects)
• Handwritten accent typeface ({typography.handwriting}) reserved for personal/patient voice moments
• Coral ({colors.accent-coral}) and forest green ({colors.accent-forest}) accents used sparingly in feature cards and semantic highlights

Colors

Brand & Accent

• Primary Ink ({colors.primary} — #020817): The deepest black-blue in the system, serving as both the brand's primary identity color and its default text ink on light surfaces. Used for the logo, body copy, and primary interactive states.
• On Primary ({colors.on-primary} — #ffffff): Pure white, guaranteed AA contrast against {colors.primary}. Applied as text color inside any dark-branded element.
• Coral Accent ({colors.accent-coral} — #f9591f): A warm, energetic orange-red appearing in badges, alerts, and call-to-action highlights where urgency or warmth is needed.
• Forest Accent ({colors.accent-forest} — #1e3e30): Deep, organic green used for dark-themed feature cards, success states, and nature-associated capability showcases.
• Blue Gray Accent ({colors.accent-blue-gray} — #547c96): Muted slate blue serving as the hero section's photographic tint/base color, conveying calm and clinical reliability.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline surface for main content areas, cards, and the primary CTA button background.
• Surface Soft ({colors.surface-soft} — #f2f5f8): Cool-toned very light gray-blue for alternating content bands and subtle card backgrounds.
• Surface Warm ({colors.surface-warm} — #f7f6f2): Creamy off-white with slight yellow warmth, used for primary editorial content sections and quote blocks.
• Dark Overlay ({colors.surface-dark-overlay} — rgba(16, 19, 25, 0.34)): Semi-transparent dark scrim applied over photography to ensure text legibility without obscuring imagery entirely.
• Heavy Overlay ({colors.surface-dark-heavy} — rgba(18, 18, 18, 0.4)): Denser dark overlay for modal-backdrop intensity or heavily-textured photo treatments.
• Transparent White ({colors.surface-transparent-white} — rgba(255, 255, 255, 0.1)): Glassmorphism base for floating panels over dark or photographic content.
• Subtle Transparent White ({colors.surface-transparent-white-subtle} — rgba(255, 255, 255, 0.14)): Slightly more visible glass surface for elevated glass-panel states.

Text & Ink

• Ink ({colors.ink} — #020817): Primary reading color for headings and body copy on light surfaces; also functions as the brand's darkest identity token.
• Body ({colors.body} — #14171f): Slightly lighter than ink, used for extended body paragraphs and secondary heading levels where slightly less weight is appropriate.
• Muted ({colors.muted} — #737373): Medium gray for supporting text, captions, metadata, timestamps, and disabled-label treatments.
• Near Black ({colors.near-black} — #171717): Neutral dark gray used in specific component contexts like button text on light backgrounds or input placeholders.
• Warm Black ({colors.warm-black} — #191714): Subtly warm-tinted dark for contexts requiring a softer, more organic feel than pure neutral blacks.
• Blue Black ({colors.blue-black} — #171c26): Cool-shifted dark used specifically as the text color within the {component.button-primary} (white button on hero).
• On Dark ({colors.on-dark} — #ffffff): White text for any context where the background is photographic, dark-themed, or uses {colors.primary} as fill.
• On Dark Subtle ({colors.on-dark-subtle} — rgba(255, 255, 255, 0.96)): Near-opaque white for navigation elements over dark/photographic backgrounds, providing 96% opacity for slight atmospheric blending.
• Ink Muted ({colors.ink-muted} — rgba(2, 8, 23, 0.7)): Semi-transparent ink for overlays, watermarks, or decorative text elements that should recede.
• Warm Cream ({colors.warm-cream} — #fef3c7): Pale golden-yellow used exclusively for handwritten-style accent text (patient notes, highlight callouts) against darker backdrops.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(226, 232, 240, 0.5)): Very faint border color derived from Tailwind's slate-200, used for subtle dividers, input outlines at rest, and card boundaries that must not compete visually.
• Border Light ({colors.border-light} — #e2e8f0): Slightly more visible than hairline for active borders, focus rings, or structural dividers between major sections.

Semantic

• Error ({colors.error} — #dc2626): Standard red-600 for form validation errors, alert banners, and destructive action feedback.
• Success ({colors.success} — #16a34a): Green-600 for confirmation states, completed actions, and positive health-indicator displays.
• Link ({colors.link} — #020817): Inline links inherit the primary ink color, differentiated by underline treatment rather than hue departure.

Typography

Font Family

The system is built on a two-family pairing: Playfair Display (serif) carries all display and editorial-mark moments — the "Juno" wordmark at 216px, pull quotes, and any touchpoint requiring gravitas or heritage resonance. Its fallback chain extends through Didot, Bodoni 72, Hoefler Text, into system serifs (Georgia). Inter (sans-serif) handles everything else: navigation, body copy, UI labels, buttons, and data displays. Inter's fallback includes SF Pro Display, system fonts, Helvetica Neue, and Arial.

A third handwriting face — "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive — is deployed sparingly for patient-voice annotations, personal notes, or signature moments that need to break from the system's polish. A fourth editorial serif — Baskerville, Palatino, Georgia stack — supports long-form quote blocks where Playfair would be too ornate. Google Fonts imports include Fraunces (variable optical weight) and Dancing Script, suggesting these may appear in deeper pages not captured in the hero viewport.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 216px | 400 | 168.48px | normal | Hero wordmark ("Juno"), brand-at-scale moments | | {typography.display-lg} | 216px | 400 | 168.48px | normal | Large editorial headlines (variant of display-xl) | | {typography.title-lg} | 48px | 300 | 51.84px | -1.2px | Section headings in content areas | | {typography.title-md} | 44.8px | 300 | 48.384px | -1.12px | Primary sub-section headings | | {typography.body-md} | 44.64px | 600 | 48.2112px | normal | Hero subtitle text (unusually large for hero-context legibility) | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Standard body copy in content sections | | {typography.caption} | 14px | 400 | 1.43 | 0 | Metadata, labels, small print | | {typography.button} | 14px | 500 | 1.25 | 0 | Primary CTA button text | | {typography.button-lg} | 15–17px | 600 | 1 | 0 | Navigation items, larger button labels | | {typography.nav-link} | 15px | 600 | 1 | 0 | Top navigation links | | {typography.handwriting} | inherit | 500 | 1.4 | 0 | Patient notes, personal annotations | | {typography.editorial-serif} | inherit | 400 | 1.5 | 0 | Pull quotes, testimonial blocks |

Principles

The Juno type system makes two unusual choices worth understanding deeply. First, weight carries almost no hierarchical load. Section headings sit at font-weight: 300 (light), while the hero subtitle — which sits hierarchically beneath the display wordmark — weighs in at 600 (semibold). This inversion exists because the subtitle must remain legible over complex photography; the light headings exist on clean, light surfaces where thin strokes read elegantly. When implementing this system, resist the impulse to bolden the title-md role — its intentional lightness is the system's signature restraint.

Second, letter-spacing is aggressively negative on the Inter headings (-1.12px on 44.8px, -1.2px on 48px). This tightening gives the sans-serif a more editorial, almost bespoke quality — it reads closer to custom-drawn lettering than to standard web type. Apply this negative tracking consistently wherever {typography.title-md} or {typography.title-lg} appear. The display serif ({typography.display-xl}) uses normal spacing, allowing the font's natural proportions to breathe at heroic scale.

Color-as-hierarchy plays a smaller role than in many systems because the hero uses white-on-photo everywhere. Below the fold, the shift from {colors.ink} to {colors.muted} handles tertiary information. Italic is reserved for the editorial-serif face; uppercase does not appear as a stylistic device.

Note on Font Substitutes

Playfair Display is available on Google Fonts (weights 400–700, italic). Use it directly via the Google Fonts CDN with the URL already present in the site's font-links: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400. For the variable-weight Fraunces face (opsz 9..144, weights 300–500), substitute with Google Fonts' Fraunces. For Dancing Script (the script accent), it is also available on Google Fonts. Inter should be loaded via the official Inter variable font CDN or Google Fonts (weights 300–700). Define these CSS variables for your implementation:

--font-display: 'Playfair Display', Didot, 'Bodoni MT', ui-serif, Georgia, serif;
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-handwriting: 'Bradley Hand', 'Marker Felt', cursive;
--font-editorial: Baskerville, 'Palatino Linotype', Palatino, ui-serif, Georgia, serif;

Layout

Spacing System

• Base unit: 2px (derived from {spacing.xxs}), scaling through a modified 4/8-ish grid with practical deviations at 6px, 10px, 12px.
• Tokens: {spacing.xxs} (2px — micro-adjustments, focus-ring offsets), {spacing.xs} (4px — icon gaps, internal padding), {spacing.sm} (6px — compact gaps), {spacing.md} (8px — small component gaps), {spacing.base} (10px — button vertical padding), {spacing.lg} (12px — card internal rhythm), {spacing.xl} (16px — standard padding), {spacing['2xl']} (20px — button horizontal padding), {spacing['3xl']} (24px — card padding, section gutters), {spacing['4xl']} (40px — large gaps), {spacing['5xl']} (48px — section-internal spacing), {spacing.section} (80px — major section vertical rhythm).
• Section padding (vertical): {spacing.section} (80px) — used between major content bands (how-it-works, testimonials, FAQ sections).
• Card internal padding: {spacing['3xl']} (24px) for standard {component.card} components; elevated cards may use up to {spacing['5xl']} (48px).
• Gutters: Content constrains to 1150px ({container-content} width) within a 1440px viewport wrapper ({container-main}). Horizontal gutter between grid columns is typically {spacing['3xl']}.

Grid & Container

• Max content width: 1150px for article/content regions, 1440px for full-width section wrappers.
• Editorial density: The layout chooses generous whitespace over information density — this is a narrative landing page, not a dashboard or marketplace. Sections breathe with 64–80px vertical padding.
• Grid behaviors at desktop: Likely a 12-column grid within the 1150px content zone. Feature cards probably occupy 3- or 4-column widths. The hero uses a full-bleed photograph with centered/left-aligned text overlay (no column split in traditional sense — text floats over image).
• Hero column structure: The hero is a single-layer full-bleed photographic band with absolutely-positioned text content centered vertically and horizontally (or left-aligned per the screenshot showing left-biased composition).

Whitespace Philosophy

Juno's whitespace strategy is editorial-airy with purposeful compression in the hero zone. The 216px wordmark consumes enormous vertical space intentionally — it's a brand statement, not information delivery. Below the fold, the system opens up: 80px between sections, 24px+ inside cards, generous margins around pull quotes. This airiness signals the product's value proposition: chronic illness management shouldn't feel cluttered or overwhelming. The app (implied) likely offers similar breathing room.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [LOGO]         How it works   Reviews   FAQ   Media             │
│                 (nav-item)   (nav-item) (nav-item) (nav-item)   │
│                                                                 │
│  max-width: 1440px  |  padding: 18px 32px  |  bg: transparent   │
│  text: on-dark-subtle (#fff @ 96% opacity)                     │
└─────────────────────────────────────────────────────────────────┘

The top navigation sits as a transparent bar over the hero photograph. Logo flush left, navigation items center or center-right, with no visible right-rail utilities in the captured viewport. Navigation items use {component.nav-link} styling — transparent background, semibold weight, 15px size, white text at 96% opacity. No visible border-bottom or background activation state in the static capture.

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                      [FULL-BLEED PHOTOGRAPH]                    │
│            (atmospheric portrait, golden-hour lighting)          │
│                                                                 │
│                                                                 │
│              ╭──────────────────────────────╮                   │
│              │       Juno                   │  ← display-xl     │
│              │  (Playfair, 216px, white)    │     #ffffff       │
│              ╰──────────────────────────────╯                   │
│                                                                 │
│     Your 24/7 health assistant for chronic illness              │
│     ───────────────────────────────────────────  ← body-md     │
│     (Inter, 44.64px, 600 weight, white)                         │
│                                                                 │
│                                                                 │
│                  ┌─────────────────┐                            │
│                  │    Download     │  ← button-primary          │
│                  │  (pill, white)  │    canvas bg, pill shape   │
│                  └─────────────────┘                            │
│                                                                 │
│  Background tint: #547c96 (accent-blue-gray) as photo base      │
│  Overlay: surface-dark-opacity scrim for text legibility        │
└─────────────────────────────────────────────────────────────────┘

Content Band Structure (Below Fold)

┌─────────────────────────────────────────────────────────────────┐
│  bg: surface-warm (#f7f6f2)  |  padding: 64px vertical         │
│  content-width: 1150px        |  text-align: left/center        │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                                                          │   │
│  │  [Title: Inter, 48px, 300 weight, ink]                   │   │
│  │                                                          │   │
│  │  [Body: Inter, 16px, 400 weight, body color]             │   │
│  │                                                          │   │
│  │  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐          │   │
│  │  │ Card   │  │ Card   │  │ Card   │  │ Card   │          │   │
│  │  │ (lg)   │  │ (lg)   │  │ (lg)   │  │ (lg)   │          │   │
│  │  └────────┘  └────────┘  └────────┘  └────────┘          │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

Alternating bands switch between {colors.surface-warm} and {colors.surface-soft} backgrounds. Cards within these bands use {colors.canvas} with {rounded.lg} (20px) corners and the layered {extensions.shadows.lg} treatment (white inner glow + subtle outer diffusion).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | Flat | No shadow, no border, {colors.canvas} direct | Base surfaces, body background, flat buttons | | Hairline outline | 1px {colors.hairline}, no shadow | Input fields at rest, subtle dividers | | Soft drop | {extensions.shadows.md} — 0 18px 48px rgba(15,23,42,0.14) | Elevated cards on light surfaces | | Defined elevation | {extensions.shadows.lg} — combined white inset + 1px hairline + 18px blur | Featured cards, hover-lifted elements | | Heavy elevation | {extensions.shadows.heavy} — 0 14px 32px rgba(0,0,0,0.2) | Modals, dropdowns, tooltips | | Glass panel | {extensions.shadows.glass} — inner white glow + diffuse dark shadow | Floating panels over photography or dark themes | | Inner glow | {extensions.shadows.inner-glow} — white inset shadow | Pressed button states, active inputs |

Philosophy: Juno employs a layered-shadow-over-color-block approach. Rather than relying solely on background color shifts for elevation, the system stacks multiple shadow layers — often including an inner white glow (simulating light hitting the top edge) combined with a diffuse dark drop. This creates a "laminated" or "physical" quality that feels premium and tactile. Shadows are neutral-to-cool-toned (slate-based rgba), never colored. The heaviest elevations approach 20% black opacity at 32px spread — substantial but never theatrical.

Decorative Depth

Photography serves as the primary decorative depth mechanism in the hero — the full-bleed image provides environmental context that no gradient or abstract pattern could match. The {colors.accent-blue-gray} tint behind the hero photograph acts as a color-normalization layer, ensuring varied photos share a consistent atmospheric cast. Animated elements (detected keyframes like juno-gif-float, hero-chevron-float, report-juno-float) add parallax-like motion depth, making the interface feel alive rather than static.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Input fields, small tags, compact components | | {rounded.DEFAULT} | 20px | Default card radius, standard containers (alias for lg) | | {rounded.md} | 12px | Smaller cards, badge variants, secondary panels | | {rounded.lg} | 20px | Primary card component, content containers, featured boxes | | {rounded.xl} | 24px | Larger featured cards, hero-contained panels, image frames | | {rounded.pill} | 9999px | Buttons (primary CTA), badges, avatars, fully-rounded elements | | {rounded.full} | 9999px | Identical to pill; used interchangeably for maximum-round semantics |

Photography Geometry

Hero photography occupies full-bleed width and viewport-height proportion (min 100svh) with no corner rounding — images extend edge-to-edge. Within content sections, photographs likely appear inside {rounded.xl} (24px) or {rounded.lg} (20px) containers when framed as card elements. Aspect ratios favor cinematic widescreen (16:9 or wider) for hero shots; feature illustrations may use 4:3 or 1:1 squares. Avatar or user-photo circular treatments would use {rounded.pill}.

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.nav-item-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal call-to-action, seen in the hero as the "Download" button. Pure {colors.canvas} background with {colors.blue-black} text at 14px/500 weight. Fully pill-shaped ({rounded.pill}) with 8px 20px padding. No box shadow at rest state; sits directly over photographic content. On hover, transitions to {component.button-primary-hover} with a subtly warmer {colors.surface-warm} background. This is the conversion focal point of the entire page — it must remain visually prominent without feeling aggressive.

{component.button-secondary} — Transparent-background navigation-style button used for "How it works," "Reviews," "FAQ," and "Media" links in the top nav area. Text is {colors.on-dark-subtle} (white at 96% opacity) at 15–17px/600 weight depending on viewport. Zero padding, zero border-radius — these function as text links with button semantics. Hover state ({component.button-secondary-hover}) increases opacity to full {colors.on-dark}. These are structurally <button> elements despite their link-like appearance.

Cards & Containers

{component.card} — The workhorse content container. {colors.canvas} background, {colors.body} text, {typography.body-sm} for internal copy, {rounded.lg} (20px) corners, and {spacing['3xl']} (24px) internal padding. Uses {extensions.shadows.lg} for elevation (not represented in YAML schema — apply in markdown-referenced styles). Houses feature descriptions, how-it-steps, or testimonial fragments. Appears in alternating content bands with {colors.surface-warm} or {colors.surface-soft} page backgrounds.

{component.card-elevated} — A more prominent variant of {component.card} using {rounded.xl} (24px) for slightly rounder corners. Same color and type treatment. Deploy for featured or highlighted content that needs subtle extra emphasis without changing its surface color. Shadow treatment likely steps up to the {extensions.shadows.heavy} tier.

{component.card-dark} — Dark-themed capability card using {colors.accent-forest} (#1e3e30) as its surface. Text flips to {colors.on-dark} (white). Same padding and radius as {component.card}. Used to showcase specific features (data tracking, reporting, pacing tools) where the dark ground creates visual separation from surrounding light cards. Creates a "spotlight" effect in card grids.

{component.card-glass} — Glassmorphism variant with {colors.surface-transparent-white} (10% white) background. Designed to float over photographic or dark-themed sections while maintaining readability. Text remains {colors.on-dark}. The {extensions.shadows.glass} shadow (inner white glow + dark diffusion) reinforces the glass illusion. Likely used for floating UI panels in animated demo sequences.

Inputs & Forms

{component.text-input} — Standard text entry field. {colors.canvas} background, {colors.ink} text, {typography.body-sm} type scale. {rounded.sm} (6px) for subtle corner softening — noticeably tighter than card radii. Padding of 10px 14px vertically centers 16px text within a 44px total height (touch-friendly). At rest, bordered by {colors.hairline} or no visible border (shadow-based definition). Focus state ({component.text-input-focus}) maintains same dimensions and radius; focus treatment likely involves a color shift on the hairline or a subtle ring (implement per stack conventions).

Navigation

{component.top-nav} — The fixed or sticky header bar spanning the full viewport width (up to 1440px constrained). Transparent background allows the hero photograph to show through. Internal padding of 18px 32px provides comfortable vertical spacing for navigation items. Contains the Juno logo (left) and nav links (center-right). Typography uses {typography.nav-link} (15px/600, near-white text).

{component.nav-item} — Individual navigation link within {component.top-nav}. Zero background, zero border-radius, {colors.on-dark-subtle} text. Functions as a text-only button. See hover variant {component.nav-item-hover} for interaction state.

Signature Components

{component.hero-band} — The full-viewport hero section. Background is {colors.accent-blue-gray} (#547c66) acting as a photographic tint layer. Contains the absolutely-positioned {component.hero-headline} ("Juno" at 216px), {component.hero-subtitle} (descriptor text at 44.64px), and {component.button-primary} CTA. Minimum height of 100svh ensures the hero always fills the screen regardless of viewport proportions. Overflow hidden to contain any animated elements.

{component.hero-headline} — The "Juno" wordmark rendered in {typography.display-xl} (Playfair Display, 216px, 400 weight, white). This is the brand's most distinctive visual asset — its scale dominates the viewport and immediately establishes the editorial, caring tone. Letter-spacing remains normal (no tightening needed at this size). Line-height of 168.48px (approximately 0.78 ratio) keeps lines tight if the word wraps.

{component.hero-subtitle} — "Your 24/7 health assistant for chronic illness" rendered in {typography.body-md} (Inter, 44.64px, 600 weight, white). Unusually large for "body" classification — sized for hero-context legibility over complex photographic backgrounds. The semibold weight ensures it doesn't wash out against mid-tone areas of the photo. Positioned below the wordmark with approximately {spacing['3xl']} to {spacing['4xl']} gap.

{component.content-section} — Full-width horizontal band below the hero. {colors.surface-warm} background, 64px vertical padding, 1150px content constraint. Hosts heading + body copy + card grids. Alternates with {component.content-section-alt} which uses {colors.surface-soft} instead.

{component.quote-block} — Pull-quote or testimonial display using {typography.editorial-serif} (Baskerville/Palatino stack). Transparent background, {colors.ink} text color, generous {spacing['3xl']} vertical padding. Zero border-radius (this is a block-level text element, not a card). Likely preceded or followed by a {component.divider}.

{component.handwritten-note} — Personal annotation or patient-voice callout in {typography.handwriting} (Bradley Hand/Marker Felt). Text color is {colors.warm-cream} (pale gold) — designed to appear against dark or photographic backgrounds where the warm tone feels intimate and hand-written. No background, no padding constraints beyond flow context.

{component.badge} — Small categorical label. {colors.surface-soft} background, {colors.muted} text, {typography.caption} sizing, fully pill-shaped. 4px 12px padding creates a compact horizontal tag. Used for feature labels, category markers, or status indicators. Variant {component.badge-accent} swaps to {colors.accent-coral} background with {colors.on-primary} text for highlighted or new badges.

{component.footer} — Page footer region. {colors.canvas} background, {colors.muted} text at caption size. Generous {spacing.section} (80px) vertical padding with {spacing.xl} (16px) horizontal. Contains legal links, social icons, and copyright — minimal visual weight to let the page end quietly.

{component.overlay-dark} and {component.overlay-heavy} — Scrim layers for modals or expanded image views. {colors.surface-dark-overlay} (34% opacity black) for moderate dimming; {colors.surface-dark-heavy} (40%) for heavier treatments where underlying content must strongly recede.

{component.container-main} and {component.container-content} — Structural width constraints. Main container locks at 1440px max-width (full bleed for hero/photo sections); content container narrows to 1150px for readable text columns. Both have transparent backgrounds and rely on parent sections for surface color.

Do's and Don'ts

Do

• Do use {typography.display-xl} (Playfair Display at 216px) for the hero wordmark only — this scale is exclusive to the brand moment and should never appear in body content.
• Do maintain {rounded.pill} (9999px) for all primary CTAs like {component.button-primary} — the fully rounded shape signals the conversion action clearly against photographic backgrounds.
• Do apply negative letter-spacing (-1.12px to -1.2px) whenever using {typography.title-md} or {typography.title-lg} — this tight tracking is essential to the system's editorial character.
• Do reserve {colors.accent-coral} and {colors.accent-forest} for semantic highlights and dark feature cards respectively — they are accent colors, never primary surfaces.
• Do layer {extensions.shadows.lg} (combined white-inset + diffuse drop) on {component.card} elements for physical depth — avoid single-layer flat shadows.
• Do use {colors.surface-warm} (#f7f6f2) as the primary content section background — its creamy tone creates a paper-like reading environment distinct from the cool {colors.surface-soft}.
• Do keep hero text in {colors.on-dark} (#ffffff) at all sizes — the photography demands white type for consistency, never introduce dark text over images.
• Do employ {typography.handwriting} sparingly for patient-voice moments — its informal quality loses impact if overused.
• Do constrain readable content to 1150px ({container-content} width) within the 1440px viewport — the 290px margins create the airy, editorial feel.
• Do alternate between {component.content-section} (warm) and {component.content-section-alt} (cool-soft) for visual rhythm in scrolling content.
• Do use {typography.body-md} (44.64px, 600 weight) for hero subtitle text only — this size/weight combination is calibrated for photo-background legibility and will overwhelm standard content sections.
• Do treat {colors.ink} (#020817) as both the brand color and default text color — the system unifies identity and information hierarchy in this single deep black-blue.

Don't

• Don't apply {typography.title-md} at a weight higher than 300 — the light weight is intentional and distinguishes Juno from generic tech-landing-page bold-heading patterns.
• Don't use gradients or colorful backgrounds in the hero band — the design relies on photography plus the subtle {colors.accent-blue-gray} tint; artificial gradients would undermine the authentic, research-grounded atmosphere.
• Don't expand the radius vocabulary beyond {rounded.sm}, {rounded.md}, {rounded.lg}, {rounded.xl}, and {rounded.pill} — intermediate values (8px, 16px, 32px) don't exist in this system and would look inconsistent.
• Don't substitute {colors.link} (which equals {colors.ink}) with a blue or underlined alternative for inline links — the system uses color identity, not conventional hyperlink coloring.
• Don't place {component.card-dark} (forest-green surface) adjacent to another dark card without a light card between them — the dark cards are spotlights meant to alternate with light cards in grids.
• Don't add borders to {component.button-primary} — its definition specifies 0px solid; the pill shape alone provides sufficient affordance.
• Don't use {typography.display-xl} (the 216px serif) for anything other than the "Juno" wordmark or equivalent brand statement — at this scale it becomes illegible for informational content.
• Don't apply {colors.muted} gray to hero-zone elements — the hero operates in a binary white/text-on-photo world; grays only appear below the fold on light surfaces.
• Don't implement hover states by adding backgrounds to {component.nav-item} items — the transition is opacity-only (96% → 100%), preserving the transparent-bar aesthetic.
• Don't round photography to anything less than full-bleed in the hero — the image must extend edge-to-edge for atmospheric immersion; rounding is reserved for inline/card-contained images.

Motion & Animation

Transition Tokens

--transition-base: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    filter 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);

--transition-slow: color 0.3s cubic-bezier(0, 0, 0.2, 1), 
                    background-color 0.3s cubic-bezier(0, 0, 0.2, 1), 
                    border-color 0.3s cubic-bezier(0, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0, 0, 0.2, 1), 
                    transform 0.3s cubic-bezier(0, 0, 0.2, 1);

--transition-opacity: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-fast: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transform-slow: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--filter-transform: filter 0.18s, transform 0.18s;

Keyframe Animations

• hero-download-cursor-move — Simulated cursor movement toward the Download button in the hero, guiding user attention to the CTA.
• hero-download-button-click — Micro-animation of the Download button being "pressed" — scale or shadow shift on a loop.
• juno-gif-float — Gentle vertical float (translateY oscillation) for the Juno mascot/character or illustrative element.
• research-orbit-spin — Rotational animation for a research-badge or credibility-indicator orbital element (360° rotation).
• story-scan — Horizontal scanning effect (clip-path or gradient reveal) simulating document/text analysis.
• story-glitch — Brief digital glitch/distortion effect for data-story transitions.
• story-slice — Segmented reveal animation for storytelling content slices.
• hero-chevron-float — Down-arrow bounce/float indicating scroll prompt below hero.
• data-intake-pulse — Pulsing opacity or scale ring for data-entry indication points.
• pacing-alert-pulse — Rhythmic pulse animation for pacing/alert notification elements.
• pacing-cursor-move — Cursor-path animation demonstrating the pacing-feature interaction.
• report-sheen — Diagonal light-sweep sheen effect across report preview surfaces.
• report-download-bob — Gentle vertical bob for report download indicator/icon.
• report-note-fly — Flying note-paper animation (translate + rotate) for report annotation elements.
• report-line-write — Progressive stroke-draw or width animation simulating handwriting or line generation.
• report-juno-float — Floating motion for the Juno avatar within report-generation scenes.
• report-juno-ring — Expanding/concentric ring animation around Juno avatar indicating processing.
• report-chart-rise — Bar/line chart growth animation for data visualization reveals.
• report-chip-pop — Scale-from-zero pop animation for tag/chip elements appearing in reports.
• report-send-pulse — Pulse ripple for send-action confirmation states.

Interaction Patterns

• Hover opacity shifts: All interactive elements (nav links, buttons) transition opacity between 96%–100% or 80%–100% on hover — no background color changes on nav items.
• Cursor choreography: The hero features an animated cursor that moves toward the CTA, creating a guided-interaction feel. This is a signature moment requiring JS-driven or CSS-animated positioning.
• Floating UI elements: Multiple elements (chevron indicators, mascot figures, report components) exhibit continuous slow float animations (±4–8px translateY over 3–6 second periods).
• Scroll-triggered reveals: Content sections likely fade-up or slide-up on intersection with the viewport (inferred from the presence of filter 0.18s, transform 0.18s transition tokens suitable for enter-animations).
• Pulse indicators: Data-input points, alert states, and processing indicators use rhythmic opacity pulses (0.8–1.0 range, 1.5–2s period).
• Sheen/glint effects: Report previews and card surfaces feature periodic diagonal light sweeps for perceived liveness.
• Glitch transitions: Data-story or technical-explanation sections briefly glitch between states for a digital-health aesthetic.
• Chart animation: Data visualization elements animate their bars/lines growing from baseline when scrolled into view.

Imagery Style

• Primary photography style: Candid, warm-lit portraiture featuring real people in natural outdoor settings — the hero shows a woman in a field during golden hour, establishing empathy and humanity.
• Lighting philosophy: Soft, directional natural light (sunrise/sunset quality) with lens flare or atmospheric haze; avoids harsh studio lighting or sterile medical aesthetics.
• Color grading: Photographs receive a subtle {colors.accent-blue-gray} tint overlay (desaturated cool slate) to unify varied source images into a consistent atmospheric palette.
• Subject matter: People living with chronic illness engaged in quiet, dignified daily activities (reading, resting outdoors, reflecting) — never clinical settings, never exaggerated suffering, always agency and peace.
• Image dominance: Photography commands the full hero viewport; below the fold, imagery retreats to supporting role inside cards or as small illustrative insets — text leads, images serve.
• Treatment over photos: Dark scrim overlays ({{component.overlay-dark}}) at ~34% opacity ensure white text remains readable without destroying photo detail.
• No illustration detected in hero: The captured viewport relies entirely on photography; deeper pages may introduce illustration based on font imports (Dancing Script suggests illustrated moments elsewhere).
• Aspect ratio preference: Cinematic wide (16:9 or broader) for hero shots; likely 4:3 or 1:1 for inline card images based on common patterns in this layout genre.
• Emotional temperature: Images convey warmth, safety, and quiet resilience — aligned with the product's promise of reducing the cognitive load of illness management.
• Authenticity signal: The choice of non-model-looking subjects in non-staged-feeling environments differentiates Juno from glossy wellness-brand photography; it reads as documentary-adjacent.

Icon System

• Library: Lucide (detected from framework analysis: "iconLibs": ["lucide"]). Lucide's clean, consistent stroke-weight iconography matches Inter's geometric rationality.
• Specific icons observed: While the hero screenshot focuses on typography and photography, Lucide icons are present in the site's implementation. Expected icon applications include: download/cloud-download (CTA), chevron-down (scroll indicator), heart/heartbeat (health metrics), file-text/report (report generation), clock/time (24/7 availability), shield/check (security/trust), arrow-right (navigation continuations), menu/hamburger (mobile nav).
• Treatment: Stroke-based (not filled), currentColor inheritance so icons adopt the text color of their container. Default size likely 20px or 24px for navigation/UI icons, scaling to 16px for inline-with-text usage.
• Alignment: Icons sit on the same baseline as adjacent text with vertical-align: middle or flex-centering; no offset positioning detected in the static capture.
• Stroke weight: Consistent with Lucide defaults (typically 1.5px or 2px stroke-width) — matching the refined-but-not-delicate aesthetic of the overall system.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro — site exhibits SSR-friendly architecture
                  with heavy client-side animation, suggesting React + hybrid approach
- Styling:        Tailwind CSS v3.4+ (confirmed by utility-class patterns in extracted CSS:
                  `text-[15px]`, `rounded-full`, `px-5 py-2`, `hover:opacity-80`)
- Fonts:          Google Fonts CDN for Playfair Display, Inter (variable), Fraunces,
                  Dancing Script; self-host Inter variable font for performance if desired
- Animation:      CSS keyframes (20+ defined) + Framer Motion or GSAP for scroll-triggered
                  reveals; cursor choreography likely JS-driven via requestAnimationFrame
- Icons:          Lucide React (via lucide-react package) — confirmed library
- Component lib:  Custom components built on Tailwind primitives (no shadcn/Radix detected;
                  buttons and cards are hand-spec'd utility compositions)
- Deployment:     Vercel or Cloudflare Pages (consistent with Next.js/Astro choice)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hero wordmark scales down (likely 80–120px); nav collapses to hamburger; cards stack vertically; CTA button spans full-width | | Tablet | 640–1024px | Two-column card grids; reduced hero type scale (120–160px for wordmark); condensed nav; maintained photo-bleed hero | | Desktop | 1024–1440px | Full design as captured: 216px wordmark, 4-column card grids, horizontal nav visible, 1150px content width | | Wide | > 1440px | Content centers within 1440px wrapper; additional horizontal margin; no further type scaling |

Touch Targets

• {component.button-primary}: ~152px × 36px (from padding: 8px 20px + text) — exceeds WCAG AAA 44×44px minimum comfortably in both dimensions.
• {component.nav-item}: Text-only at 15px — actual tap area should be padded to minimum 44×44px in implementation (add invisible padding or min-height/width).
• {component.text-input}: 44px height explicitly — meets WCAG AAA touch target requirement exactly; width depends on context but should exceed 200px for thumb-friendly input.
• {component.badge}: ~70px × 24px (estimated from padding + caption text) — height below 44px recommendation but acceptable for non-primary interactive labels; consider increasing to 32px min-height if tappable.

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal {component.top-nav} items (How it works, Reviews, FAQ, Media) collapse into a hamburger menu or bottom-sheet drawer. The logo remains visible and fixed. Background may shift from transparent to {colors.ink} or {colors.canvas} with backdrop-blur for readability over scrolled content.
• Hero typography: {typography.display-xl} (216px) scales down progressively — likely via clamp() or responsive font-size classes to ~15vw minimum, ensuring the wordmark remains impactful but fits mobile viewports (target: 72–96px on phones).
• Card grids: 4-column desktop grids collapse to 2 columns on tablet, 1 column on mobile. Each card expands to full content width with preserved {rounded.lg} and shadow treatment.
• Hero CTA: The {component.button-primary} (Download) likely repositions to below the subtitle text on mobile (stacked vertically rather than overlaid at a fixed position), maintaining full-pill shape and white background.
• Section padding: Vertical {spacing.section} (80px) compresses to 48–56px on mobile; horizontal padding reduces from 32px to 16px ({spacing.xl} to {spacing.xl} on narrow screens).
• Image behavior: Hero photograph maintains full-bleed width at all breakpoints with object-fit cover and strategic focal-point positioning (faces/subjects remain visible on crop). Inline card images may shift aspect ratio from landscape to square or maintain 16:9 with reduced pixel dimensions.

Iteration Guide

1. Build a landing page that closely mirrors the design system in this DESIGN.md. Use Next.js with App Router and Tailwind CSS v4 as the foundational stack, pulling every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Never hard-code a value that has a token reference available.

2. Implement the hero section first: full-bleed photograph with {colors.accent-blue-gray} tint overlay, {component.overlay-dark} scrim, centered/left-aligned {typography.display-xl} "Juno" wordmark in white, {typography.body-md} subtitle, and floating {component.button-primary} CTA. Ensure the wordmark renders at 216px on desktop with responsive scaling via CSS clamp().

3. Add the transparent {component.top-nav} bar with logo and {component.nav-item} links using {typography.nav-link} (15px/600, white at 96% opacity). Include hover state transitioning to 100% opacity. Make this position: fixed or sticky with z-index: 100.

4. Build the alternating content bands below the fold: {component.content-section} (warm #f7f6f2 background) and {component.content-section-alt} (soft #f2f5f8 background), each with 64px vertical padding and 1150px content constraint. Inside each, add {typography.title-lg} or {typography.title-md} headings at 300 weight with -1.12px to -1.2px letter-spacing.

5. Create card components: {component.card} (canvas bg, 20px radius, 24px padding, {extensions.shadows.lg}), {component.card-dark} (forest-green bg, white text), and arrange them in responsive grids (4-col → 2-col → 1-col). Each card should contain a heading, body copy at {typography.body-sm} (16px/400), and optional {component.badge} elements.

6. Integrate animations using the extracted keyframe definitions: add juno-gif-float to any mascot/character element (slow translateY oscillation), hero-chevron-float for scroll prompts, and report-* animations for any demo/preview sections. Apply {extensions.motion.duration} (150ms) and {extensions.motion.easing} (ease-standard) to all interactive state transitions.

7. Add state variants per your stack's conventions: the spec documents Default and implied Active/Hover states as separate frontmatter entries (button-primary → button-primary-hover, nav-item → nav-item-hover). Implement these as Tailwind hover: variants or CSS :hover pseudo-classes. Focus states should use ring or shadow expansion rather than color change.

8. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay special attention to {typography.body-md} being used correctly (only in hero subtitle context, not general body copy) and {rounded.pill} appearing only on buttons and badges.

9. When adding a new component, decide which sub-system it belongs to: hero dialect (photo-bg, white type, floating elements), editorial content dialect (warm/soft surfaces, ink type, serif quotes), feature-card dialect (dark cards, white type, glass panels), or utility (inputs, badges, overlays). Maintain visual consistency within each dialect.

10. When in doubt about emphasis: prefer larger type before bolder type (the system's headings are light-weight but large), prefer signature surface cards ({component.card-dark}) before solid accent fills, and always let photography breathe without competitive graphic overlays. The brand's power lies in restraint.

Font Setup

Map proprietary fonts to Google Fonts equivalents and define CSS custom properties:

/* Add to global stylesheet or tailwind.config.css */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Dancing+Script:wght@500;600;700&display=swap');

:root {
  --font-display: 'Playfair Display', Didot, 'Bodoni MT', ui-serif, Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-handwriting: 'Bradley Hand', 'Marker Felt', 'Comic Sans MS', cursive;
  --font-editorial: Baskerville, 'Iowan Old Style', 'Palatino Linotype', Palatino, ui-serif, Georgia, serif;
  --font-display-variable: 'Fraunces', var(--font-display);
}

Note: 'Bradley Hand' and 'Marker Felt' are macOS/iOS system fonts. For cross-platform handwritten appearance, consider substituting 'Kalam' or 'Caveat' from Google Fonts in the --font-handwriting stack, or use 'Dancing Script' (already imported) for a script accent that renders universally.

Known Gaps

• Hover state styling specifics: Per the no-hover policy, exact hover color values, transform offsets, and timing for nav items, buttons, and cards are inferred rather than extracted. Implementation should follow the opacity-shift pattern evident in the hover:opacity-80 class found on nav buttons.
• Loading skeletons / pending states: No skeleton loader, spinner, or empty-state designs were extractable from the hero viewport. These should be designed following the card component language ({component.card} geometry, {colors.surface-soft} fill, pulse animation from data-intake-pulse keyframe pattern).
• Form validation states beyond focus: Error messages, input-error border colors, and validation-icon treatments are absent from the extracted CSS. Implement using {colors.error} red for error states, maintaining {rounded.sm} input radius.
• Dashboard / authenticated-only surfaces: The design captures only the public landing page. In-app interfaces (symptom trackers, report generators, dashboards) likely use {component.card-dark}, {component.card-glass}, and data visualization patterns not represented here.
• Mobile navigation collapsed state: The hamburger menu, slide-out drawer, or bottom-sheet navigation for mobile breakpoints is not depicted. Design this using {colors.ink} or {colors.canvas} surface with {typography.button-lg} for menu items.
• Sub-brand palettes: If Juno offers tiers (Free, Plus, Enterprise) or sibling products, those brand variations are not captured in this single-page extraction.
• Pixel-exact values for photographic tint: The {colors.accent-blue-gray} (#547c96) hero background is detected as an explicit CSS background on the hero section class, confirming it as a deliberate tint rather than photo-dependent. However, exact blend-mode (if any beyond simple background-color) requires visual verification.
• Accessibility contrast ratios for hero text: White (#ffffff) text over {colors.accent-blue-gray} (#547c96) passes WCAG AA for large text (the 216px and 44.64px sizes qualify) but should be verified with the actual photographic composite (scrim + tint + photo luminance variation) using a contrast checker tool.
• Custom SVG assets: The Juno mascot/character referenced in juno-gif-float and report-juno-float animations is not visually described here — its design, proportions, and color treatment (likely white or brand-colored simple figure) require separate asset specification.
• Footer complete contents: While {component.footer} defines the container treatment, specific footer link organization, social icon selection, and legal text hierarchy are not captured in the above-fold viewport.