val_town___style_reference:
  info: "> daylight IDE with cyan sparks. White-washed IDE where chrome recedes, code glows in syntax colors, and one electric cyan button reads as 'run'."

  theme: "light"

  info: "Val Town uses a daylight-IDE visual language: a near-white canvas with a single vivid cyan as the \"run\" button accent, playful magenta and violet used sparingly to energize specific words inside otherwise neutral type, and the hero is always a real code editor mock rather than abstract illustration. Typography carries the brand more than color does — IBM Plex Sans at 400 for body, 700 for headings, and iA Writer Mono for all code, giving every screen the feel of a well-typeset terminal. Components are flat and low-elevation, relying on hairline borders and a cool light-gray card surface (#f1f5f9) to separate layers; depth only appears in the code editor mock where a soft 20px shadow lifts the card off the page. Color is rationed like a developer's cursor: it only appears where state changes, where code is highlighted, or where a single word deserves emphasis — the rest of the UI stays monochrome and quiet."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cyan Pulse | `#00bcff` | `--color-cyan-pulse` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Voltage Cyan | `#53eafd` | `--color-voltage-cyan` | Announcement bar border, decorative code-editor highlights — brighter, more electric than Cyan Pulse, used for outline accents only |"
    info: "| Plasma Violet | `#8e51ff` | `--color-plasma-violet` | Violet supporting accent for decorative details and low-frequency emphasis. |"
    info: "| Signal Magenta | `#e12afb` | `--color-signal-magenta` | Hiring nav link, emphasis words inside testimonial bodies — a second accent reserved for editorial moments, not chrome |"
    info: "| Halftone Blue | `#74d4ff` | `--color-halftone-blue` | Soft highlight wash behind cards and decorative code blocks — desaturated cyan used as a tint, never as text or border |"
    info: "| Deep Teal | `#104e64` | `--color-deep-teal` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ember Pink | `#ed6aff` | `--color-ember-pink` | Inline code-editor decoration, soft illustration tint — decorative, not a state color |"
    info: "| Alarm Red | `#ff2056` | `--color-alarm-red` | Red supporting accent for decorative details and low-frequency emphasis |"
    info: "| Carbon | `#314158` | `--color-carbon` | Primary body text, icon strokes, heading default — the dominant dark neutral across the entire UI |"
    info: "| Graphite | `#1d293d` | `--color-graphite` | Dark surface fill (testimonial cards, inverse blocks), strongest emphasis text |"
    info: "| Slate | `#45556c` | `--color-slate` | Mid-tone text, secondary icon strokes, muted body copy |"
    info: "| Iron | `#62748e` | `--color-iron` | Helper text, tertiary icon strokes, button label color in dark contexts |"
    info: "| Fog | `#6a7282` | `--color-fog` | Button label on light surfaces, icon default, disabled-adjacent text |"
    info: "| Ash | `#99a1af` | `--color-ash` | Captions, timestamps, lowest-priority metadata |"
    info: "| Mist | `#cad5e2` | `--color-mist` | Hairline borders, input outlines, divider lines |"
    info: "| Porcelain | `#e2e8f0` | `--color-porcelain` | Page canvas, default border color, subtle surface separation |"
    info: "| Paper | `#f1f5f9` | `--color-paper` | Card surface, elevated panel, code editor body fill |"
    info: "| Pure | `#ffffff` | `--color-pure` | Inset cards on light gray canvas, button text on cyan fill, modal surfaces |"

  tokens___typography:

    ibm_plex_sans___primary_interface_and_display_typeface__weight_400_carries_body__button_labels__nav__and_helper_text__weight_700_is_reserved_for_headings__large_numerics__and_the_single_word_inside_a_headline_that_needs_to_be_brand_colored__the_geometric_but_humanist_plex_forms_give_the_ui_a_terminal_instrument_feel_without_the_coldness_of_a_pure_grotesque__the_128px_step_is_used_for_the_oversized_code_output_flourish_in_the_hero_____font_ibm_plex_sans:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10, 12, 14, 16, 18, 24, 36, 48, 60, 128"
      - "**Line height:** 1.0–1.6"
      - "**Letter spacing:** -0.025em across body and display sizes, tightening as size grows; +0.1em tracked labels at 10–12px (uppercase eyebrows)"
      - "**Role:** Primary interface and display typeface. Weight 400 carries body, button labels, nav, and helper text; weight 700 is reserved for headings, large numerics, and the single word inside a headline that needs to be brand-colored. The geometric-but-humanist Plex forms give the UI a terminal-instrument feel without the coldness of a pure grotesque. The 128px step is used for the oversized code-output flourish in the hero."

    ia_writer_mono___all_code__file_names__inline_technical_labels__the__hello__output_render__and_monospaced_ui_affordances__its_slightly_humanized_monospace_proportions_pair_cleanly_with_plex_sans_at_the_same_sizes___they_look_like_they_were_drawn_for_each_other__weight_700_is_used_for_keywords_inside_the_code_editor_mockup_____font_ia_writer_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14, 16, 20, 24, 60"
      - "**Line height:** 1.0–1.5"
      - "**Role:** All code, file names, inline technical labels, the 'Hello!' output render, and monospaced UI affordances. Its slightly humanized monospace proportions pair cleanly with Plex Sans at the same sizes — they look like they were drawn for each other. Weight 700 is used for keywords inside the code editor mockup."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.6 | 1px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.4px | `--text-body` |"
      info: "| subheading | 18px | 1.56 | -0.45px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.25 | -0.9px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.14 | -1.2px | `--text-heading-lg` |"
      info: "| display | 60px | 1.11 | -1.5px | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 12px |"
      info: "| badges | 4px |"
      info: "| buttons | 8px |"
      info: "| codeEditor | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1)...` | `--shadow-xl` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Hero and section-level conversion"

      info: "Cyan Pulse #00bcff fill, white text, IBM Plex Sans 700 16px, 8px radius, 12px 24px padding, no border. Sits at the highest visual weight on the page — every screen has exactly one. Pairs with a Ghost Button as the secondary action."

    ghost_button:
      role: "Secondary action beside the primary CTA"

      info: "Transparent fill, 1px Carbon #314158 border, Carbon text, 8px radius, 12px 24px padding, IBM Plex Sans 700 16px. Mirrors the primary button's height and radius so the two feel like a matched pair."

    auth_button___sign_up:
      role: "Top-right account creation"

      info: "1px Carbon border, Carbon text on white, 8px radius, smaller padding (~8px 16px), 700 weight. Less visually loud than the hero CTA so it doesn't compete."

    auth_button___log_in:
      role: "Top-right account access"

      info: "Plain text link in Carbon, no border, no fill. Lives to the left of Sign up with no visual weight."

    announcement_bar:
      role: "Site-wide news strip below the nav"

      info: "Full-width container with 1px #53eafd border, #cefafe interior fill, 16px vertical padding, 12px radius. Contains a date pill, body copy in Carbon, and a 'Read more →' inline link."

    date_pill:
      role: "Leading element inside the announcement bar"

      info: "White fill, Carbon text, IBM Plex Sans 700 10px, +0.1em tracking, 4px 8px padding, 4px radius. The only place the small-caps tracked treatment appears."

    top_navigation:
      role: "Primary site navigation"

      info: "White background, 64px tall, IBM Plex Sans 400 14px links in Carbon, with one link rendered in Signal Magenta #e12afb ('We're hiring!') to recruit attention. Logo wordmark left, links center-left, search icon + auth right."

    hero_code_editor_card:
      role: "Hero visual — shows the product in action"

      info: "12px radius, white fill, soft 20px shadow lifting it off canvas, header bar with 'main.tsx' label in iA Writer Mono and a 'Run' button (Carbon fill, white text, 4px radius). Code body uses iA Writer Mono 14px with syntax-color words (Plasma Violet for 'async function', Halftone Blue for strings, Signal Magenta for return). The 'Hello!' output card overlays the bottom-right with #1d293d fill, white IBM Plex Sans 700 60px text, 8px radius, 20px shadow."

    template_card:
      role: "Use-case gallery tile in the 4-column grid"

      info: "White fill, 1px #e2e8f0 border, 12px radius, 16px padding. Header is a 120px icon strip on #f1f5f9 with three brand-logos arranged horizontally. Title is IBM Plex Sans 700 16px Carbon; body is IBM Plex Sans 400 14px Slate #45556c."

    logo_bar:
      role: "Social proof — 'Loved by engineers at'"

      info: "Single horizontal row, grayscale brand wordmarks, ~40px tall, even spacing. No background change from canvas — the logos are the content."

    testimonial_card:
      role: "Customer quote in 3-column grid"

1d293d_dark_fill__no_border__12px_radius__24_32px_padding__quote_body_in_ibm_plex_sans_400_16px_white_with_inline_emphasis_words_colored_plasma_violet_or_signal_magenta__footer_row__avatar___name_700_14px_white___role_400_12px_iron_on_the_left__company_wordmark_on_the_right__the_only_dark_surface_in_the_system:

    pull_quote_block:
      role: "Featured large quote between sections"

      info: "No container — text sits directly on canvas. A oversized Halftone Blue #74d4ff quotation mark glyph (60–80px) sits to the left, IBM Plex Sans 400 24px Carbon to the right with -0.6px tracking. Generous left/right margins."

    search_icon_button:
      role: "Top-nav utility"

      info: "Plain 16px Carbon icon, no border, no fill, 8px hit area. Text-less by design."

  do_s_and_don_ts:

    do:
      - "Use Cyan Pulse #00bcff for exactly one filled button per viewport — the primary action — and pair it with a Ghost Button as the secondary"
      - "Set all body and display type in IBM Plex Sans 400 with letter-spacing -0.025em; tighten further as size grows"
      - "Reserve Plasma Violet #8e51ff and Signal Magenta #e12afb for one word inside a headline or sentence, never for full elements"
      - "Render all code, file names, and technical labels in iA Writer Mono; never set Plex Mono or a system mono as a substitute"
      - "Layer surfaces as Canvas (#e2e8f0) → Paper (#ffffff) → Mist (#f1f5f9); use hairline #e2e8f0 borders rather than shadows to separate cards"
      - "Place the only soft 20px shadow on the hero code-editor card; keep all other components flat"
      - "Use 8px radius for buttons and auth controls, 12px for cards and the code editor, 4px for the small date pill"

    don_t:
      - "Do not introduce a second saturated CTA color; Cyan Pulse is the only filled action fill in the system"
      - "Do not apply Plasma Violet or Signal Magenta to background fills, borders, or full sentences — they are word-level accents only"
      - "Do not add drop shadows to template cards, testimonial cards, or logo bars; those surfaces stay flat"
      - "Do not set body or display type in any font other than IBM Plex Sans, or substitute Plex Sans for the iA Writer Mono code block"
      - "Do not use the 128px display size for headings outside the hero code-output flourish — it is reserved for that one moment"
      - "Do not use Carbon #314158 for both text and dark surfaces; use Graphite #1d293d when you need a dark fill"
      - "Do not add gradients to any surface — the system is flat by design, and the cyan/violet/magenta palette does the work that gradients usually do"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#e2e8f0` | Page background, band separators between sections |"
    info: "| 1 | Paper | `#ffffff` | Inset cards, hero code editor, primary content containers on the gray canvas |"
    info: "| 2 | Mist | `#f1f5f9` | Sub-surface inside cards, icon tile backgrounds, secondary panel fill |"
    info: "| 3 | Halftone | `#cefafe` | Cyan-tinted highlight wash behind decorative elements and code blocks |"
    info: "| 4 | Inverse | `#1d293d` | Dark testimonial cards, inverse sections |"

  elevation:

    - "**Code Editor Hero Card:** `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`"
    - "**Announcement Bar:** `none — uses 1px #53eafd border instead of shadow`"
    - "**Template Cards:** `none — flat on canvas, separated by 1px #e2e8f0 border`"
    - "**Testimonial Cards:** `none — flat dark fill (#1d293d) on canvas`"

  imagery:

    info: "Visuals are dominated by product UI rather than photography or illustration. The hero is a literal code editor mockup rendering the platform's output ('Hello!') — the product screenshot IS the hero image. Secondary visuals are flat brand-logo strips on a Mist-tinted tile inside template cards, and grayscale company wordmarks in the social-proof bar. Iconography is line-based and 1.5px stroke, monochrome Carbon, no fill variants. No photography, no 3D, no abstract gradients — the only illustrative moments are the syntax-color words inside the code editor, which function as decoration that doubles as documentation."

  layout:

    info: "Layout is max-width 1200px centered on a #e2e8f0 canvas, with white paper cards creating the primary content surface. The hero is a split composition: headline + subhead + dual-button cluster on the left (50%), floating code editor card on the right (50%) with intentional negative space. Below the hero, content flows in alternating 4-column card grids (templates), single-row logo bars (social proof), and 3-column dark-card grids (testimonials). Vertical rhythm is generous: 64-96px between major sections, 8-16px between elements within a card. Pull quotes break the grid with oversized quotation marks and centered single-column text. The navigation is a single horizontal bar — no sidebar, no mega-menu, no sticky secondary nav."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #314158 (Carbon)"
    - "background: #e2e8f0 (Porcelain canvas) / #ffffff (Paper card)"
    - "border: #e2e8f0 hairline / #53eafd (announcement accent)"
    - "accent: #8e51ff (Plasma Violet) for headline word-emphasis"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a template card: white fill, 1px #e2e8f0 border, 12px radius, 16px padding. Top half is a 120px-tall #f1f5f9 icon strip holding three 24px brand logos. Title is IBM Plex Sans 700 16px #314158, body is IBM Plex Sans 400 14px #45556c."

    - "Create a testimonial card: #1d293d fill, 12px radius, 24px padding, no border, no shadow. Quote body in IBM Plex Sans 400 16px white with one emphasis word in #8e51ff. Footer: 32px avatar + IBM Plex Sans 700 14px white name + 400 12px #62748e role, company wordmark right-aligned."

    - "Create an announcement bar: full-width, 1px #53eafd border, #cefafe fill, 12px radius, 16px vertical padding. Leading 4px-radius white date pill (IBM Plex Sans 700 10px #314158, +0.1em tracking), body copy in IBM Plex Sans 400 14px #314158, trailing 'Read more →' inline link."

    - "Create a pull quote: no container, sits on canvas. A 60px #74d4ff quotation glyph on the left, IBM Plex Sans 400 24px #314158 quote text on the right with -0.6px tracking, single column, generous left margin."

  color_rationing:

    info: "Color is rationed like developer attention. The page is 95% achromatic; chromatic pixels appear only at three levels of priority. Tier 1 (Cyan Pulse #00bcff): exactly one filled button per viewport. Tier 2 (Plasma Violet #8e51ff, Signal Magenta #e12afb): one word inside a headline or sentence — these are emphasis, not chrome. Tier 3 (Voltage Cyan #53eafd, Halftone Blue #74d4ff, Deep Teal #104e64): syntax-style decoration inside code blocks and the announcement bar. Never use a chromatic color as a full surface fill, a border, or a long block of text — if you need a colored region, the dark testimonial card (#1d293d) is the only place a surface is allowed to step away from grayscale."

  similar_brands:

    - "**Replit** — Same light-canvas, code-editor-as-hero layout, and developer-tool warmth; Replit leans slightly more orange, Val Town stays in cyan-violet-magenta accent territory"
    - "**Vercel** — Similar restrained achromatic base with a single vivid accent color and IBM Plex-style sans typography; both use flat cards on a near-white canvas"
    - "**Plausible Analytics** — Identical surface stack (gray canvas, white cards, hairline borders, generous 64-96px section gaps) and a single saturated action color used sparingly"
    - "**Railway** — Same dark-card testimonial pattern, code-first hero, and 8-12px component radii; both feel like an IDE rendered as a marketing site"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cyan-pulse: #00bcff;
          --color-voltage-cyan: #53eafd;
          --color-plasma-violet: #8e51ff;
          --color-signal-magenta: #e12afb;
          --color-halftone-blue: #74d4ff;
          --color-deep-teal: #104e64;
          --color-ember-pink: #ed6aff;
          --color-alarm-red: #ff2056;
          --color-carbon: #314158;
          --color-graphite: #1d293d;
          --color-slate: #45556c;
          --color-iron: #62748e;
          --color-fog: #6a7282;
          --color-ash: #99a1af;
          --color-mist: #cad5e2;
          --color-porcelain: #e2e8f0;
          --color-paper: #f1f5f9;
          --color-pure: #ffffff;
        
          /* Typography — Font Families */
          --font-ibm-plex-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ia-writer-mono: 'iA Writer Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --tracking-caption: 1px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --tracking-subheading: -0.45px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.6px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.2px;
          --text-display: 60px;
          --leading-display: 1.11;
          --tracking-display: -1.5px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 24-32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 12px;
          --radius-badges: 4px;
          --radius-buttons: 8px;
          --radius-codeeditor: 12px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
        
          /* Surfaces */
          --surface-canvas: #e2e8f0;
          --surface-paper: #ffffff;
          --surface-mist: #f1f5f9;
          --surface-halftone: #cefafe;
          --surface-inverse: #1d293d;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cyan-pulse: #00bcff;
          --color-voltage-cyan: #53eafd;
          --color-plasma-violet: #8e51ff;
          --color-signal-magenta: #e12afb;
          --color-halftone-blue: #74d4ff;
          --color-deep-teal: #104e64;
          --color-ember-pink: #ed6aff;
          --color-alarm-red: #ff2056;
          --color-carbon: #314158;
          --color-graphite: #1d293d;
          --color-slate: #45556c;
          --color-iron: #62748e;
          --color-fog: #6a7282;
          --color-ash: #99a1af;
          --color-mist: #cad5e2;
          --color-porcelain: #e2e8f0;
          --color-paper: #f1f5f9;
          --color-pure: #ffffff;
        
          /* Typography */
          --font-ibm-plex-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ia-writer-mono: 'iA Writer Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --tracking-caption: 1px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --tracking-subheading: -0.45px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.6px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.2px;
          --text-display: 60px;
          --leading-display: 1.11;
          --tracking-display: -1.5px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
        }