merlin___style_reference:
  info: "> Handwritten margin notes on white paper. A calm off-white page where one vivid green dot says yes, soft pastel light bleeds in from the edges, and Inter does the heavy talking."

  theme: "light"

  info: "Merlin uses a hushed, paper-like productivity language: a warm off-white canvas, flat white surfaces, a single vivid green accent that makes the primary action feel like a green light turning on, and soft pastel atmospheric gradients reserved for the page's top and the product backdrop. Type is bold and confident at display sizes but quiet at body sizes — Inter carries the entire voice in one family, letting weight and tracking do all the work. The system feels hand-touched: handwritten green annotations in a script style sit beside machine-clean sans-serif, bridging warmth and product precision. Components stay close to the page — thin hairlines replace heavy elevation, pills replace boxes, and the nav floats as a capsule rather than anchoring as a bar."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#f5f5f4` | `--color-paper-white` | Page canvas — the warm off-white ground the entire page sits on |"
    info: "| Card Snow | `#ffffff` | `--color-card-snow` | Card surfaces, product mockup backgrounds, floating nav capsule |"
    info: "| Blush Mist | `#fdf8f7` | `--color-blush-mist` | Subtle warm-tinted surface for accent cards or highlighted zones |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary headings, strong borders, icon strokes — maximum contrast |"
    info: "| Body Charcoal | `#1c1d1f` | `--color-body-charcoal` | Body text, secondary borders — near-black that softens display ink |"
    info: "| Steel Gray | `#6a6b6c` | `--color-steel-gray` | Icon fills/strokes, secondary borders, muted interface elements |"
    info: "| Graphite | `#808080` | `--color-graphite` | Muted headings, link borders, tertiary text |"
    info: "| Ash | `#aaaaaa` | `--color-ash` | Light borders, disabled text, subtle separators |"
    info: "| Hairline | `#cccccc` | `--color-hairline` | Divider lines, light background washes |"
    info: "| Mist | `#dddddd` | `--color-mist` | Card borders, link underlines, soft outlines |"
    info: "| Cloud | `#eeeeee` | `--color-cloud` | Lightest borders, soft card outlines, gentle separators |"
    info: "| Signal Green | `#34c759` | `--color-signal-green` | Green action color for filled buttons, selected navigation states, and focused conversion moments |"
    info: "| Link Blue | `#3575f8` | `--color-link-blue` | Inline links, highlight text within body copy |"
    info: "| Dawn Wash | `linear-gradient(180deg, rgb(150, 223, 255) 0%, rgb(237, 237, 237) 58.17%, rgb(221, 221, 221) 100%)` | `--color-dawn-wash` | Atmospheric top-of-page gradient — soft sky blue bleeding down into warm gray, the page's only colored light source |"

  tokens___typography:

    inter___sole_typeface___display_headlines_at_60_70px_weight_400_500_with_negative_tracking__body_at_14_16px_weight_400__uppercase_labels_at_9_10px_with_wide_positive_tracking__the_whisper_to_shout_range_300_600_lets_one_family_carry_hierarchy_without_ever_leaving_the_page_____font_inter:
      - "**Substitute:** Inter via Google Fonts"
      - "**Weights:** 300, 400, 500, 600"
      - "**Sizes:** 9, 10, 12, 13, 14, 16, 20, 23, 25, 26, 30, 40, 60, 70"
      - "**Line height:** 1.00, 1.13, 1.15, 1.17, 1.40, 1.50, 1.55"
      - "**Letter spacing:** -0.043em at 70px, -0.031em at 60px, 0.025em at 13px, 0.031em at 12px, 0.036em at 10px, 0.038em at 9px, 0.042em at 10px (uppercase tracking)"
      - "**Role:** Sole typeface — display headlines at 60-70px weight 400-500 with negative tracking, body at 14-16px weight 400, uppercase labels at 9-10px with wide positive tracking. The whisper-to-shout range (300-600) lets one family carry hierarchy without ever leaving the page."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | 0.036px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.15 | — | `--text-heading` |"
      info: "| heading-lg | 60px | 1.13 | -1.86px | `--text-heading-lg` |"
      info: "| display | 70px | 1.13 | -3.01px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| inputs | 12.5px |"
      info: "| buttons | 100px |"
      info: "| nav-capsule | 100px |"
      info: "| product-mockup | 30px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(235, 232, 233) 1px 3px 1px 0px` | `--shadow-subtle` |"
      info: "| sm | `rgb(238, 238, 238) 0px 3px 8px 0px` | `--shadow-sm` |"
      info: "| xl | `rgba(0, 0, 0, 0.25) 0px 40px 60px 0px` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 2px 2px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgb(238, 238, 238) 3px 6px 1px 0px` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgb(221, 221, 221) 0px 2px 1px 0px` | `--shadow-subtle-4` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    primary_cta_button:
      role: "The single filled action on the page — the only chromatic filled element"

      pill_shaped__100px_border_radius__fill: "#34c759 (Signal Green). Text: #ffffff, Inter 14px weight 500, no tracking override. Padding: 10px 20px. No border. The green against the paper-white canvas is the page's only warm chroma — it must stay rare to remain meaningful."

    ghost_text_button:
      role: "Secondary inline actions with no visual weight"

      transparent_fill__no_border__text: "#1c1d1f, Inter 14px weight 400. Used for 'Pricing' and 'Manifesto' in the floating nav."

    outline_sign_up_button:
      role: "Nav-level action that sits beside ghost text but needs more presence"

      info: "Transparent fill, 1px border #1c1d1f, 100px radius. Text: #1c1d1f, Inter 14px weight 500. Rounded pill matching the nav capsule curvature."

    floating_navigation_capsule:
      role: "Page-level navigation that hovers at the bottom-center"

      info: "White (#ffffff) capsule, 100px border-radius, shadow rgb(238,238,238) 0px 3px 8px 0px. Contains logo icon, ghost text links (Pricing, Manifesto), Login text, and outlined Sign-up button. Floats above content with generous bottom margin."

    social_proof_badge:
      role: "Trust indicator above the headline"

      info: "Small pill with green dot indicator, text '7,000+ Merlin' in #1c1d1f at ~12px. Dot: 4px circle #34c759."

    handwritten_annotation:
      role: "Warm, personal margin note — the signature human touch"

      info: "Script/handwritten font in #34c759 (Signal Green), ~20px. Used as decorative labels ('Imagine', 'Try merlin free for 7 days') with small curved arrow connectors. This is the only element that breaks the sans-serif system — it introduces a second voice that feels like a note from a friend."

    display_headline:
      role: "Page-level statement — the largest typographic element"

      info: "Inter 60-70px weight 400, color #000000, letter-spacing -0.031em to -0.043em. Multi-line with inline brand mark. Line-height 1.13."

    body_description:
      role: "Sub-headline supporting text"

      info: "Inter 16px weight 400, color #6a6b6c, line-height 1.5. Centered, max-width constrained for readability."

    logo_trust_bar:
      role: "Row of client/company logos below the CTA"

      info: "Horizontal row of grayscale logos (Notion, Salesforce, Harvard, HubSpot, McKinsey) with 'Used by professionals at' label above. Logos rendered in #808080 or #6a6b6c for monochrome treatment."

    product_mockup_card:
      role: "Laptop/tablet frame containing the product UI screenshot"

      info: "Rounded rectangle 30px radius, large drop-shadow rgba(0,0,0,0.25) 0px 40px 60px 0px. Contains a Van Gogh-style painted landscape background behind a white product UI window. The shadow is dramatic — this is the page's one moment of depth."

    feature_description_block:
      role: "Section-level statement beside product mockups"

      info: "Bold Inter 20-25px weight 500 statement, left-aligned. Accompanied by a handwritten annotation in green above it. No card chrome — sits directly on the canvas."

  do_s_and_don_ts:

    do:
      - "Use Inter for all text — no secondary families except the handwritten annotation script"
      - "Use #34c759 exclusively for the primary CTA and handwritten annotations — no other green or chromatic accent"
      - "Apply 100px border-radius to all buttons and the floating nav capsule"
      - "Set page canvas to #f5f5f4 and card surfaces to #ffffff — never invert this stack"
      - "Use the Dawn Wash gradient only at the top of the page as atmospheric light — never as a section divider"
      - "Write display headlines at 60-70px with letter-spacing -0.031em to -0.043em and weight 400 — not 700"
      - "Place the product mockup with its 40px 60px deep shadow as the only dramatic elevation on the page"

    don_t:
      - "Don't add additional chromatic accents — blue (#3575f8) is only for inline links, not buttons or icons"
      - "Don't use heavy borders — prefer #eeeeee or #dddddd at 1px for all separators"
      - "Don't introduce a second sans-serif — Inter carries the entire system alone"
      - "Don't use box-shadow on standard cards — the product mockup shadow is the page's only dramatic elevation"
      - "Don't fill buttons with black — the only filled button color is Signal Green"
      - "Don't use sharp corners below 12.5px — minimum radius is 12.5px on inputs, 20px on cards"
      - "Don't use uppercase body text — uppercase tracking (+0.036em) is reserved for 9-10px labels only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f5f5f4` | Warm off-white ground covering the entire page |"
    info: "| 1 | Card Snow | `#ffffff` | Standard card and component surface |"
    info: "| 2 | Blush Mist | `#fdf8f7` | Warm-tinted accent surface for featured elements |"
    info: "| 3 | Atmospheric Wash | `#96dfff` | Gradient zone — soft blue light at page top |"

  elevation:

    - "**Product mockup card:** `rgba(0, 0, 0, 0.25) 0px 40px 60px 0px`"
    - "**Standard card:** `rgb(235, 232, 233) 1px 3px 1px 0px`"
    - "**Floating nav capsule:** `rgb(238, 238, 238) 0px 3px 8px 0px`"

  imagery:

    info: "Product screenshots are the dominant visual: full laptop/tablet frames showing the Merlin inbox UI with a Van Gogh Starry Night-style painted landscape as the app's background — this painted backdrop is the brand's signature visual moment. Hands holding the device ground the mockup in human use. Logo trust bar uses flat grayscale company marks. The top of the page bleeds a soft blue-to-gray gradient as atmospheric light. No photography of people, no abstract 3D renders, no illustration outside the painted product backdrop."

  layout:

    info: "Centered, max-width 1200px page model with generous vertical breathing room. Hero: centered headline stack on paper-white canvas with a soft gradient bleed at the very top — headline, subtext, and CTA all center-aligned. Section 2: product mockup card centered with a bold left-aligned statement beside or above it, anchored by a handwritten green annotation. Floating nav: pill-shaped capsule at bottom-center, persistent. Sections separated by 80px gaps with no dividers — the off-white canvas flows continuously. Content density is compact but unhurried: 10px element gaps, 20px card padding, but 80px between sections creates the spacious feel."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (headings), #1c1d1f (body), #6a6b6c (muted)"
    - "background: #f5f5f4 (canvas), #ffffff (cards)"
    - "border: #eeeeee (light), #dddddd (card), #1c1d1f (button outline)"
    - "accent: #34c759 (Signal Green — CTA + handwriting)"
    - "gradient: Dawn Wash — linear-gradient(180deg, #96dfff 0%, #ededed 58%, #dddddd 100%)"
    - "primary action: #34c759 (filled action)"

    3_5_example_component_prompts:

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

    - "**Product Mockup Card**: 30px border-radius, shadow rgba(0,0,0,0.25) 0px 40px 60px 0px. Inside: painted landscape background (Van Gogh-style blue sky with swirls) framing a white product UI window with inbox cards. The mockup sits centered on the canvas with 80px margin above and below."

    - "**Floating Nav Capsule**: White (#ffffff) pill, 100px radius, shadow rgb(238,238,238) 0px 3px 8px 0px. Contents left to right: logo icon, 'Pricing' ghost text, 'Manifesto' ghost text, 'Login' ghost text, 'Sign up' outlined button (1px border #1c1d1f, 100px radius, Inter 14px weight 500). All text #1c1d1f. Position: bottom-center, fixed, 24px from bottom."

    - "**Feature Statement Block**: Handwritten green annotation ('Imagine') in script font #34c759, ~20px, with a curved arrow connector. Below: bold statement in Inter 25px weight 500, #000000, left-aligned, max-width 600px. No card chrome — sits directly on canvas."

    - "**Trust Logo Bar**: 'Used by professionals at' label in Inter 10px weight 500, uppercase, #808080, letter-spacing 0.036em, centered. Below: horizontal row of 5 grayscale company logos in #808080, evenly spaced, ~20px gap between each."

  design_philosophy:

    info: "Merlin's visual system runs on three tensions: **paper and pixel** (off-white canvas with crisp Inter), **typewriter and handwriting** (bold sans-serif headlines with script annotations), and **flat and deep** (mostly borderless surfaces with one dramatic shadow on the product mockup). These pairings are what make it feel human rather than corporate. The single green accent and the painted product background are the only chromatic moments — everything else is grayscale, which means when color does appear it carries all the weight."

  similar_brands:

    - "**Linear** — Same single-accent-color restraint with Inter typography and generous whitespace"
    - "**Notion AI** — Paper-warm canvas with off-white tones, soft borders, and handwritten-feeling annotations"
    - "**Arc Browser** — Bold display headlines with tight tracking, pill-shaped CTAs, and product-forward hero"
    - "**Raycast** — Compact density, Inter-only typography, and a single vivid accent against neutral surfaces"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #f5f5f4;
          --color-card-snow: #ffffff;
          --color-blush-mist: #fdf8f7;
          --color-ink-black: #000000;
          --color-body-charcoal: #1c1d1f;
          --color-steel-gray: #6a6b6c;
          --color-graphite: #808080;
          --color-ash: #aaaaaa;
          --color-hairline: #cccccc;
          --color-mist: #dddddd;
          --color-cloud: #eeeeee;
          --color-signal-green: #34c759;
          --color-link-blue: #3575f8;
          --color-dawn-wash: #96dfff;
          --gradient-dawn-wash: linear-gradient(180deg, rgb(150, 223, 255) 0%, rgb(237, 237, 237) 58.17%, rgb(221, 221, 221) 100%);
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.036px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.4;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -1.86px;
          --text-display: 70px;
          --leading-display: 1.13;
          --tracking-display: -3.01px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 12.5px;
          --radius-xl-2: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
          --radius-full: 60px;
          --radius-full-2: 65px;
          --radius-full-3: 75px;
          --radius-full-4: 100px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-inputs: 12.5px;
          --radius-buttons: 100px;
          --radius-nav-capsule: 100px;
          --radius-product-mockup: 30px;
        
          /* Shadows */
          --shadow-subtle: rgb(235, 232, 233) 1px 3px 1px 0px;
          --shadow-sm: rgb(238, 238, 238) 0px 3px 8px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 40px 60px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-3: rgb(238, 238, 238) 3px 6px 1px 0px;
          --shadow-subtle-4: rgb(221, 221, 221) 0px 2px 1px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f5f5f4;
          --surface-card-snow: #ffffff;
          --surface-blush-mist: #fdf8f7;
          --surface-atmospheric-wash: #96dfff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #f5f5f4;
          --color-card-snow: #ffffff;
          --color-blush-mist: #fdf8f7;
          --color-ink-black: #000000;
          --color-body-charcoal: #1c1d1f;
          --color-steel-gray: #6a6b6c;
          --color-graphite: #808080;
          --color-ash: #aaaaaa;
          --color-hairline: #cccccc;
          --color-mist: #dddddd;
          --color-cloud: #eeeeee;
          --color-signal-green: #34c759;
          --color-link-blue: #3575f8;
          --color-dawn-wash: #96dfff;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.036px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.4;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -1.86px;
          --text-display: 70px;
          --leading-display: 1.13;
          --tracking-display: -3.01px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 12.5px;
          --radius-xl-2: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
          --radius-full: 60px;
          --radius-full-2: 65px;
          --radius-full-3: 75px;
          --radius-full-4: 100px;
        
          /* Shadows */
          --shadow-subtle: rgb(235, 232, 233) 1px 3px 1px 0px;
          --shadow-sm: rgb(238, 238, 238) 0px 3px 8px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 40px 60px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-3: rgb(238, 238, 238) 3px 6px 1px 0px;
          --shadow-subtle-4: rgb(221, 221, 221) 0px 2px 1px 0px;
        }