contrast___style_reference:
  info: "> neon coral signal on white silence"

  theme: "light"

  info: "Contrast runs on white-silence interrupted by one vivid coral signal. The entire visual system is deliberately restrained — generous whitespace, monochrome surfaces, heavy geometric type — so that the single warm-red CTA can do all the emotional work. Cards float on barely-visible shadows (0.06 alpha), radii are generous and pill-heavy, and the coral accent repeats as a system: buttons, borders, icons, badges, decorative washes. Black text is near-pure (#0e0f10) rather than softened gray, giving the headlines weight and authority that the otherwise delicate chrome would otherwise lack. Layout alternates between full-bleed centered hero stacks and dense multi-column card grids, with a persistent floating webinar widget anchoring the lower-left."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Coral | `#ff5065` | `--color-signal-coral` | Primary action buttons, active links, icon accents, decorative badges — the only chromatic element allowed to fill space |"
    info: "| Ember Wash | `#ff7a59` | `--color-ember-wash` | Secondary warm accent for icon borders, decorative fills, and illustration strokes when coral needs a lighter companion |"
    info: "| Persimmon | `#ff5c35` | `--color-persimmon` | Deepest warm accent for icon borders, decorative fills, and hero illustration strokes |"
    info: "| Coral Mist | `#ffe9eb` | `--color-coral-mist` | Soft pink-tinted wash for accent backgrounds, hover surfaces, and decorative bands |"
    info: "| Carbon Ink | `#0e0f10` | `--color-carbon-ink` | Primary text, filled neutral buttons, dark surface backgrounds |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text on dark fills, outlined button borders |"
    info: "| Fog | `#f4f4f8` | `--color-fog` | Subtle section backgrounds, tertiary surface layer |"
    info: "| Graphite | `#2f3133` | `--color-graphite` | Badge fills, dark nav backgrounds, subtle card borders |"
    info: "| Slate | `#7a7b7c` | `--color-slate` | Muted helper text, icon strokes, secondary borders, list dividers |"
    info: "| Smoke | `#666666` | `--color-smoke` | Secondary text on light surfaces |"

  tokens___typography:

    gilroy___all_ui_and_display_text__used_at_56px_weight_700_for_hero_headlines_with_extremely_tight_leading__0_80__creating_chunky_display_blocks__weight_600_for_section_headings_at_48px__weight_500_600_for_body_16_18px__weight_500_for_nav_and_labels_at_14px____font_gilroy:
      - "**Substitute:** Sora, DM Sans, or Manrope"
      - "**Weights:** 500, 600, 700"
      - "**Sizes:** 14, 16, 18, 20, 48, 56"
      - "**Line height:** 1.0–1.2 for display, 1.4–1.6 for body, 0.80–0.88 for tightest headline lockups"
      - "**Letter spacing:** normal (0) at all sizes — tracking is never adjusted, letting the geometric letterforms do the work"
      - "**Role:** All UI and display text. Used at 56px weight 700 for hero headlines with extremely tight leading (~0.80), creating chunky display blocks. Weight 600 for section headings at 48px, weight 500–600 for body 16–18px, weight 500 for nav and labels at 14px"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.56 | — | `--text-body` |"
      info: "| subheading | 20px | 1.6 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 48px | 1.11 | — | `--text-heading` |"
      info: "| display | 56px | 0.8 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| cards | 24px |"
      info: "| badges | 100px |"
      info: "| images | 100px |"
      info: "| buttons | 100px |"
      info: "| largeCards | 40px |"
      info: "| smallCards | 16px |"
      info: "| extraLargeCards | 120px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(38, 42, 62, 0.06) 0px 5px 25px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    coral_filled_button:
      role: "Primary call-to-action across the site"

      info: "Background #ff5065, white text, 100px border-radius (pill), padding 12px 24px, font-weight 500 at 16px, Gilroy. Used for 'Start for free' and 'Register now' actions."

    dark_filled_button:
      role: "Secondary action in the navigation"

      info: "Background #0e0f10, white text, 100px border-radius, 8px 16px padding, 14px Gilroy weight 500. Used for 'Log in' in the header."

    outlined_ghost_button:
      role: "Secondary action paired with coral CTAs"

      info: "White background, 1px black border (#000000), black text, 100px border-radius, 12px 24px padding, 16px Gilroy weight 500. Used for 'Book a demo'."

    navigation_bar:
      role: "Top-level site navigation"

      info: "White background, sticky, horizontal layout with logo left, nav links centered, actions right. Links are 16px Gilroy 500 in #0e0f10. 'Partners' carries a small inline 'new' badge in coral."

    new__diagonal_badge:
      role: "Marker for recently added nav items"

      info: "Coral #ff5065 text on white, small italic 12px, placed inline after a nav label. Repeats as a decorative marquee band in the pink-coral diagonal stripe."

    hero_headline_block:
      role: "Opening screen title and subtitle"

      info: "Centered layout, 56px Gilroy weight 700, #0e0f10, line-height 0.80 (tight stack). Subtitle at 18px weight 500 in #0e0f10. Below: two CTAs (coral filled + ghost outlined)."

    logo_marquee_strip:
      role: "Social proof band"

      info: "Single row of client logos in grayscale on white, no dividers, even spacing, sits between hero and first content section."

    feature_screenshot_card:
      role: "Product showcase panel"

      info: "White surface, 16px or 24px border-radius, 0 5px 25px rgba(38,42,62,0.06) shadow. Contains a product UI screenshot above a short label. The shadow is deliberately faint — cards sit on the page rather than float above it."

    testimonial_card:
      role: "Social proof quote card"

      info: "White background, 24px radius, subtle shadow, 24px padding. Five coral stars at top, headline at 18px weight 600, quote at 16px weight 500, author with circular 100px avatar and name + role at 14px."

    floating_webinar_widget:
      role: "Persistent lead-capture overlay"

      info: "Fixed bottom-left card, 16px radius, white surface, soft shadow. Contains 'Upcoming webinar' label with close icon, a 100px-radius thumbnail, webinar title at 16px weight 600, and a full-width coral CTA ('Register now') at 100px radius."

    coral_diagonal_marquee_band:
      role: "Decorative announcement strip"

      info: "Coral-tinted #ffe9eb background with repeating 'new' text on a 45° diagonal angle, creating a ribbon effect between sections."

    rating_badge_row:
      role: "Trust indicator cluster"

      info: "Row of platform icons (G2, Capterra, HubSpot) paired with star counts and ratings at 14px Gilroy 500. Coral stars, black text, light spacing between groups."

    footer_link_section:
      role: "Site footer navigation"

      info: "Dark or white background, column-based link groupings, 16px Gilroy 500 in #0e0f10 or #ffffff, 8px row gap between links."

  do_s_and_don_ts:

    do:
      - "Use #ff5065 as the sole filled chromatic color for primary actions, active states, and icon accents"
      - "Apply 100px border-radius to all buttons, badges, and small images for the signature pill shape"
      - "Set display headlines at 56px Gilroy weight 700 with line-height 0.80 for tight stacked blocks"
      - "Use #0e0f10 (not #000000) for primary text to keep warmth in the dark tones"
      - "Apply the single shadow token 0 5px 25px rgba(38,42,62,0.06) to all elevated cards"
      - "Space sections at 80px vertical gaps with 24px card padding as the default interior rhythm"
      - "Keep the floating webinar widget pattern in the bottom-left as a persistent lead-capture anchor"

    don_t:
      - "Don't introduce additional chromatic colors beyond coral, ember, persimmon, and the pink wash"
      - "Don't use heavy or dark shadows — the entire elevation system relies on 0.06 alpha only"
      - "Don't soften body text below weight 500 — Gilroy's lighter weights are reserved for nothing here"
      - "Don't use sharp corners (0–4px) on any user-facing surface except small nav details"
      - "Don't add background colors to body copy sections — the white silence IS the design"
      - "Don't apply letter-spacing adjustments — tracking stays at normal across all sizes"
      - "Don't use photography as hero imagery — product UI screenshots and illustrations carry the visual weight"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background — most of the site is bare white |"
    info: "| 1 | Fog | `#f4f4f8` | Subtle section bands and tertiary containers |"
    info: "| 2 | Card | `#ffffff` | Testimonial cards, feature cards, floating widget — same as canvas but defined by shadow and border |"
    info: "| 3 | Accent Wash | `#ffe9eb` | Coral-tinted decorative backgrounds and banner areas |"
    info: "| 4 | Dark Surface | `#0e0f10` | Inverted sections, filled dark buttons, dark nav blocks |"

  elevation:

    - "**Cards and floating panels:** `0 5px 25px rgba(38, 42, 62, 0.06)`"

  imagery:

    info: "Product UI screenshots are the primary visual asset, shown inside rounded white cards with soft shadows. Photography is absent from marketing surfaces — the product IS the hero. Illustrated icons use coral and persimmon strokes against white. A persistent floating widget (webinar thumbnail) in the lower-left adds a persistent visual anchor. The decorative diagonal 'new' marquee ribbon provides the only non-product visual texture."

  layout:

    info: "Max-width 1200px centered, generous vertical rhythm with ~80px section gaps. Hero is a centered headline stack with two CTAs below. Content alternates between full-bleed centered headline blocks and multi-column card grids (3-column testimonials, 4-column logo marquee). A floating webinar widget persists in the bottom-left corner across scroll. A diagonal coral 'new' marquee band appears as a decorative section divider. Navigation is a sticky white top bar with logo-left, links-center, actions-right."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #0e0f10"
    - "background: #ffffff"
    - "border: #000000 or #7a7b7c"
    - "accent: #ff5065"
    - "muted text: #7a7b7c"
    - "primary action: #ff5065 (filled action)"

    info: "Example Component Prompts:"

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

    - "Create a testimonial card: white #ffffff surface, 24px border-radius, 0 5px 25px rgba(38,42,62,0.06) shadow, 24px padding. Five coral #ff5065 stars at top, quote at 16px Gilroy weight 500, #0e0f10, author row with 100px-radius circular avatar, name at 14px weight 600 and role at 14px weight 500 in #7a7b7c."

    - "Create a floating webinar widget: fixed bottom-left, 16px border-radius, white surface, soft shadow rgba(38,42,62,0.06). 'Upcoming webinar' label at 14px weight 600 in #0e0f10, webinar thumbnail at 100px radius, title at 16px weight 600, full-width coral CTA (#ff5065, white text, 100px radius, 12px padding)."

    - "Create a feature screenshot card: white background, 16px border-radius, 0 5px 25px rgba(38,42,62,0.06) shadow, product UI screenshot filling the card top with 100px top radius, label text at 16px Gilroy weight 500 in #0e0f10 below."

    - "Create a navigation bar: white sticky top bar, logo left, centered nav links at 16px Gilroy weight 500 in #0e0f10 (one link with inline coral 'new' badge), actions right with a dark 'Log in' button (#0e0f10 fill, white text, 100px radius) and a coral 'Start for free' button (#ff5065 fill, white text, 100px radius)."

  similar_brands:

    - "**Cal.com** — Same single-accent coral on white silence, pill-shaped buttons, heavy display headlines, and soft-shadow card approach"
    - "**Loom** — Restrained white canvas with one vivid accent color driving CTAs, rounded card chrome, geometric sans display type"
    - "**Webflow** — Clean white-space-dominant layout, bold geometric type, generous radii, and minimal but precise shadow elevation"
    - "**Pitch** — High-contrast black text on white with a single warm accent, pill buttons, tight headline leading, and confident display weight"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-coral: #ff5065;
          --color-ember-wash: #ff7a59;
          --color-persimmon: #ff5c35;
          --color-coral-mist: #ffe9eb;
          --color-carbon-ink: #0e0f10;
          --color-pure-white: #ffffff;
          --color-fog: #f4f4f8;
          --color-graphite: #2f3133;
          --color-slate: #7a7b7c;
          --color-smoke: #666666;
        
          /* Typography — Font Families */
          --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 120px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 24px;
          --radius-badges: 100px;
          --radius-images: 100px;
          --radius-buttons: 100px;
          --radius-largecards: 40px;
          --radius-smallcards: 16px;
          --radius-extralargecards: 120px;
        
          /* Shadows */
          --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-fog: #f4f4f8;
          --surface-card: #ffffff;
          --surface-accent-wash: #ffe9eb;
          --surface-dark-surface: #0e0f10;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-coral: #ff5065;
          --color-ember-wash: #ff7a59;
          --color-persimmon: #ff5c35;
          --color-coral-mist: #ffe9eb;
          --color-carbon-ink: #0e0f10;
          --color-pure-white: #ffffff;
          --color-fog: #f4f4f8;
          --color-graphite: #2f3133;
          --color-slate: #7a7b7c;
          --color-smoke: #666666;
        
          /* Typography */
          --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 120px;
        
          /* Shadows */
          --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;
        }