getburnt___style_reference:
  info: "> editorial monochrome on warm paper — a minimal typeset spread where warm-black ink, a light display serif, and pill-shaped controls turn a B2B tool into something that reads like a quarterly journal."

  theme: "light"

  info: "Getburnt operates in a near-achromatic editorial register: a warm near-black ink against white paper, with a single mid-gray for secondary text. The visual language borrows from print typography — a featherweight display serif carries headlines while a neutral grotesque handles everything operational, creating the rhythm of a magazine spread rather than a SaaS dashboard. Pill-shaped controls and small-radius cards keep the UI tactile and quick, and the deliberate absence of chromatic accents forces hierarchy through scale, weight, and whitespace alone. Product mockups float as photographic-style still lifes within warm grayscale containers, making the interface feel like a curated catalog rather than a software platform."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#1a1a17` | `--color-ink` | Primary text, filled buttons, dark surface backgrounds, heading strokes — a warm-tinted near-black that replaces pure #000 throughout the system |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, light section backgrounds, button borders on dark surfaces |"
    info: "| Ash | `#5f5f5d` | `--color-ash` | Secondary body text, helper text, muted borders, low-emphasis UI metadata |"

  tokens___typography:

    nyght_serif___reserved_exclusively_for_display_and_heading_levels_26_72px__weight_300_is_the_signature__most_systems_reach_for_600_700_serif__this_whisper_weight_creates_editorial_gravitas_through_restraint__letter_spacing_widens_slightly_at_smaller_sizes_0_03em_and_tightens_at_display_sizes_0_01em_to_preserve_optical_balance_____font_nyght_serif:
      - "**Substitute:** Fraunces (Google Fonts) at weight 300, or Cormorant Garamond Light"
      - "**Weights:** 300"
      - "**Sizes:** 26px, 48px, 62px, 72px"
      - "**Line height:** 1.00-1.20"
      - "**Letter spacing:** 0.01em at 62-72px, 0.03em at 26-48px"
      - "**Role:** Reserved exclusively for display and heading levels (26-72px). Weight 300 is the signature: most systems reach for 600-700 serif, this whisper-weight creates editorial gravitas through restraint. Letter-spacing widens slightly at smaller sizes (0.03em) and tightens at display sizes (0.01em) to preserve optical balance."

    switzer___workhorse_for_nav__body__buttons__labels__card_metadata__and_small_headings__tracking_runs_consistently_at_0_03em___a_subtle_positive_letter_spacing_that_gives_the_grotesque_a_calm__considered_cadence__weight_500_for_emphasis__600_for_button_text_and_nav_active_states_____font_switzer:
      - "**Substitute:** Inter, or Manrope (Google Fonts)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 14px, 15px, 16px, 20px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** 0.03em uniform across all sizes"
      - "**Role:** Workhorse for nav, body, buttons, labels, card metadata, and small headings. Tracking runs consistently at 0.03em — a subtle positive letter-spacing that gives the grotesque a calm, considered cadence. Weight 500 for emphasis, 600 for button text and nav active states."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 21 | 0.42px | `--text-caption` |"
      info: "| body | 16px | 24 | 0.48px | `--text-body` |"
      info: "| subheading | 20px | 30 | 0.6px | `--text-subheading` |"
      info: "| heading-sm | 26px | 31.2 | 0.78px | `--text-heading-sm` |"
      info: "| heading | 48px | 52.8 | 0.48px | `--text-heading` |"
      info: "| heading-lg | 62px | 68.2 | 0.62px | `--text-heading-lg` |"
      info: "| display | 72px | 72 | 0.72px | `--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: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 1440px |"
      info: "| tags | 1440px |"
      info: "| cards | 6px |"
      info: "| buttons | 1440px |"

    layout:

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

  components:

    pill_primary_button:
      role: "Filled action button for top-level CTAs"

      info: "Background #1a1a17, text #ffffff, 1440px border-radius (full pill), 28px horizontal padding × ~12px vertical, Switzer 15-16px weight 500, 0.03em tracking. Optional trailing arrow icon in white. Anchors the header and hero."

    pill_ghost_button:
      role: "Outlined or text-only action for secondary actions"

      info: "Transparent background, 1px border #1a1a17 or #ffffff depending on surface, 1440px radius, matching pill padding. Used for less prominent CTAs alongside the filled pill."

    pill_nav_link:
      role: "Navigation items in header"

      info: "Switzer 15-16px weight 400-500, no background, 1440px radius only when active (inverted: #1a1a17 bg, #ffffff text). Dropdown items get 12-16px padding."

    editorial_display_heading:
      role: "Section and hero headlines"

      info: "Nyght Serif weight 300, color #1a1a17, sizes 48-72px, line-height 1.0-1.1, letter-spacing 0.01em. The light weight and generous line-height create breathing space between lines — never set tight."

    product_mockup_card:
      role: "Embedded product UI screenshots within feature sections"

      info: "White card surface, 6px radius, ~24px internal padding, subtle #5f5f5d or #1a1a17 hairline border. Contains a miniaturized product UI with a chat input, task list, and status badges. Floats over a soft warm gradient backdrop in the surrounding panel."

    workflow_card:
      role: "Three-column feature card on light section"

      info: "White surface, 6px radius, 24px padding, faint 1px border. Contains a product mockup at top, then a Switzer small caps label (14px weight 500, 0.06em tracking), a Nyght Serif heading-sm (26px weight 300), and Ash body text. Three cards sit on a soft horizontal band gradient."

    stat_tile:
      role: "Metric callouts in the trust strip below hero"

      info: "Three equal columns separated by hairline #5f5f5d dividers. Each tile: small icon (16px) in #1a1a17, Switzer 15-16px weight 400, the numeric value not styled larger — the stat is part of the sentence rather than a hero number."

    feature_row:
      role: "Two-column text + visual feature layout"

      info: "Left column holds a Switzer small-caps eyebrow label and a Nyght Serif heading (48-62px weight 300). Right column holds a large dark-surface panel (#1a1a17 with subtle warm gradient) containing the product mockup. 48-64px vertical gap between rows."

    chat_input_bar:
      role: "AI assistant prompt inside product mockup"

      info: "Rounded pill input, white background, placeholder text in #5f5f5d, send button is a solid purple-ish or Ink filled circle. Sits as the top element of the Ozai Task List card."

    task_list_item:
      role: "Individual row inside the product mockup task list"

      info: "White surface, no border, 16px row gap, 16px Switzer weight 500 title, 14px Ash subtitle, right-side chevron in #5f5f5d. Inactive rows fade to ~50% opacity."

    status_pill_badge:
      role: "Order/inventory status indicators inside mockups"

      info: "Inline pill, ~6px vertical × 10px horizontal padding, 1440px radius, Switzer 12-13px weight 500. Healthy = subtle green-tinted neutral bg + dark text; Critical = warm-tinted neutral bg + dark text. The system deliberately avoids saturated red/green — badges stay within the warm-monochrome palette."

    icon_bullet:
      role: "Small leading icon for feature list items"

      info: "16-18px monochrome icon, stroke weight ~1.5px, color #1a1a17, aligned to the first line of each feature row with 16-24px gap to the label."

    header_bar:
      role: "Top-of-page navigation"

      info: "White background, ~16px vertical padding, flex row with logo (left), nav links (center-left, 34px gap), and CTA pill (right). No border-bottom — the header relies on the white-on-white separation from the hero."

  do_s_and_don_ts:

    do:
      - "Use Nyght Serif weight 300 for all heading and display text — never set a heading in Switzer"
      - "Keep the entire interface within the #1a1a17 / #ffffff / #5f5f5d triad; resist introducing chromatic accents"
      - "Set all buttons, nav active states, and tags to 1440px border-radius for the pill signature"
      - "Maintain 0.03em letter-spacing on all Switzer text to preserve the editorial cadence"
      - "Use 6px radius for cards, mockup containers, and any rectangular UI surface"
      - "Place product mockups on #1a1a17 dark panels to create a museum-vitrine effect against the white page"
      - "Anchor every section with 48-64px vertical gap to keep the editorial pacing"

    don_t:
      - "Do not introduce blue, green, red, or any saturated brand color — the warmth comes from the near-black, not from accents"
      - "Do not set Nyght Serif in weights other than 300 — adding bold or medium breaks the editorial voice"
      - "Do not use square or 12px+ radii on buttons or tags — the pill shape is load-bearing"
      - "Do not set body or heading text in pure #000000 — always use #1a1a17 for the warm-ink quality"
      - "Do not use heavy drop shadows on cards — the system relies on hairline borders and surface contrast, not elevation"
      - "Do not set line-height above 1.2 on Nyght Serif display sizes — the serif needs to sit tight to read as display, not body"
      - "Do not apply gradients to text, buttons, or text containers — the palette is flat by design"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas and default section background |"
    info: "| 1 | Ink Plate | `#1a1a17` | Inverted surface used for dark feature panels, product mockup backings, and high-contrast blocks |"

  elevation:

    info: "The system avoids drop shadows entirely. Spatial separation is achieved through hairline 1px borders in #5f5f5d, surface contrast (white card on #1a1a17 panel or white card on white canvas with border), and generous whitespace. Elevation is implied by container, not by blur."

  imagery:

    photography_plays_a_hero_role: "a single large full-bleed image of stacked wooden crates of strawberries in a warehouse occupies the entire right half of the hero, warm-toned, natural light, no overlays. The image is treated as a photographic still life — the physical supply chain is the product, not abstract illustration. Product mockups appear as in-page screenshots on dark panels, functioning as visual evidence rather than decoration. No icons beyond minimal 1.5px stroke monochrome marks; no illustration system; no decorative graphics."

  layout:

    info: "Max-width 1200px centered container, comfortable density. Hero is a 50/50 split: left column holds the serif headline at 62-72px, Switzer subtext, and a pill CTA; right column holds a full-bleed food photograph. Below the hero, a three-column stat strip divided by hairline rules. Subsequent sections alternate between left-text/right-dark-panel-with-mockup layouts and centered three-column workflow card grids. Sections are separated by 48-64px vertical gaps on a continuous white canvas. Navigation is a single white header bar with left-aligned logo and right-aligned pill CTA, no sticky behavior or mega-menu."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #1a1a17"
    - "background: #ffffff"
    - "border: #5f5f5d (hairline) or #1a1a17 (emphasized)"
    - "accent: no distinct accent — the system is monochromatic"
    - "primary action: #1a1a17 (filled action)"
    - "inverted surface: #1a1a17"

    info: "Example Component Prompts:"
    - "Build a hero section: white background, max-width 1200px centered. Left half holds a Nyght Serif weight 300 headline at 72px, color #1a1a17, letter-spacing 0.01em, line-height 1.0. Below it a Switzer 16px weight 400 subtext in #5f5f5d, then a pill button — #1a1a17 background, #ffffff text, 1440px radius, 28px horizontal padding, Switzer 15px weight 500. Right half is a full-bleed photograph with no border-radius."
    - "Build a workflow card: white surface, 6px radius, 24px padding, 1px border #5f5f5d. Top section is a product mockup on a #1a1a17 dark panel. Below the mockup, a Switzer 14px weight 500 eyebrow label in #1a1a17 with 0.06em tracking, then a Nyght Serif 26px weight 300 heading in #1a1a17, then a Switzer 16px weight 400 body paragraph in #5f5f5d."
    - "Build a stat strip: three equal columns separated by 1px #5f5f5d vertical dividers, no top/bottom borders. Each column has a 16px monochrome icon in #1a1a17, then Switzer 16px weight 400 text in #1a1a17, 8px row gap between icon and text."
    - "Build a feature row: two-column layout, 48px column gap. Left column has a Switzer 14px weight 500 eyebrow in #1a1a17, then a Nyght Serif 48px weight 300 heading, then three feature bullets each with a 16px icon, Switzer 20px weight 500 label, and Ash body text. Right column is a #1a1a17 dark panel, 6px radius, containing a white product mockup card with 24px padding."
    - "Build a pill nav bar: white background, 64px height, flex row. Left: logo text in Switzer 16px weight 600 #1a1a17. Center: four Switzer 15px weight 400 nav links in #1a1a17, 34px gap. Right: a pill ghost button — transparent background, 1px border #1a1a17, 1440px radius, Switzer 15px weight 500 text #1a1a17, 16px 24px padding."

  similar_brands:

    - "**Linear** — Same editorial discipline: near-monochrome palette, generous whitespace, serif-or-grotesque type pairing, and pill-shaped controls that disappear into the layout"
    - "**Vercel** — Identical reliance on typographic scale and weight contrast over color for hierarchy, with the warm-black-on-white palette and minimal interface chrome"
    - "**Notion** — Same warm-tinted near-black replacing pure #000, the same avoidance of saturated accent colors, and a serif-light display weight used for editorial moments"
    - "**Arc browser** — Same design-philosophy move of letting a single warm-tinted near-black do all the work while reserving color for functional moments inside product surfaces"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #1a1a17;
          --color-paper: #ffffff;
          --color-ash: #5f5f5d;
        
          /* Typography — Font Families */
          --font-nyght-serif: 'Nyght Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --tracking-caption: 0.42px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: 0.48px;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 31.2;
          --tracking-heading-sm: 0.78px;
          --text-heading: 48px;
          --leading-heading: 52.8;
          --tracking-heading: 0.48px;
          --text-heading-lg: 62px;
          --leading-heading-lg: 68.2;
          --tracking-heading-lg: 0.62px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: 0.72px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-nav: 1440px;
          --radius-tags: 1440px;
          --radius-cards: 6px;
          --radius-buttons: 1440px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-ink-plate: #1a1a17;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #1a1a17;
          --color-paper: #ffffff;
          --color-ash: #5f5f5d;
        
          /* Typography */
          --font-nyght-serif: 'Nyght Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --tracking-caption: 0.42px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: 0.48px;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 31.2;
          --tracking-heading-sm: 0.78px;
          --text-heading: 48px;
          --leading-heading: 52.8;
          --tracking-heading: 0.48px;
          --text-heading-lg: 62px;
          --leading-heading-lg: 68.2;
          --tracking-heading-lg: 0.62px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: 0.72px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 1440px;
        }