ui___style_reference:
  info: "> brutalist Swiss grid in graphite and chalk. A designer's drafting table where every line is a 1px border, every surface is white, and the only accent is a filled-black button that cuts like a blade through all that negative space."

  theme: "light"

  info: "shadcn/ui is a strictly monochromatic design system documentation site: pure white canvas, graphite text, and hairline #e5e5e5 borders doing all the structural work. There is zero brand color — the system IS the absence of color, which is the point. Typography (Geist) carries the identity: weight 600 at 48px with -0.05em tracking gives the hero a tight, almost architectural gravity, while body text at 14-16px stays quiet and utilitarian. Components are compact, grid-driven, and border-first: 10px radii, 1px hairline separators, and an almost complete absence of shadow or elevation. The one filled element on the page is the black primary button — it sits like a period at the end of a sentence, deliberate and unmissable against all the white space around it."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Graphite | `#0a0a0a` | `--color-graphite` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Body text, icon fills, link text, and the darkest border variant — the default ink |"
    info: "| Carbon | `#171717` | `--color-carbon` | Dark surface for inverted cards, dark-mode preview tiles, and badge backgrounds — sits one step above graphite for subtle dark layering |"
    info: "| Concrete | `#737373` | `--color-concrete` | Secondary body text, muted labels, placeholder content — the workhorse mid-gray for non-primary copy |"
    info: "| Ash | `#a1a1a1` | `--color-ash` | Disabled state borders, extremely subtle dividers |"
    info: "| Smoke | `#b9b9b9` | `--color-smoke` | Soft borders on less-emphasized containers |"
    info: "| Hairline | `#e5e5e5` | `--color-hairline` | The dominant structural color — every card border, input border, table separator, and nav divider is this exact shade. Frequency 1225 makes it the load-bearing wall of the entire system |"
    info: "| Mist | `#f2f2f2` | `--color-mist` | Subtle surface fill for tags, ghost button hover, and micro-backgrounds — the lightest gray that still registers as not-white |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Page canvas, card surfaces, button text on dark fills, input backgrounds — the dominant surface at all levels |"

  tokens___typography:

    geist___every_text_context_on_the_site___body__buttons__icons_as_labels__badges__nav__inputs__cards__headings__geist_is_a_custom_vercel_geometric_sans_with_quiet__slightly_squared_terminals__its_1_43_line_height_at_14_16px_creates_a_compact_utilitarian_rhythm__at_48px_with_weight_600_and__0_05em_tracking_it_becomes_the_only_moment_of_typographic_drama__the_tight_tracking_on_larger_sizes__0_05em_is_signature___text_feels_set_in_concrete__not_floating____font_geist:
      - "**Substitute:** Inter, system-ui, -apple-system, sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 48px"
      - "**Line height:** 1.43 (body), 1.20 (headings), 1.50 (UI elements)"
      - "**Letter spacing:** -0.05em at display sizes (48px), -0.025em at body-subhead range, normal at 12-14px UI text"
      - "**OpenType features:** `\"cv11\", \"ss01\"`"
      - "**Role:** Every text context on the site — body, buttons, icons-as-labels, badges, nav, inputs, cards, headings. Geist is a custom Vercel geometric sans with quiet, slightly squared terminals. Its 1.43 line-height at 14-16px creates a compact utilitarian rhythm; at 48px with weight 600 and -0.05em tracking it becomes the only moment of typographic drama. The tight tracking on larger sizes (-0.05em) is signature — text feels set in concrete, not floating"

    geist_mono___monospace_input_fields__code_adjacent_text__and_technical_micro_copy_where_character_width_consistency_matters__detected_only_in_input_context_at_14px____font_geist_mono:
      - "**Substitute:** ui-monospace, \"SF Mono\", \"Cascadia Code\", monospace"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.43"
      - "**Role:** Monospace input fields, code-adjacent text, and technical micro-copy where character width consistency matters. Detected only in input context at 14px"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.43 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.45px | `--text-subheading` |"
      info: "| display | 48px | 1.1 | -2.4px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      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: "| 40 | 40px | `--spacing-40` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 83 | 83px | `--spacing-83` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 10px |"
      info: "| cards | 14px |"
      info: "| pills | 9999px |"
      info: "| badges | 26px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `lab(100 0 0) 0px 0px 0px 2px` | `--shadow-subtle` |"
      info: "| subtle-2 | `oklab(0.145 -0.00000143796 0.00000340492 / 0.1) 0px 0px 0...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Global site navigation"

      info: "Horizontal bar on white background, 64px height, items separated by 10px gaps. Logo at far left, nav links (Docs, Components, Blocks, Charts, Directory, Create) in 14px Geist weight 500 #0a0a0a. Search input centered/right, GitHub link with count badge, and a filled black \"New\" button at far right. No background fill on the nav itself — it relies on the page canvas and a subtle bottom border at #e5e5e5."

    search_input:
      role: "Documentation search field"

      info: "White background, 1px solid #e5e5e5 border, 10px border-radius, 10px vertical and 12px horizontal padding. Placeholder text \"Search documentation...\" in #737373. Focus state shows a 2px ring at #ffffff (inverted outline pattern). Geist weight 400 at 13-14px."

    pill_badge_introducing_sora:
      role: "Feature announcement tag"

      info: "Rounded pill with ~26px border-radius. #f2f2f2 background, 2px vertical and 10-12px horizontal padding. Geist weight 500 at 12px in #0a0a0a. Often paired with a right-arrow chevron icon."

    primary_filled_button:
      role: "Primary call-to-action"

      info: "Black (#0a0a0a) background, white (#ffffff) text, 10px border-radius, 4-8px vertical and 16px horizontal padding. Geist weight 500 at 14px. Used for \"New Project\" and \"New\" — the only high-contrast filled element in the system. No shadow. Hover may slightly lighten the background."

    ghost_text_button:
      role: "Secondary action"

      info: "No background, no border. Text only in #0a0a0a at 14px Geist weight 500. Used for \"View Components\" beside the primary CTA. Hover state adds #f2f2f2 background."

    component_preview_card:
      role: "Showcase tile for a UI component example"

      info: "White (#ffffff) background, 1px solid #e5e5e5 border, 14px border-radius, 16-20px internal padding. Contains a labeled example of a single component (Payment Method, Team Members, AI Input, Appearance Settings, etc.). Some cards use an extremely subtle 1px shadow at oklab(0.145 0 0 / 0.1) for the barest hint of separation. Section headers inside cards are 16-18px Geist weight 600 in #0a0a0a; helper text is 13-14px in #737373."

    text_input:
      role: "Form text entry"

      info: "White background, 1px solid #e5e5e5 border, 10px border-radius, 8-10px vertical and 10-12px horizontal padding. Geist 14px weight 400. Placeholder in #737373. Focus state: 2px outer ring in #ffffff (inverted ring effect) or border darkens to #0a0a0a."

    toggle___switch:
      role: "Binary on/off control"

      info: "Rounded track (~20px height, ~9999px radius) in #e5e5e5 off-state, #0a0a0a on-state. Thumb is white circle. No label inside — label sits adjacent. Pairs with descriptive text in #737373."

    checkbox_with_label:
      role: "Agreement or option selection"

      info: "Square 16px box, 1px #e5e5e5 border, 4px radius. Checked state fills with #0a0a0a and shows white checkmark. Label text at 14px Geist weight 400 in #0a0a0a sits immediately right."

    select___dropdown_trigger:
      role: "Option picker"

      info: "Same dimensions as text input. Shows current value in #0a0a0a, placeholder in #737373. Right-side chevron icon in #737373. 10px border-radius, 1px #e5e5e5 border."

    slider:
      role: "Range value input"

      info: "Horizontal track in #e5e5e5, filled portion in #0a0a0a. Thumb is a small circle. 4px height on track. No border or shadow. Label \"Price Range\" above in 14px Geist weight 500."

    tab___segmented_control:
      role: "Switching between related views"

      info: "Inline group of text labels (Syncing, Updating, Loading) with small status dot icons. No background container. Active state may have a subtle underline or bold weight. 6px gap between items."

    radio_group_item:
      role: "Single-selection option"

      info: "Circular radio with outer ring at #e5e5e5 and inner dot at #0a0a0a when selected. Label text beside it in 14px Geist. Used inside the Compute Environment card."

    tag___chip:
      role: "Inline metadata or filter"

      info: "Rounded shape (~26px radius), #f2f2f2 or white background with #e5e5e5 border, 2-4px vertical and 8-10px horizontal padding. 12-13px Geist weight 500 text. May include a leading icon."

    dark_surface_card:
      role: "Inverted contrast element"

      info: "Uses #171717 as background with white or light-gray text. Same 14px radius and 16px padding as light cards. Used sparingly for visual punctuation (dark mode previews, terminal-style blocks, or notification surfaces)."

  do_s_and_don_ts:

    do:
      - "Use #0a0a0a as the fill for the single primary action button on any screen — never use #171717, #737373, or any lighter gray for a filled CTA"
      - "Use #e5e5e5 for all 1px borders — cards, inputs, table rows, dividers, nav separators. It is the structural color of the system"
      - "Use 10px border-radius for buttons, inputs, and nav items; 14px for cards; ~26px for tags; 9999px only for true pill shapes"
      - "Use Geist at 14px weight 400 with 1.43 line-height for body text, and 48px weight 600 with -0.05em letter-spacing for display headings"
      - "Keep section gaps at 48px and element gaps at 8px — the system is compact, not spacious; never let whitespace exceed the hairline grid"
      - "Use #737373 for all secondary/muted text and #0a0a0a for all primary text; never use a chromatic gray or a tinted neutral"
      - "When showing a filled button next to a secondary action, use the filled black button + ghost text button pattern — never two filled buttons side by side"

    don_t:
      - "Do not introduce any chromatic color — no blues, greens, reds, or purples for buttons, links, icons, or accents. The system is strictly achromatic"
      - "Do not use shadows for elevation. Cards separate via 1px #e5e5e5 borders, not box-shadow. The only permitted shadow pattern is the 1px oklab outline ring"
      - "Do not use border-radius values outside the scale: 4px, 10px, 14px, 26px, 9999px. No 6px, 8px, 12px, 16px, or 20px radii"
      - "Do not use a sans-serif other than Geist (or its substitute Inter) — avoid decorative, humanist, or serif typefaces"
      - "Do not use letter-spacing wider than 0 at any size — the system tracks tight (-0.05em at display, -0.025em at subhead) and never goes positive"
      - "Do not place more than one filled black button in the same visual region — the system uses single primary actions surrounded by ghost and surface controls"
      - "Do not use gradients of any kind — fills are always solid; the system has no gradient vocabulary"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — the base layer everything sits on |"
    info: "| 1 | Card | `#ffffff` | Component preview cards share the canvas color, separated only by 1px #e5e5e5 borders |"
    info: "| 2 | Muted Surface | `#f2f2f2` | Tags, ghost button hovers, pill badges, subtle micro-backgrounds |"
    info: "| 3 | Inverted Surface | `#171717` | Dark-mode preview tiles, inverted cards, notification surfaces — the single dark surface in an otherwise light system |"

  elevation:

    info: "The system deliberately avoids box-shadow for elevation. Separation is achieved entirely through 1px hairline borders in #e5e5e5. The only shadow-like effect is a 1px outer ring using oklab(0.145 0 0 / 0.1) on certain cards, which reads as a slightly darker border rather than true elevation. This border-first philosophy keeps the UI flat, architectural, and reminiscent of wireframes — appropriate for a design-system documentation site where components should be readable as structure, not as finished product."

  imagery:

    info: "No photography, no illustration, no decorative imagery. The site is pure UI: the components themselves (payment forms, team lists, settings panels, chat inputs) serve as the visual content. Icons are minimal line-art at 16px in #737373 or #0a0a0a, drawn at ~1.5px stroke weight. The visual density comes from the grid of component preview cards, not from imagery — each card is a self-contained micro-screenshot of a real component in its natural state."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0a0a0a (primary), #737373 (secondary/muted)"
    - "background: #ffffff (canvas/card), #f2f2f2 (muted surface), #171717 (inverted)"
    - "border: #e5e5e5 (hairline), #a1a1a1 (disabled), #0a0a0a (emphasis)"
    - "accent: none — the system has no chromatic accent"
    - "primary action: no distinct CTA color"

    example_component_prompts:

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

    - "**Component Preview Card**: White background, 1px solid #e5e5e5 border, 14px border-radius, 16px padding. Card title at 16px Geist weight 600 in #0a0a0a. Helper text at 13px Geist weight 400 in #737373. Content area below with compact 8px gaps between elements."

    - "**Form Input**: White background, 1px solid #e5e5e5 border, 10px border-radius, 10px vertical / 12px horizontal padding. Placeholder text in #737373 at 14px Geist weight 400. Value text in #0a0a0a."

    - "**Pill Badge**: #f2f2f2 background, 26px border-radius, 4px vertical / 10px horizontal padding. 12px Geist weight 500 in #0a0a0a. Optional leading icon in #737373 at 12px."

    - "**Settings Row with Toggle**: Horizontal row, 8px gap between label and control. Label at 14px Geist weight 500 in #0a0a0a, sub-label at 13px Geist weight 400 in #737373. Toggle on the right: 20px height track, 9999px radius, #0a0a0a when on, #e5e5e5 when off, white circular thumb."

  similar_brands:

    - "**Vercel** — Shares the Geist typeface and the strictly black-and-white aesthetic with 10px radii — the visual DNA is essentially the same"
    - "**Linear** — Same compact density, same hairline-border-first approach, same absence of decorative color in favor of pure structural geometry"
    - "**Radix UI** — Both are unstyled component library sites with minimal chrome — the cards and documentation layout patterns are nearly identical"
    - "**Tailwind CSS** — Documentation sites with the same stark white canvas, no marketing imagery, and component-grid as the primary content pattern"
    - "**Geist UI** — Shares the Geist font and the monochromatic, border-driven component aesthetic at matching scale"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-graphite: #0a0a0a;
          --color-pure-black: #000000;
          --color-carbon: #171717;
          --color-concrete: #737373;
          --color-ash: #a1a1a1;
          --color-smoke: #b9b9b9;
          --color-hairline: #e5e5e5;
          --color-mist: #f2f2f2;
          --color-chalk: #ffffff;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.43;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.45px;
          --text-display: 48px;
          --leading-display: 1.1;
          --tracking-display: -2.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-83: 83px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 26px;
          --radius-full: 9996px;
          --radius-full-2: 9999px;
          --radius-full-3: 159981px;
          --radius-full-4: 159984px;
        
          /* Named Radii */
          --radius-nav: 10px;
          --radius-cards: 14px;
          --radius-pills: 9999px;
          --radius-badges: 26px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
        
          /* Shadows */
          --shadow-subtle: lab(100 0 0) 0px 0px 0px 2px;
          --shadow-subtle-2: oklab(0.145 -0.00000143796 0.00000340492 / 0.1) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
          --surface-muted-surface: #f2f2f2;
          --surface-inverted-surface: #171717;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-graphite: #0a0a0a;
          --color-pure-black: #000000;
          --color-carbon: #171717;
          --color-concrete: #737373;
          --color-ash: #a1a1a1;
          --color-smoke: #b9b9b9;
          --color-hairline: #e5e5e5;
          --color-mist: #f2f2f2;
          --color-chalk: #ffffff;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.43;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.45px;
          --text-display: 48px;
          --leading-display: 1.1;
          --tracking-display: -2.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-83: 83px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 26px;
          --radius-full: 9996px;
          --radius-full-2: 9999px;
          --radius-full-3: 159981px;
          --radius-full-4: 159984px;
        
          /* Shadows */
          --shadow-subtle: lab(100 0 0) 0px 0px 0px 2px;
          --shadow-subtle-2: oklab(0.145 -0.00000143796 0.00000340492 / 0.1) 0px 0px 0px 1px;
        }