visual___style_reference:
  info: "> Warm editorial zine. Cream paper, serif posters, mono marginalia, a single yellow highlighter mark."

  theme: "light"

  info: "Visual speaks an editorial design dialect: a warm cream canvas (#f6f6f4) holds a high-contrast modern serif at near-poster sizes (64–96px) paired with monospaced UI text at 12–16px. The palette is near-monochrome — warm blacks, olive-sage neutrals, and a single vivid yellow (#fff347) deployed as decorative punctuation on accent bars and highlight washes. Surfaces stay flat with hairline 1px borders; visual hierarchy comes from color contrast and generous 80px section gaps, never from shadows. Components are lightweight and geometric: 8px-radius cards, 3px-radius nav, tiny all-caps mono labels, and a neutral dark button that reads as 'next' rather than 'buy now'. The overall feel is a design museum catalog that happens to contain a product — confident, restrained, and slightly cerebral."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vellum | `#f6f6f4` | `--color-vellum` | Page background — the warm off-white that defines the entire canvas tone |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, elevated panels, product mockup backgrounds |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, heavy structural borders, nav bar outlines |"
    info: "| Carbon | `#2c2c26` | `--color-carbon` | Warm near-black for dark panels, footer background, and neutral filled button fill — the only filled button in the system |"
    info: "| Ash | `#d0d0c8` | `--color-ash` | Light hairline borders, card outlines, subtle dividers |"
    info: "| Olive Char | `#57584b` | `--color-olive-char` | Mid-dark structural borders, heavier dividers between sections |"
    info: "| Lichen | `#6d6e5e` | `--color-lichen` | Body text, secondary borders, muted paragraph copy |"
    info: "| Sage | `#979886` | `--color-sage` | Nav link text, muted UI labels, breadcrumb text |"
    info: "| Moss | `#aaab9c` | `--color-moss` | Icon strokes and fills, tertiary text, decorative icon tint |"
    info: "| Bone | `#e8e7d9` | `--color-bone` | Subtle warm tint surface for tag backgrounds, soft highlight washes |"
    info: "| Highlighter Yellow | `#fff347` | `--color-highlighter-yellow` | Single accent — decorative bars, highlight washes, emphasis marks. Appears 3–4 times per page maximum, always as a 4–6px stroke or small fill block |"
    info: "| Khaki Olive | `#aaa674` | `--color-khaki-olive` | Muted accent for tag borders, secondary button outlines, warm-tinted surface washes — the restrained sibling of the highlighter |"

  tokens___typography:

    serif_custom___resembles_a_high_contrast_modern_editorial_serif_like_reckless_neue__gt_sectra__or_pp_editorial_new___all_display_and_heading_copy__used_at_poster_sizes_64_96px_for_hero_headlines_and_product_section_titles__the_weight_300_at_96px_is_the_signature_move___whisper_thin_strokes_at_near_poster_scale_create_authority_through_restraint__not_volume__tight_tracking__0_05em_at_all_sizes__line_heights_under_1_1_let_letterspacing_do_the_vertical_work____font_serif_custom_resembles_a_high_contrast_modern_editorial_serif_like_reckless_neue_gt_sectra_or_pp_editorial_new:
      - "**Substitute:** Fraunces (Google Fonts) — closest free match for the modern editorial feel. Instrument Serif as a lighter alternative"
      - "**Weights:** 300, 400"
      - "**Sizes:** 24, 32, 48, 64, 96"
      - "**Line height:** 0.94–1.13"
      - "**Letter spacing:** -0.05em at 24px and above (-1.2px at 24px, -4.8px at 96px)"
      - "**Role:** All display and heading copy. Used at poster sizes (64–96px) for hero headlines and product section titles. The weight 300 at 96px is the signature move — whisper-thin strokes at near-poster scale create authority through restraint, not volume. Tight tracking (-0.05em) at all sizes; line-heights under 1.1 let letterspacing do the vertical work"

    mono_custom___clean_geometric_monospace___all_ui_text__navigation__buttons__labels__body_copy__metadata__footer_links__the_mono_choice_is_deliberate___it_makes_every_ui_element_feel_like_terminal_output_or_code_annotation__contrasting_the_serif_s_editorial_softness__weight_400_dominates__500_for_button_text__300_reserved_for_large_mono_headings_28_48px_range____font_mono_custom_clean_geometric_monospace:
      - "**Substitute:** IBM Plex Mono (Google Fonts) — closest free match. JetBrains Mono as alternative"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 12, 14, 16, 20, 28, 48"
      - "**Line height:** 1.00, 1.33, 1.41, 1.50"
      - "**Letter spacing:** -0.067em for 12–16px body and nav text; -0.025em for 20px+ mono"
      - "**Role:** All UI text: navigation, buttons, labels, body copy, metadata, footer links. The mono choice is deliberate — it makes every UI element feel like terminal output or code annotation, contrasting the serif's editorial softness. Weight 400 dominates; 500 for button text; 300 reserved for large mono headings (28–48px range)"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 17 | -0.8px | `--text-caption` |"
      info: "| body-sm | 14px | 19 | -0.94px | `--text-body-sm` |"
      info: "| body | 16px | 24 | -1.07px | `--text-body` |"
      info: "| subheading | 20px | 30 | -0.5px | `--text-subheading` |"
      info: "| heading-sm | 24px | 24 | -1.2px | `--text-heading-sm` |"
      info: "| heading | 32px | 32 | -1.6px | `--text-heading` |"
      info: "| heading-lg | 48px | 54 | -2.4px | `--text-heading-lg` |"
      info: "| display-sm | 64px | 64 | -3.2px | `--text-display-sm` |"
      info: "| display | 96px | 90 | -4.8px | `--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: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 3px |"
      info: "| tags | 3px |"
      info: "| cards | 8px |"
      info: "| buttons | 3px |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Primary site navigation"

      info: "Full-width bar on #f6f6f4 background. Logo cluster left (VISUAL wordmark + small icon), centered nav links (mono 14px, #000000), 'WAITLIST' button right. Height ~56px. No drop shadow — separation from page via 1px #d0d0c8 bottom border. 3px radius on all interactive elements."

    neutral_filled_button:
      role: "Primary action trigger (Waitlist, Join, Submit)"

      info: "Background #2c2c26, text #ffffff, mono 14px weight 500, padding 8px 16px, radius 3px. No shadow, no gradient. The only filled button in the system — its restraint is the point."

    ghost_outline_button:
      role: "Secondary action (Learn More, Read More)"

      info: "Background transparent, border 1px #000000, text #000000, mono 14px weight 500, padding 8px 16px, radius 3px. Sits beside the filled button with 8px gap."

    section_eyebrow_label:
      role: "Small all-caps category marker above headlines"

      info: "Mono 12px weight 500, uppercase, tracking -0.067em, color #6d6e5e. Examples: 'VISUAL', 'PRODUCT / OVERVIEW', 'STOP WASTING TIME WITH MANUAL UPDATES'. Always centered above the section heading, 16–24px gap."

    centered_section_header:
      role: "Primary headline block for each page section"

      info: "Serif display text centered on the canvas. Display sizes (64–96px) for hero, heading-lg (48px) for product sections, heading (32px) for sub-sections. Weight 300, tracking -0.05em, color #000000. Subtitle below in mono 14px, #6d6e5, max-width ~560px centered."

    feature_split_card:
      role: "Side-by-side feature comparison blocks"

      info: "Two equal panels side by side, each on #ffffff with 1px #d0d0c8 border and 8px radius. Left panel: mono UI mockup (chat interface) on #ffffff. Right panel: dark product screenshot on #2c2c26. Gap between panels: 24px. Each panel has its own eyebrow label in the top corner (mono 12px, #6d6e5e)."

    dark_product_panel:
      role: "Product UI showcase with dark background"

      info: "Inner card with #2c2c26 background, 8px radius, 1px #57584b border. Contains product UI mockup (chat bubbles, file attachments, status indicators) rendered in #d0d0c8 and #aaab9c. Accent: #fff347 appears as a small highlight on the agent avatar or status dot."

    blog_card:
      role: "Article preview in blog grid"

      info: "8px radius, no border, image on top (square or 4:3, may use checkerboard transparency for editorial effect), title in serif heading-sm (24px, weight 400) below, date and author in mono 12px #979886. Three-column grid with 24px gap. Card background is transparent (sits directly on #f6f6f4)."

    dark_footer:
      role: "Site footer with links and branding"

      info: "Full-width #2c2c26 background, text #ffffff and #979886. Three-column layout: VISUAL wordmark left, RESOURCES and COMPANY link columns center/right, WAITLIST button far right. Mono 14px links, 12px headings. Padding 64px vertical. No border-top — the color shift from #f6f6f4 to #2c2c26 is the separator."

    accent_bar_decoration:
      role: "Decorative yellow + black line clusters"

      info: "Horizontal composition of 2–3 thin bars: one 2px #000000 stroke, one 4px #fff347 stroke, varying widths (40–120px). Positioned as decorative accents near hero visuals or section transitions. Not a functional element — pure editorial punctuation."

    olive_tag_badge:
      role: "Category tag, status indicator"

      info: "Background transparent or #e8e7d9, border 1px #aaa674, text #6d6e5, mono 12px weight 500, padding 4px 8px, radius 3px. Used sparingly for categorization and status labels."

    checkerboard_hero_visual:
      role: "3D-rendered hero centerpiece"

      info: "A photorealistic 3D render (chrome/metallic organic form — resembles a heart or molar shape) placed over a transparent checkerboard pattern. The checkerboard signals 'this is a 3D asset, not a photograph' and echoes design-tool transparency grids. Accent bars in #fff347 and #000000 overlay at left and right."

  do_s_and_don_ts:

    do:
      - "Use the serif at 64–96px weight 300 for all hero and section headlines — the thin strokes at poster scale are the signature"
      - "Set page background to #f6f6f4 and card surfaces to #ffffff — the warm cream is non-negotiable, never use pure #ffffff as the page canvas"
      - "Pair the neutral filled button (#2c2c26 fill, #ffffff text) with the ghost outline button (1px #000000 border) — they always appear as a 2-button cluster with 8px gap"
      - "Use mono at 12–16px with tracking -0.067em for all UI text, nav, buttons, and body copy — this creates the terminal/code-margin feel"
      - "Separate sections with 80px vertical gaps, not with borders or background color shifts — the whitespace is the structure"
      - "Place the #fff347 accent as 2–4px strokes or small fill blocks (max ~120px wide), never as large fills or backgrounds"
      - "Use 8px radius on cards and 3px radius on buttons, tags, and nav elements — the radius contrast is deliberate"

    don_t:
      - "Don't use pure #ffffff as the page background — always #f6f6f4 for the warm cream canvas"
      - "Don't add drop shadows to cards or buttons — the system is intentionally flat, separation comes from 1px borders and color contrast"
      - "Don't use the serif at body sizes (16px or below) — it is a display-only face; body copy must be mono"
      - "Don't apply #fff347 to text, large backgrounds, or filled buttons — it is a decorative accent only, not an action color"
      - "Don't use cool grays (blues or true neutrals) — the entire palette runs warm: olive-sage tones, warm blacks (#2c2c26 not #000000 for surfaces), and cream whites"
      - "Don't use gradients — the system is flat color only, with the one exception of the 3D hero render which contains its own internal gradients"
      - "Don't exceed 4 instances of #fff347 per screen — the accent loses impact if it appears more than 3–4 times on a single page"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Vellum | `#f6f6f4` | Page background — the warm cream that defines the entire visual temperature |"
    info: "| 1 | Paper | `#ffffff` | Card surfaces, elevated content blocks, light product mockup panels |"
    info: "| 2 | Carbon | `#2c2c26` | Dark panels, product screenshot cards, footer, neutral filled buttons |"
    info: "| 3 | Highlighter | `#fff347` | Accent highlight washes — appears as small decorative fills, never large surfaces |"
    info: "| 4 | Bone | `#e8e7d9` | Subtle warm tint for tag backgrounds and soft highlight zones |"

  elevation:

    info: "The system is intentionally flat. No drop shadows exist anywhere — visual hierarchy comes from three mechanisms only: (1) 1px hairline borders in #d0d0c8 or #57584b, (2) color contrast between the warm cream canvas and dark #2c2c26 panels, and (3) generous 80px section gaps. This flatness is a deliberate editorial choice — the design reads like a printed catalog or zine, not a software product. Adding shadows would break the typographic, print-inspired system."

  imagery:

    info: "Imagery is sparse and editorial. The hero features a single photorealistic 3D render — a chrome/metallic organic form (resembling a heart or molar) with reflective surface treatment, placed over a transparency-grid checkerboard pattern that signals '3D asset' rather than 'photograph'. The checkerboard is a design-tool convention used here as aesthetic. Accent bars (2–4px strokes in #fff347 and #000000) overlay the hero as decorative punctuation. Blog cards use square or 4:3 editorial photography with a slightly desaturated, high-key treatment. No lifestyle photography, no stock imagery, no product screenshots in the marketing sense — only the 3D render and editorial blog photos. Icons are minimal mono-weight geometric marks, not illustrations."

  layout:

    info: "Page model is max-width 1200px centered, with full-bleed sections inside that constraint. The hero is a centered stack: small mono eyebrow label, massive serif headline (96px), mono subtitle, two-button cluster, then the 3D hero visual below. Section rhythm is seamless — no dividers or background color shifts between most sections, just 80px vertical gaps. Content arrangement alternates between centered stacks (hero, section headers) and split layouts (feature cards: text-left/mockup-right). The product showcase uses a dark-on-light contrast: light canvas with a #2c2c26 dark panel containing the product UI mockup. Blog section uses a 3-column card grid with 24px gap. Footer is the only full-width color shift (cream to dark). Navigation is a single thin top bar, not sticky or complex — minimal, editorial, not app-like."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #f6f6f4"
    - "card surface: #ffffff"
    - "border: #d0d0c8"
    - "dark surface: #2c2c26"
    - "accent: #fff347"
    - "primary action: #2c2c26 (filled action)"

    example_component_prompts:

    - "Create a hero section: #f6f6f4 background, centered. Eyebrow label at 12px mono weight 500, #6d6e5e, uppercase, tracking -0.8px, text 'VISUAL'. Headline at 96px serif weight 300, #000000, tracking -4.8px, line-height 0.94, text 'Design Agents for Revenue Teams'. Subtitle at 14px mono, #6d6e5e, max-width 560px centered, line-height 1.33. Button cluster below: neutral filled button (#2c2c26, #ffffff text, 14px mono weight 500, padding 8px 16px, radius 3px) reading 'JOIN WAITLIST', ghost outline button (transparent, 1px #000000 border, #000000 text, same dimensions) reading 'LEARN MORE', 8px gap between them. 3D hero visual centered below with 80px margin-top."

    - "Create a blog card grid: 3-column grid with 24px gap on #f6f6f4 background. Each card: 8px radius, no border, square image on top, serif title at 24px weight 400 #000000, tracking -1.2px below image with 16px margin-top, date and author in 12px mono #979886 below title with 8px margin-top. No card padding — image bleeds to card edges."

    - "Create a feature split card: two equal panels side by side with 24px gap. Left panel: #ffffff background, 1px #d0d0c8 border, 8px radius, 24px padding, contains mono UI mockup (chat interface with avatar circle, message bubbles, file attachment chips). Right panel: #2c2c26 background, 8px radius, contains dark product screenshot mockup. Each panel has an eyebrow label in top corner: 12px mono weight 500 #6d6e5e (left) and #979886 (right), uppercase."

    - "Create a section header: centered on #f6f6f4. Mono eyebrow at 12px weight 500 #6d6e5e uppercase, tracking -0.8px. Serif headline at 48px weight 300 #000000, tracking -2.4px, line-height 1.13 below, 16px margin-top. Mono subtitle at 14px #6d6e5e, max-width 480px centered, 8px margin-top."

    - "Create the dark footer: full-width #2c2c26 background, 64px vertical padding. Three-column layout: 'VISUAL' wordmark in mono 14px weight 500 #ffffff left-aligned, two link columns center (RESOURCES / COMPANY headings in 12px mono #979886, links in 14px mono #ffffff), neutral filled button (#2c2c26 background, 1px #ffffff border, #ffffff text, 14px mono weight 500, padding 8px 16px, radius 3px) reading 'WAITLIST' far right."

  similar_brands:

    - "**Linear** — Same mono-as-body-text approach with tight tracking, minimal palette discipline, and hairline-border flat surfaces — though Linear runs dark, Visual runs cream"
    - "**Stripe Press** — Same editorial warmth — serif display headlines, generous whitespace, cream/off-white canvas, and the sense that the marketing site is a design object in its own right"
    - "**Rauno Freiberg** — Same mono + serif pairing, same restraint with color (near-monochrome with one accent), same typographic confidence at poster scale"
    - "**Arc Browser** — Same editorial-magazine-meets-product energy: serif headlines, mono UI, warm neutrals, and decorative accent marks used as visual punctuation"
    - "**Semplice (by Spatzek)** — Same design-portfolio-meets-product language: serif display type, generous 80px+ section gaps, cream backgrounds, and the confidence to let whitespace do the work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vellum: #f6f6f4;
          --color-paper: #ffffff;
          --color-ink: #000000;
          --color-carbon: #2c2c26;
          --color-ash: #d0d0c8;
          --color-olive-char: #57584b;
          --color-lichen: #6d6e5e;
          --color-sage: #979886;
          --color-moss: #aaab9c;
          --color-bone: #e8e7d9;
          --color-highlighter-yellow: #fff347;
          --color-khaki-olive: #aaa674;
        
          /* Typography — Font Families */
          --font-serif-custom-resembles-a-high-contrast-modern-editorial-serif-like-reckless-neue-gt-sectra-or-pp-editorial-new: 'Serif (custom — resembles a high-contrast modern editorial serif like Reckless Neue, GT Sectra, or PP Editorial New)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-mono-custom-clean-geometric-monospace: 'Mono (custom — clean geometric monospace)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 17;
          --tracking-caption: -0.8px;
          --text-body-sm: 14px;
          --leading-body-sm: 19;
          --tracking-body-sm: -0.94px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -1.07px;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 24;
          --tracking-heading-sm: -1.2px;
          --text-heading: 32px;
          --leading-heading: 32;
          --tracking-heading: -1.6px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 54;
          --tracking-heading-lg: -2.4px;
          --text-display-sm: 64px;
          --leading-display-sm: 64;
          --tracking-display-sm: -3.2px;
          --text-display: 96px;
          --leading-display: 90;
          --tracking-display: -4.8px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-nav: 3px;
          --radius-tags: 3px;
          --radius-cards: 8px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-vellum: #f6f6f4;
          --surface-paper: #ffffff;
          --surface-carbon: #2c2c26;
          --surface-highlighter: #fff347;
          --surface-bone: #e8e7d9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vellum: #f6f6f4;
          --color-paper: #ffffff;
          --color-ink: #000000;
          --color-carbon: #2c2c26;
          --color-ash: #d0d0c8;
          --color-olive-char: #57584b;
          --color-lichen: #6d6e5e;
          --color-sage: #979886;
          --color-moss: #aaab9c;
          --color-bone: #e8e7d9;
          --color-highlighter-yellow: #fff347;
          --color-khaki-olive: #aaa674;
        
          /* Typography */
          --font-serif-custom-resembles-a-high-contrast-modern-editorial-serif-like-reckless-neue-gt-sectra-or-pp-editorial-new: 'Serif (custom — resembles a high-contrast modern editorial serif like Reckless Neue, GT Sectra, or PP Editorial New)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-mono-custom-clean-geometric-monospace: 'Mono (custom — clean geometric monospace)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 17;
          --tracking-caption: -0.8px;
          --text-body-sm: 14px;
          --leading-body-sm: 19;
          --tracking-body-sm: -0.94px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -1.07px;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 24;
          --tracking-heading-sm: -1.2px;
          --text-heading: 32px;
          --leading-heading: 32;
          --tracking-heading: -1.6px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 54;
          --tracking-heading-lg: -2.4px;
          --text-display-sm: 64px;
          --leading-display-sm: 64;
          --tracking-display-sm: -3.2px;
          --text-display: 96px;
          --leading-display: 90;
          --tracking-display: -4.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        }