ada___style_reference:
  info: "> Daylight gallery with pastel punctuation — a quiet off-white room where four jewel-tone colors are allowed to speak, and everything else stays in charcoal."

  theme: "light"

  ada_operates_as_a_daylight_gallery: "an off-white canvas with generous breathing room, a single humanist sans-serif doing all the voice work, and jewel-toned accent colors that appear only as deliberate punctuation marks. The visual system resists decoration — no gradients on buttons, no drop shadows on cards, no chrome competing with content. Instead, identity comes from a small, disciplined palette (forest green, periwinkle blue, candy pink, butter yellow) used as left-edge accent bars on stat cards and as filled pill buttons. Hierarchy is built through size contrast and whitespace, not color volume. Surfaces sit on a warm #f9f9f9 ground with #ffffff cards floating above. The hero's defining move is a heavily blurred photographic background that feels like looking through frosted glass — it adds warmth and depth without competing with the white headline that reads like editorial typography."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Inkstone | `#0a0b0c` | `--color-inkstone` | Primary text, body copy, headings, hairline borders, dark UI surfaces — the near-black backbone of the entire interface, used at massive scale for borders and typography |"
    info: "| Bone | `#f9f9f9` | `--color-bone` | Page canvas, section backgrounds, subtle surface tier beneath cards — a warm off-white that softens the contrast of the interface |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, elevated panels, chat widget container, inputs — the brightest tier of the surface stack |"
    info: "| Ash | `#d8d8d8` | `--color-ash` | Decorative SVG fills, disabled input borders, neutral dividers |"
    info: "| Plum Ash | `#392c38` | `--color-plum-ash` | Muted card borders and dark surface tints — a desaturated plum that appears on secondary containers |"
    info: "| Forest Depth | `#00543d` | `--color-forest-depth` | Primary brand identity, filled dark buttons, dark accent bar on stat cards, announcement bar background — deep green that signals authority and trust without corporate blandness |"
    info: "| Periwinkle | `#abcbf9` | `--color-periwinkle` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Candy Pink | `#ffbbfc` | `--color-candy-pink` | Accent bar on stat cards, decorative soft surface washes — the most playful of the four accents, used sparingly to add warmth |"
    info: "| Butter | `#fce88b` | `--color-butter` | Accent bar on stat cards, warmth punctuation — the warmest accent, appearing only on the 4th stat card as a visual rhythm closer |"

  tokens___typography:

    roobert___sole_typeface_across_the_entire_interface___body__headings__buttons__nav__footer__cards__inputs__weight_stays_at_400_throughout__hierarchy_is_built_purely_through_size__not_bold_light_contrast__the_geometric_humanist_proportions_give_headlines_a_literary_quality_while_the_single_weight_forces_restraint_____font_roobert:
      - "**Substitute:** Inter, DM Sans, or Söhne"
      - "**Weights:** 400"
      - "**Sizes:** 12, 14, 15, 16, 18, 20, 24, 32, 36, 48, 60, 72"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** normal at all sizes — the typeface's own proportions carry the rhythm"
      - "**Role:** Sole typeface across the entire interface — body, headings, buttons, nav, footer, cards, inputs. Weight stays at 400 throughout; hierarchy is built purely through size, not bold/light contrast. The geometric humanist proportions give headlines a literary quality while the single weight forces restraint."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.56 | — | `--text-body` |"
      info: "| subheading | 20px | 1.38 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 48px | 1.11 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 32px |"
      info: "| cards | 8px |"
      info: "| inputs | 4px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8-16px"

  components:

    announcement_bar:
      role: "Full-width dark utility bar at the very top of the page"

      info: "Background #0a0b0c, full-bleed height ~40px, white text at 14px Roobert 400, left-aligned label text, right-aligned dark pill button (#00543d background, white text, 9999px radius, 8px 16px padding) with a subtle border."

    primary_navigation:
      role: "Sticky top navigation with logo, dropdown menus, and primary CTA"

      info: "White background, ~64px height, Ada wordmark logo at left, horizontal nav links in #0a0b0c at 15px with dropdown chevrons, user avatar icon, and a dark pill CTA button ('Speak to an expert') with #0a0b0c background, white text, 9999px radius, 12px 24px padding, and a circular arrow icon."

    hero_section:
      role: "Full-viewport landing area with headline, subtext, and product demo"

      info: "Full-bleed background with heavily blurred photographic gradient (warm amber/teal organic shapes — feels like frosted glass over a landscape). Left column: massive headline at 60-72px Roobert 400 in #0a0b0c, letter-spacing normal, line-height ~1.05, stacked vertically. Subtext at 18px in #0a0b0c at 70% opacity. Right column: floating white card (8px radius, subtle 1px #f9f9f9 border) showing a chat widget with brand partner logo, avatar dots, and a dark pill button ('Listen to a real call') with arrow icon."

    logo_strip:
      role: "Social proof band showing enterprise customer logos"

      info: "Horizontal row of 7-8 monochrome partner logos on #f9f9f9 background, evenly spaced, each rendered in #0a0b0c at low contrast (around 60% opacity), 40-60px tall, no accompanying heading on the strip itself."

    stat_card_4_color_variant_set:
      role: "Metric showcase cards with signature colored left-edge accent bars"

      info: "White card (#ffffff) with 8px radius, no shadow, 24px padding. A 4px-wide vertical color bar runs the full left edge — the bar color is the defining visual: #00543d Forest, #ffbbfc Candy Pink, #abcbf9 Periwinkle, #fce88b Butter — one card per color, creating a four-beat rhythm. Inside: large metric number at 36-48px Roobert 400 in #0a0b0c, followed by a two-line descriptor at 14-16px in #0a0b0c at 70% opacity."

    feature_card_image_variant:
      role: "Full-bleed image card with overlay text and circular arrow CTA"

      info: "Rectangular card filling its grid column, full-bleed photographic image (no padding around the image), dark gradient overlay at the bottom (transparent to ~40% #0a0b0c) so text remains legible. White text at 32px Roobert 400 for the card title, body at 14-16px white at 85% opacity. A 48px circular dark button (#0a0b0c, white right-arrow icon) sits in the bottom-right corner with 8px radius."

    circular_arrow_button:
      role: "Reusable CTA element on cards and content blocks"

      info: "48px diameter circle, #0a0b0c background, white right-pointing arrow (→) at 18px, 8px radius (appears fully rounded). Used consistently as a secondary action affordance on feature cards."

    section_heading_block:
      role: "Centered text block introducing a new content section"

      info: "Centered headline at 36-48px Roobert 400 in #0a0b0c, line-height ~1.2, one or two lines max. Optional subtext at 18px below in #0a0b0c at 65% opacity, max-width 640px, centered. No decorative elements, no eyebrow tag."

    chat_widget_card:
      role: "Floating product demo card in the hero"

      info: "White card with 8px radius, subtle 1px #f9f9f9 border, generous padding (~24px). Contains a partner brand wordmark at top-left, a row of small status dots at top-right, a 32px medium-weight label ('AI agent'), and 2-3 lines of monospace-style conversation text at 14px in #0a0b0c. A dark pill button is attached or positioned adjacent."

  do_s_and_don_ts:

    do:
      - "Use Roobert 400 at every size — never switch to bold/light to create hierarchy; let size alone do the work."
      - "Apply the four accent colors (#00543d, #abcbf9, #ffbbfc, #fce88b) only as 4px left-edge bars on stat cards or as single filled action surfaces — never as broad background fills."
      - "Set card radius to 8px, input radius to 4px, and button radius to 9999px (pill) — the three-tier radius system is non-negotiable."
      - "Keep the canvas at #f9f9f9 and elevate cards to #ffffff — this two-tier surface system is the only elevation the design needs."
      - "Use #0a0b0c for all borders at 1px — the design relies on hairline borders, not shadows, to define regions."
      - "Maintain generous section gaps of 80px between content bands; never compress below 48px."
      - "Anchor every full-bleed image card with a dark gradient overlay (transparent → ~40% #0a0b0c) so overlaid text stays legible."

    don_t:
      - "Do not introduce drop shadows on cards or buttons — the design is flat by philosophy, relying on hairline borders and surface color contrast."
      - "Do not use the four accent colors as text colors — they are decorative bars and surface fills only, never for body copy or headings."
      - "Do not apply gradients to buttons, cards, or navigation — the only gradient in the system is the hero background."
      - "Do not use a second typeface or introduce bold/light weights of Roobert — the single-weight discipline is a signature choice."
      - "Do not place color on more than one element per viewport section — the system breathes through restraint; clustering accents destroys the rhythm."
      - "Do not use #ffffff as a page background — it kills the warmth; always use #f9f9f9 for the canvas and #ffffff only for elevated cards."
      - "Do not add decorative dividers, icon badges, or section eyebrows — section transitions are whitespace-driven, no visual chrome needed."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#f9f9f9` | Page background, section bands, the base layer everything sits on |"
    info: "| 2 | Card | `#ffffff` | Elevated card surfaces, chat widget, feature panels — floats above the canvas |"
    info: "| 3 | Dark Surface | `#0a0b0c` | Announcement bar, pill buttons, circular arrow CTAs, image overlay gradient end — the only dark surface in the system |"
    info: "| 4 | Accent Wash | `#abcbf9` | Soft tinted backgrounds for highlighted regions, nav chips, soft callouts |"

  elevation:

    info: "The design system deliberately avoids drop shadows as an elevation mechanism. Depth and hierarchy are established through a three-step surface stack (#f9f9f9 canvas → #ffffff card → #0a0b0c dark surface) combined with 1px #0a0b0c hairline borders at extremely low opacity. The result is a flat, editorial feel where the only depth cue is surface color contrast — no shadow blur, no z-axis simulation."

  imagery:

    info: "Imagery is used in two distinct registers. The hero background is a heavily blurred photographic gradient (organic amber/teal/blue shapes) that reads as atmospheric warmth rather than literal subject — it functions as a colored ground, not a picture. Feature cards use full-bleed editorial photography: people in collaborative settings, a person presenting at a screen, hands on a laptop showing a product UI — always cropped tight, always treated with a dark gradient overlay at the bottom for text legibility. There is no illustration system; no flat graphics, no icon-based storytelling. Partner logos in the social-proof strip are rendered in monochrome #0a0b0c at reduced opacity, creating a quiet horizontal rhythm."

  layout:

    info: "The page follows a max-width 1200px centered column model with full-bleed section bands that break out to the viewport edges. The hero is a two-column split: oversized editorial headline left (60% width), product demo card floating right (40% width), both vertically centered against the full-bleed blurred background. Below the hero, sections alternate between #f9f9f9 and #ffffff bands with 80px vertical gaps. The stat block uses a 4-column equal grid with each card holding one accent color bar. The feature section uses a 3-column equal grid of full-bleed image cards. Headlines are consistently centered and oversized (36-72px); body text is left-aligned within cards but centered in section intros. Navigation is a clean horizontal bar with dropdown menus — no sidebar, no mega-menu chrome. The overall rhythm is spacious and editorial: each content block gets full visual breathing room before the next begins."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0a0b0c"
    - "background: #f9f9f9"
    - "card surface: #ffffff"
    - "border: #0a0b0c at 1px (use at 8-15% opacity for subtle hairlines)"
    - "dark surface / button: #0a0b0c"
    - "primary action: #abcbf9 (filled action)"

    example_component_prompts:
    - "*Hero with frosted background*: Full-bleed background using a linear-gradient(oklch(0.5555 0 0), oklch(0.331 0.0104 253.98)) overlaid on a blurred organic photographic wash. Left column: headline at 72px Roobert 400, #0a0b0c, line-height 1.05. Subtext at 18px Roobert 400, #0a0b0c at 70% opacity. Right column: white card (#ffffff, 8px radius, 1px #f9f9f9 border, 24px padding) containing a 14px conversation block in monospace-style Roobert and a dark pill button (#0a0b0c, white text, 9999px radius, 12px 24px padding) with a 16px right-arrow icon."

    - "*Stat card with accent bar*: White card (#ffffff, 8px radius, no shadow, 24px padding). A 4px-wide vertical bar in #ffbbfc runs the full left edge. Metric number at 48px Roobert 400, #0a0b0c. Descriptor at 14px Roobert 400, #0a0b0c at 70% opacity, two lines max."

    - "*Feature image card*: Full-bleed photographic image filling the card (no internal padding around the image). Bottom 40% of the card covered by a linear-gradient(transparent, rgba(10,11,12,0.5)) overlay. White title at 32px Roobert 400, white body at 14px Roobert 400 at 85% opacity. A 48px circular dark button (#0a0b0c, 8px radius, white → arrow) positioned at bottom-right with 16px margin."

    - "Create a Primary Action Button: #abcbf9 background, #0a0b0c text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "*Section intro*: Centered headline at 48px Roobert 400, #0a0b0c, max-width 720px. Subtext at 18px Roobert 400, #0a0b0c at 65% opacity, max-width 640px, centered below. 40px gap between headline and subtext. No eyebrow, no decorative line."

  similar_brands:

    - "**Linear** — Same single-weight humanist sans-serif discipline, flat surfaces with hairline borders, and restrained accent color usage that appears as deliberate punctuation"
    - "**Pitch** — Same editorial oversized-headline approach on generous whitespace, with a single dark pill button as the primary action pattern"
    - "**Notion** — Same warm off-white canvas (#f9f9f9 feel) with flat cards floating above, and a humanist sans doing all the voice work at a single weight"
    - "**Arc Browser** — Same playful use of pastel accent colors as small visual punctuation against a near-monochrome base, with oversized editorial typography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-inkstone: #0a0b0c;
          --color-bone: #f9f9f9;
          --color-paper: #ffffff;
          --color-ash: #d8d8d8;
          --color-plum-ash: #392c38;
          --color-forest-depth: #00543d;
          --color-periwinkle: #abcbf9;
          --color-candy-pink: #ffbbfc;
          --color-butter: #fce88b;
        
          /* Typography — Font Families */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.38;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 28px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-nav: 32px;
          --radius-cards: 8px;
          --radius-inputs: 4px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas: #f9f9f9;
          --surface-card: #ffffff;
          --surface-dark-surface: #0a0b0c;
          --surface-accent-wash: #abcbf9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-inkstone: #0a0b0c;
          --color-bone: #f9f9f9;
          --color-paper: #ffffff;
          --color-ash: #d8d8d8;
          --color-plum-ash: #392c38;
          --color-forest-depth: #00543d;
          --color-periwinkle: #abcbf9;
          --color-candy-pink: #ffbbfc;
          --color-butter: #fce88b;
        
          /* Typography */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.38;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 28px;
          --radius-3xl-2: 32px;
        }