rows___style_reference:
  info: "> blank spreadsheet at dawn — calm, precise, one warm spark on cold white"

  theme: "light"

  info: "Rows presents a near-monochrome workspace where black type on a vast white canvas does almost all the work, and a single warm marigold accent (used once per screen, never as fill) signals where attention belongs. The interface feels like a spreadsheet that learned to be a product: tabular density, hairline dividers, compact 8px gaps, and typographic restraint rather than chrome to organize information. Components are nearly borderless — the visual structure comes from whitespace, alignment, and the occasional thin 1px rule. Color never decorates; it only points. The single gradient (coral to marigold) exists as a brand mark, not as surface treatment."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#1a1a1a` | `--color-ink` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, button text on dark fills |"
    info: "| Mist | `#f7f7f7` | `--color-mist` | Subtle surface lift for inset panels, hover states, secondary card backgrounds |"
    info: "| Ash | `#eaeaea` | `--color-ash` | Hairline borders, dividers, tag outlines, input default border |"
    info: "| Smoke | `#e1e1e1` | `--color-smoke` | Table row dividers, secondary borders, icon outlines in inactive state |"
    info: "| Graphite | `#838383` | `--color-graphite` | Tertiary text, placeholder copy, disabled icon color |"
    info: "| Steel | `#989898` | `--color-steel` | Secondary text, helper labels, subdued metadata |"
    info: "| Slate | `#6f6f6f` | `--color-slate` | Body text secondary, link text in resting state, breadcrumb text |"
    info: "| Marigold | `#ffb84d` | `--color-marigold` | Accent stroke on the primary input — a single warm spark that signals focus, never fills a surface |"
    info: "| Buttercream | `#ffe480` | `--color-buttercream` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Cream | `#fff6d4` | `--color-cream` | Very pale accent wash for soft highlight backgrounds behind marigold borders |"

  tokens___typography:

    output_sans___single_family_type_system__24px_700_for_the_page_heading__18px_400_for_the_hero_greeting_and_primary_links__14px_400_700_for_body__controls__and_template_labels__10px_400_for_micro_labels_and_column_headers__the_tight_negative_tracking_at_18_24px__0_043em_tightens_the_headline_and_greeting_into_a_compact__spreadsheet_like_block__while_positive_tracking_on_10_14px_caps_and_labels_adds_quiet_authority_to_tiny_type_____font_output_sans:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10, 14, 18, 24"
      - "**Line height:** 1.00–1.45"
      - "**Letter spacing:** −0.043em at 24px; +0.008–0.021em at 10–14px"
      - "**OpenType features:** `\"tnum\" on, \"ss01\" on`"
      - "**Role:** Single-family type system: 24px/700 for the page heading, 18px/400 for the hero greeting and primary links, 14px/400–700 for body, controls, and template labels, 10px/400 for micro-labels and column headers. The tight negative tracking at 18–24px (-0.043em) tightens the headline and greeting into a compact, spreadsheet-like block, while positive tracking on 10–14px caps and labels adds quiet authority to tiny type."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | 0.21px | `--text-caption` |"
      info: "| heading-sm | 18px | 1.45 | -0.774px | `--text-heading-sm` |"
      info: "| heading | 24px | 1 | -1.032px | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 52 | 52px | `--spacing-52` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 8px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    layout:

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

  components:

    top_bar:
      role: "Minimal app chrome"

      info: "Full-bleed white bar, 1px Ash (#eaeaea) bottom border. Left: small workspace name at 14px/700 Ink with a subtle back chevron icon. Right: 'Log in' as 14px/400 Steel ghost text and 'Free sign up' as 14px/400 Ink inside a 1px Ink border, 4px radius, 6px vertical / 12px horizontal padding. No shadow, no fill on the bar itself."

    primary_input:
      role: "Prompt field"

      info: "Full-width within content column (max ~960px), 1px Marigold (#ffb84d) border, 4px radius, generous vertical padding (16–20px). Placeholder text 18px/400 in Graphite. A trailing action cluster on the right (send/attach icons at 18px Slate). On hover, border stays marigold; on focus, a 1px cream (#fff6d4) glow halo. This is the only chromatic border on the screen."

    template_grid:
      role: "Discovery surface"

      info: "4-column grid with 24px column gap, 8px row gap. Each cell is a clickable row, not a card: no border, no fill, no radius. The structure is implied by alignment alone. Column headers ('Import', 'Marketing Dashboard', etc.) at 10px/700 Graphite, positively tracked, uppercase-style restraint."

    template_item:
      role: "Template entry"

      single_horizontal_row: "6px colored dot (category color) + 14px/400 Ink label, 8px gap between dot and text, 12px vertical padding. No hover state beyond subtle text color shift to Ink-from-Slate. No background, no underline, no card chrome."

    category_color_dots:
      role: "Template iconography"

      info: "6px solid circles in muted category colors (soft pink, sky blue, mint, amber, violet). They are the ONLY chromatic elements across the entire grid — a quiet, functional wayfinding system that avoids icon complexity."

    ghost_link_button:
      role: "Inline action"

      info: "14px/400 Slate text with trailing arrow glyph (→), no border, no fill. On hover, text shifts to Ink. Used for 'Start from blank →' and similar low-emphasis actions."

    outlined_button:
      role: "Secondary action"

      info: "1px Ink border, 4px radius, 6px vertical / 12px horizontal padding, 14px/400 Ink text. No fill in resting state. Used for 'Free sign up' in the top bar."

    filled_button:
      role: "Primary action"

      info: "Ink (#1a1a1a) background, Paper (#ffffff) text, 14px/700, 4px radius, 8–10px vertical / 16–20px horizontal padding. Reserved for the most important single action on a screen. No shadow, no gradient fill."

    footer_link:
      role: "Minimal footer"

      info: "Centered row at the bottom of the canvas, 14px/400 Slate text links separated by 16–24px gap. No border, no fill, no logo lockup — just text on white."

  do_s_and_don_ts:

    do:
      - "Use Ink (#1a1a1a) for all primary text and filled button backgrounds; never substitute a lighter gray for emphasis."
      - "Reserve Marigold (#ffb84d) for the single most important interactive border per screen — the prompt input or one focused control — and never use it as a fill."
      - "Use 4px radius for buttons and inputs, 8px for cards; never exceed 8px or reach for pill shapes."
      - "Use Output Sans at 24px/700 with -0.043em tracking for the page heading and 18px/400 with the same negative tracking for the hero greeting; this negative spacing at large sizes is the signature."
      - "Separate template/entry items with whitespace and 8px row gaps — no borders, no card backgrounds, no hover fills beyond a subtle Ink color shift."
      - "Use the 6px colored dot convention for categorical iconography instead of full icons when the label is already present."
      - "Anchor all micro-labels (column headers, tags) at 10px/700 with +0.021em positive tracking to create the spreadsheet-like precision."

    don_t:
      - "Don't introduce any chromatic fill color on buttons, cards, or surfaces — color belongs on borders and dots only."
      - "Don't add box-shadows or elevation to cards or inputs; the design is flat and relies on 1px borders."
      - "Don't use letter-spacing of 0 or positive values on headings 18px and above — the negative tracking is non-negotiable."
      - "Don't use more than one marigold element per viewport; its power comes from scarcity."
      - "Don't use a system font fallback that changes the geometric proportions; Output Sans / Inter are the only acceptable families."
      - "Don't wrap template items in bordered or filled cards — the grid is defined by alignment, not containers."
      - "Don't use the coral-to-marigold gradient as a background or button fill; it is a brand mark only, never a surface."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas — the dominant surface, occupying 80%+ of the viewport |"
    info: "| 1 | Mist | `#f7f7f7` | Subtle inset panels and secondary card backgrounds for low-elevation distinction |"
    info: "| 2 | Cream | `#fff6d4` | Accent wash behind the marigold-bordered input or highlighted selection |"

  elevation:

    info: "No shadows. The design is intentionally flat: all spatial hierarchy comes from 1px hairline borders in Ash (#eaeaea) and Smoke (#e1e1e1), and from generous whitespace. Elevation is conveyed by Ink fill, not by drop shadow."

  imagery:

    info: "No photography, no illustration, no product screenshots. The visual language is pure UI: type, dots, lines, and one bordered input. When visuals are needed, they appear as the 6px colored category dots — flat, solid, never gradient or photographic. Density is overwhelmingly text-dominant."

  layout:

    info: "Centered, max-width ~1080px content column on a full-bleed white canvas. Hero is a vertically stacked composition: small top bar, then ~15% vertical breathing room, then a single-line 24px heading, then the full-width marigold-bordered prompt input, then a 4-column template grid with 24px column gaps, then a right-aligned 'Start from blank →' link, then deep white space, then a centered two-link footer. No sidebar, no mega-menu, no sticky elements beyond the top bar. Navigation is minimal — a back chevron and a workspace name on the left, two text-level actions on the right."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #1a1a1a (Ink)"
    - "background: #ffffff (Paper)"
    - "border: #eaeaea (Ash) for hairlines, #1a1a1a (Ink) for outlined buttons"
    - "accent: #ffb84d (Marigold) — border-only, never fill"
    - "primary action: no distinct CTA color"
    - "secondary text: #6f6f6f (Slate)"

    example_component_prompts:
    - "*Hero prompt screen*: White (#ffffff) canvas, centered. Greeting 'Hi, what do you want to build?' in Output Sans 24px/700, #1a1a1a, letter-spacing -0.043em. Below it, a full-width input (~960px) with 1px #ffb84d border, 4px radius, 18px placeholder in #838383, 16px vertical padding."
    - "*Template grid row*: Four columns, 24px gap, no borders. Column header in 10px/700 #6f6f6f with +0.021em tracking. Each item: 6px solid colored dot + 8px gap + 14px/400 #1a1a1a label, 12px vertical padding, no hover background."
    - "*Outlined secondary button*: 1px #1a1a1a border, 4px radius, 6px/12px padding, 14px/400 #1a1a1a label, transparent background. For 'Free sign up' in the top bar."
    - "*Ghost link action*: 14px/400 #6f6f6f text with a trailing → arrow, no border, no fill. On hover, color shifts to #1a1a1a. For 'Start from blank'."
    - "*Top bar*: Full-width white, 1px #eaeaea bottom border. Left: 14px/700 #1a1a1a workspace name with a left chevron icon in #838383. Right: 'Log in' as 14px/400 #6f6f6f ghost text, then an outlined 'Free sign up' button."

  color_rarity_system:

    info: "Rows treats color as a scarce resource. The entire interface is achromatic; Marigold (#ffb84d) appears at most once per viewport, always as a 1px border on the single most important interactive element. The 6px category dots are the only other chromatic elements, and they use a muted, desaturated palette. The coral→marigold gradient is reserved as a brand mark and never used as a surface. This scarcity is the design's most distinctive behavioral rule — adding more color breaks the system."

  similar_brands:

    - "**Linear** — Same extreme monochrome discipline with a single accent color, compact 14px type, and 4–8px radii on a flat, shadowless surface"
    - "**Notion** — Same near-grayscale palette, hairline Ash borders, text-dominant layouts, and the feeling of a document/workspace rather than a marketing site"
    - "**Causal** — Same spreadsheet-adjacent minimalism: white canvas, tiny colored dots for category iconography, typographic restraint over chrome"
    - "**Vercel** — Same flat hierarchy with no shadows, 4–8px radii, and a single warm accent used sparingly for focus indication"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #1a1a1a;
          --color-paper: #ffffff;
          --color-mist: #f7f7f7;
          --color-ash: #eaeaea;
          --color-smoke: #e1e1e1;
          --color-graphite: #838383;
          --color-steel: #989898;
          --color-slate: #6f6f6f;
          --color-marigold: #ffb84d;
          --color-buttercream: #ffe480;
          --color-cream: #fff6d4;
        
          /* Typography — Font Families */
          --font-output-sans: 'Output Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 0.21px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.45;
          --tracking-heading-sm: -0.774px;
          --text-heading: 24px;
          --leading-heading: 1;
          --tracking-heading: -1.032px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-52: 52px;
        
          /* Layout */
          --page-max-width: 1080px;
          --section-gap: 48-64px;
          --card-padding: 16-24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 8px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-mist: #f7f7f7;
          --surface-cream: #fff6d4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #1a1a1a;
          --color-paper: #ffffff;
          --color-mist: #f7f7f7;
          --color-ash: #eaeaea;
          --color-smoke: #e1e1e1;
          --color-graphite: #838383;
          --color-steel: #989898;
          --color-slate: #6f6f6f;
          --color-marigold: #ffb84d;
          --color-buttercream: #ffe480;
          --color-cream: #fff6d4;
        
          /* Typography */
          --font-output-sans: 'Output Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 0.21px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.45;
          --tracking-heading-sm: -0.774px;
          --text-heading: 24px;
          --leading-heading: 1;
          --tracking-heading: -1.032px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-52: 52px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-lg: 8px;
        }