openai_developers___style_reference:
  info: "> stark white laboratory"

  theme: "light"

  info: "OpenAI Developers is a stark, documentation-first interface built on pure white canvas with near-black text and zero chromatic accent. Visual hierarchy lives entirely in typographic weight, generous whitespace, and quiet surface shifts between #ffffff, #f9f9f9, and #f3f3f3 rather than color, shadow, or decoration. Components are flat, geometric, and small: 8px-radius cards with hair-thin borders, pill-shaped controls, and a single dark button that reads as the only significant mass on screen. The result feels like an engineering reference sheet — precise, unornamented, and confident that the content carries the weight. Color appears only as deliberate punctuation: a blue-purple gradient on the model-version badge and, below the fold, gradient product cards that break the monochrome to signal featured material."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, inverse text on dark buttons |"
    info: "| Carbon | `#181818` | `--color-carbon` | Section backgrounds, dark surface containers, large heading text |"
    info: "| Fog White | `#f9f9f9` | `--color-fog-white` | Card backgrounds, subtle elevated surfaces, ghost button hover fills |"
    info: "| Ash Gray | `#5d5d5d` | `--color-ash-gray` | Secondary body text, muted icon strokes, helper labels |"
    info: "| Graphite | `#282828` | `--color-graphite` | Navigation text, inline link color, icon fills — softer than pure black for repeated text contexts |"
    info: "| Mist Gray | `#ededed` | `--color-mist-gray` | Hairline borders, nav separators, disabled state fills |"
    info: "| Linen | `#f3f3f3` | `--color-linen` | Card hover state, second-tier surface tint |"
    info: "| Ink | `#0d0d0d` | `--color-ink` | High-emphasis nav text, logo wordmark, near-black fallback |"
    info: "| Smoke | `#8f8f8f` | `--color-smoke` | Tertiary text, placeholder copy, scrollbar tracks |"
    info: "| Slate Whisper | `#64748b` | `--color-slate-whisper` | Muted metadata, caption text, minor UI labels |"

  tokens___typography:

    openai_sans___sole_typeface_across_all_surfaces__weight_400_for_body__500_for_nav_and_card_titles__600_for_the_page_hero_headline__the_tight_negative_letter_spacing__0_008em_to__0_02em_pulls_characters_together_for_a_dense__editorial_feel_at_every_size_____font_openai_sans:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12, 14, 16, 18, 20, 30px"
      - "**Line height:** 1.30–1.75 (body), 1.00–1.43 (headings)"
      - "**Letter spacing:** -0.02em at 30px, -0.011em at 20px, -0.01em at 18px, -0.008em at 16px and below"
      - "**Role:** Sole typeface across all surfaces. Weight 400 for body, 500 for nav and card titles, 600 for the page hero headline. The tight negative letter-spacing (-0.008em to -0.02em) pulls characters together for a dense, editorial feel at every size."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.008px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.008px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.008px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.01px | `--text-subheading` |"
      info: "| heading | 20px | 1.4 | -0.011px | `--text-heading` |"
      info: "| display | 30px | 1.2 | -0.02px | `--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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 2px -1px` | `--shadow-subtle` |"

    layout:

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

  components:

    feature_card:
      role: "Three-column content tile for product areas (API Platform, Codex, Apps SDK)"

      info: "White or #f9f9f9 background, 8px border-radius, 24px padding, no border or 1px #ededed border. Icon at top-left in 20px stroke weight #282828. Title in 16px weight 500 #181818 with 8px gap to description text in 14px weight 400 #5d5d5d. No shadow on rest state."

    announcement_banner:
      role: "Highlighted model release card with gradient thumbnail"

      info: "Full-width card with #f9f9f9 background, 8px radius, 24px vertical padding. Left: 48px gradient thumbnail (blue-to-purple) containing white '5.5' numerals. Right: title 16px weight 600 #181818, body 14px #5d5d5d, and a small 'Read the GPT-5.5 prompting guide' link with arrow icon."

    dark_pill_button:
      role: "Primary header action (API Dashboard)"

000000_background__ffffff_text__9999px_border_radius__10px_vertical_and_16px_horizontal_padding__text_at_14px_weight_500__sits_in_top_right_of_nav__no_border__no_shadow:

    ghost_nav_button:
      role: "Inactive navigation items (Home, API, Codex, ChatGPT, Resources)"

      info: "Transparent background, 8px radius, 10px vertical and 12px horizontal padding. Text at 14px weight 500 in #282828. Active state uses #ededed background fill with #0d0d0d text."

    search_input:
      role: "Site search field in header"

      info: "Transparent or #ededed background, 8px radius, 10px vertical and 10px horizontal padding. Placeholder 'Start searching' in 14px #8f8f8f. Magnifying glass icon right-aligned in 16px #282828."

    featured_gradient_card:
      role: "Below-fold product showcase tiles (Codex use cases, Showcase)"

      info: "Full-bleed gradient fill (blue-to-violet, light to deep), 8px radius, content in white overlay. Headline 20px weight 500 white, no visible card chrome — the gradient IS the surface."

    section_heading_stack:
      role: "Page hero title and supporting copy"

      info: "Centered layout. Main headline 30px weight 600 #181818 with -0.6px letter-spacing. Subtitle 16px weight 400 #5d5d5d directly below with 12px gap. No eyebrow text, no decorative rule."

    icon_glyph:
      role: "Functional icons on feature cards and nav"

      info: "20px size, 1.5px stroke weight, #282828 stroke. Monoline outlined style. No filled variants detected — all icons use stroke-only geometry."

    inline_arrow_link:
      role: "Text link with directional indicator (e.g., 'Read the GPT-5.5 prompting guide ↗')"

      info: "14px weight 500 #282828 text, 1px #282828 arrow icon inline. No underline on rest; underline appears on hover. Gap of 4px between text and arrow."

  do_s_and_don_ts:

    do:
      - "Use 8px border-radius on all cards, inputs, and rectangular buttons"
      - "Use 9999px border-radius exclusively for pill-shaped buttons and tag chips"
      - "Set body text at 16px weight 400 with letter-spacing -0.008em"
      - "Anchor all headlines at 30px weight 600 with letter-spacing -0.02em"
      - "Keep page canvas pure #ffffff; reach for #f9f9f9 only for card surfaces that need quiet separation"
      - "Use #000000 for the single dark CTA; never introduce a colored CTA background"
      - "Maintain 4px base unit for all gaps and padding — avoid 5px, 7px, or other odd values"

    don_t:
      - "Do not add a chromatic accent to UI controls — color belongs only in decorative product cards and the model badge"
      - "Do not use shadows beyond the single 1px 0,0,0,0.08 hairline; depth comes from surface shifts, not elevation"
      - "Do not set border-radius above 8px on rectangular surfaces — the only exception is pill controls"
      - "Do not mix font families — OpenAI Sans is the sole typeface, weight changes create hierarchy"
      - "Do not use pure black for large body text — reserve #000000 for buttons and headings, use #181818 for heading and #282828 for repeated body contexts"
      - "Do not add gradient fills to UI chrome; gradients are reserved for featured product tiles below the fold"
      - "Do not exceed 30px for typography — the scale is deliberately compressed, hierarchy lives in weight and spacing"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Page background, full-bleed base |"
    info: "| 2 | Card | `#f9f9f9` | Feature cards, announcement banner, subtle surface lift |"
    info: "| 3 | Card Hover | `#f3f3f3` | Interactive card hover state, secondary tint |"
    info: "| 4 | Divider | `#ededed` | Hairline borders, nav separators, search input background |"
    info: "| 5 | Dark Surface | `#181818` | Inverted sections, dark heading text, contrast blocks |"

  elevation:

    info: "The design rejects shadow-based elevation. Depth is communicated entirely through surface color shifts across a five-step stack (#ffffff → #f9f9f9 → #f3f3f3 → #ededed → #181818). The only shadow present is a barely-perceptible 1px hairline (rgba(0,0,0,0.08) 0 1px 2px -1px) that hints at containment without declaring it. This paper-like flatness keeps the interface feeling like a printed reference document."

  imagery:

    info: "Virtually no imagery on the primary view. Visual interest comes from a single gradient thumbnail (blue-to-violet) on the model-version badge and gradient-filled product cards below the fold. Icons are monoline outlined at 20px with 1.5px stroke in #282828 — no filled variants, no multicolor icons. The aesthetic is anti-illustrative: the page is text, whitespace, and geometry, with color appearing only where it carries product meaning."

  layout:

    info: "Max-width 1200px centered content with generous outer margins. Hero is a centered text stack (headline + subtitle) with no visual above the fold. Content flows in a single column at the top, then opens into a 3-column card grid for product areas (API Platform, Codex, Apps SDK). Below the fold, a 2-column band alternates text descriptions with gradient product cards. Navigation is a single horizontal bar at the top with logo left, center nav links, and search + dark CTA right. No sidebar, no sticky elements beyond the nav. Section gaps are 64px, creating strong vertical rhythm between discrete content blocks."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text (primary): #181818"
    - "text (secondary): #5d5d5d"
    - "background: #ffffff"
    - "card surface: #f9f9f9"
    - "border: #ededed"
    - "dark button fill: #000000"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Create a hero section: white #ffffff background, centered layout. Headline at 30px OpenAI Sans weight 600, #181818, letter-spacing -0.6px. Subtitle at 16px weight 400, #5d5d5d, 12px gap below headline. No eyebrow, no background image."

    - "Create a feature card grid: 3 equal columns, 20px gap between cards. Each card has #f9f9f9 background, 8px border-radius, 24px padding. 20px monoline icon in #282828 at top-left, 16px space below to 16px weight 500 #181818 title, then 8px gap to 14px weight 400 #5d5d5d body text."

    - "Create a dark pill button: #000000 background, #ffffff text at 14px weight 500, 9999px border-radius, 10px vertical padding, 16px horizontal padding, OpenAI Sans font."

    - "Create a ghost navigation button: transparent background, 8px radius, 10px vertical and 12px horizontal padding, 14px weight 500 #282828 text, no border."

    - "Create an announcement banner: #f9f9f9 background, 8px radius, 24px vertical padding, full-width within 1200px container. Left side: 48px square gradient thumbnail (blue #6366f1 to violet #8b5cf6) with white '5.5' text. Right side: 16px weight 600 #181818 title, 14px #5d5d5d body below, and a 14px #282828 arrow link after 8px gap."

  similar_brands:

    - "**Stripe Docs** — Same documentation-first philosophy with near-identical grayscale palette, 8px card radii, and zero-chromatic accent discipline"
    - "**Linear** — Both rely on typographic weight and surface color shifts for hierarchy rather than color or shadow, with compressed type scales and pill-shaped controls"
    - "**Vercel** — Stark monochrome interface, single dark button as the only dense mass, generous whitespace, and restrained border treatment"
    - "**Anthropic Docs** — Direct competitor in AI developer docs — same editorial approach, white canvas, hairline borders, and content-forward layout"
    - "**GitHub Primer** — Both use a near-exclusively neutral palette with subtle surface progressions and 8px as the default radius token"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-carbon: #181818;
          --color-fog-white: #f9f9f9;
          --color-ash-gray: #5d5d5d;
          --color-graphite: #282828;
          --color-mist-gray: #ededed;
          --color-linen: #f3f3f3;
          --color-ink: #0d0d0d;
          --color-smoke: #8f8f8f;
          --color-slate-whisper: #64748b;
        
          /* Typography — Font Families */
          --font-openai-sans: 'OpenAI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.008px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.008px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.008px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --tracking-heading: -0.011px;
          --text-display: 30px;
          --leading-display: 1.2;
          --tracking-display: -0.02px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px -1px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #f9f9f9;
          --surface-card-hover: #f3f3f3;
          --surface-divider: #ededed;
          --surface-dark-surface: #181818;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-carbon: #181818;
          --color-fog-white: #f9f9f9;
          --color-ash-gray: #5d5d5d;
          --color-graphite: #282828;
          --color-mist-gray: #ededed;
          --color-linen: #f3f3f3;
          --color-ink: #0d0d0d;
          --color-smoke: #8f8f8f;
          --color-slate-whisper: #64748b;
        
          /* Typography */
          --font-openai-sans: 'OpenAI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.008px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.008px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.008px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --tracking-heading: -0.011px;
          --text-display: 30px;
          --leading-display: 1.2;
          --tracking-display: -0.02px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px -1px;
        }