oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/openai/DESIGN.md

@@ -0,0 +1,641 @@
+---
+id: openai
+name: OpenAI
+country: US
+category: ai
+homepage: "https://openai.com"
+primary_color: "#10a37f"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=openai.com&sz=128"
+verified: "2026-06-06"
+added: "2026-06-06"
+omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#10a37f"
+    primary-hover: "#1a7f64"
+    primary-tint: "#d9f2ea"
+    canvas: "#ffffff"
+    ink: "#0d0d0d"
+    brand-black: "#000000"
+    error: "#ef4146"
+    warning: "#f5a623"
+    info: "#4d6bfe"
+    gray-50: "#f7f7f8"
+    gray-100: "#ececec"
+    gray-200: "#e5e5e5"
+    gray-300: "#d1d1d1"
+    gray-400: "#b4b4b4"
+    gray-500: "#9b9b9b"
+    gray-600: "#6e6e80"
+    gray-700: "#40414f"
+    gray-800: "#2d2d2d"
+    surface-base: "#212121"
+    surface-sunken: "#171717"
+    surface-raised: "#2f2f2f"
+    dark-border: "#3e3e42"
+    amber-bg: "#fdf0d5"
+    amber-text: "#b8770f"
+  typography:
+    family: { sans: "OpenAI Sans", mono: "SF Mono" }
+    display-hero: { size: 56, weight: 600, lineHeight: 1.07, tracking: "-0.02em", use: "Marketing hero, launch pages" }
+    display-lg: { size: 40, weight: 600, lineHeight: 1.15, tracking: "-0.02em", use: "Section headers" }
+    h1: { size: 32, weight: 600, lineHeight: 1.25, tracking: "-0.01em", use: "Page titles" }
+    h2: { size: 24, weight: 600, lineHeight: 1.33, tracking: "-0.01em", use: "Sub-sections, card titles" }
+    h3: { size: 20, weight: 600, lineHeight: 1.4, use: "Group labels, modal headers" }
+    subtitle: { size: 18, weight: 500, lineHeight: 1.56, use: "Lead paragraphs, list headers" }
+    body-lg: { size: 16, weight: 400, lineHeight: 1.63, use: "Marketing body, descriptions" }
+    body: { size: 15, weight: 400, lineHeight: 1.6, use: "Standard reading text, chat" }
+    body-sm: { size: 14, weight: 400, lineHeight: 1.57, use: "Secondary info, dense UI" }
+    caption: { size: 13, weight: 400, lineHeight: 1.38, use: "Timestamps, metadata, helper" }
+    code: { size: 14, weight: 400, lineHeight: 1.57, use: "Code blocks, tokens, IDs" }
+  spacing: { sm: 8, md: 12, base: 16, lg: 24 }
+  rounded: { sm: 6, md: 8, lg: 12, xl: 16, full: 9999 }
+  shadow:
+    card-hover: "0 4px 12px rgba(0,0,0,0.06)"
+    toast: "0 4px 16px rgba(0,0,0,0.16)"
+    dialog: "0 8px 32px rgba(0,0,0,0.16)"
+  components:
+    button-primary: { type: button, bg: "#0d0d0d", fg: "#ffffff", radius: 12, padding: "0 20px", font: "15px/500", use: "Default primary action" }
+    button-teal: { type: button, bg: "#10a37f", fg: "#ffffff", radius: 12, padding: "0 20px", font: "15px/500", use: "Brand-forward conversion CTA" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#0d0d0d", radius: 12, padding: "0 20px", font: "15px/500", use: "Secondary action" }
+    button-ghost: { type: button, bg: "transparent", fg: "#0d0d0d", radius: 8, padding: "0 12px", font: "14px/500", use: "Low-emphasis inline action" }
+    pill: { type: button, bg: "#ffffff", fg: "#0d0d0d", radius: 9999, padding: "8px 16px", font: "14px/400", use: "Prompt-suggestion chip, filter, model selector" }
+    chat-composer: { type: input, bg: "#ffffff", fg: "#0d0d0d", radius: 26, padding: "14px 18px", font: "16px/400", use: "Signature ChatGPT message input" }
+    form-field: { type: input, bg: "#ffffff", fg: "#0d0d0d", radius: 8, padding: "10px 12px", font: "15px/400", use: "Settings, API keys, account forms" }
+    card: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "Docs cards, pricing, model cards" }
+    card-dark: { type: card, bg: "#2f2f2f", radius: 12, padding: "24px", use: "Cards on dark canvas" }
+    user-message: { type: listItem, bg: "#f7f7f8", fg: "#0d0d0d", radius: 18, padding: "10px 16px", use: "ChatGPT user turn bubble" }
+    badge-neutral: { type: badge, bg: "#ececec", fg: "#40414f", radius: 6, padding: "2px 8px", font: "12px/500", use: "Model labels, version tags" }
+    badge-teal: { type: badge, bg: "#d9f2ea", fg: "#1a7f64", radius: 6, padding: "2px 8px", font: "12px/500", use: "New, Plus, positive emphasis" }
+    badge-amber: { type: badge, bg: "#fdf0d5", fg: "#b8770f", radius: 6, padding: "2px 8px", font: "12px/500", use: "Preview, Rate limited, caution" }
+    tab-underline: { type: tab, bg: "transparent", fg: "#6e6e80", font: "15px/500", use: "Docs, settings, API reference", active: "#0d0d0d text, 2px bottom border #0d0d0d" }
+    segmented: { type: tab, bg: "#ececec", fg: "#6e6e80", radius: 8, font: "14px/500", use: "Mode/plan toggle", active: "#ffffff bg, #0d0d0d text" }
+    toast: { type: toast, bg: "#0d0d0d", fg: "#ffffff", radius: 10, padding: "12px 16px", font: "14px/400", use: "Transient confirmation (Copied, Saved)" }
+    dialog: { type: dialog, bg: "#ffffff", radius: 16, padding: "24px", use: "Confirmations, settings, upgrade prompts" }
+    toggle: { type: toggle, bg: "#10a37f", radius: 9999, use: "Boolean settings, on=teal off=#d1d1d1" }
+  components_harvested: true
+---
+
+# Design System Inspiration of OpenAI
+
+## 1. Visual Theme & Atmosphere
+
+OpenAI's interface is the visual argument that powerful technology should feel quiet. The canvas is uncompromising near-black-on-white (`#0d0d0d` text on `#ffffff`), with the signature teal-green (`#10a37f`) reserved almost exclusively for the moments that matter — the active state, the brand mark, a confirmation. There is no gradient theater, no glassmorphism, no drop-shadow drama. The page reads like a well-set book that happens to be interactive: generous margins, a single column of attention, type doing nearly all the expressive work.
+
+The 2025 rebrand crystallized this with **OpenAI Sans**, a bespoke grotesque commissioned from **ABC Dinamo**, replacing the previous Klim Type Foundry pairing of **Söhne** (UI/blog) and **Signifier** (research papers). OpenAI Sans is humanist-leaning — open apertures, a warm single-story `a`, slightly squared terminals — engineered to feel approachable at body sizes and authoritative at display sizes. It ships in five weights (Light, Regular, Medium, Semibold, Bold), each with a true italic. The product surface (ChatGPT, the API platform, the marketing site) leans on Regular and Medium, escalating to Semibold/Bold only for headings.
+
+What defines OpenAI visually is **restraint as a statement of trust**. The aesthetic refuses the neon-and-glow visual language that became shorthand for "AI." Instead it borrows from editorial design and Swiss typography: a system that recedes so the model's output is the only thing on stage. The product is dark-mode-native too — ChatGPT's default-dark surfaces (`#212121`, `#171717`) are as canonical as the light marketing pages, and the teal accent is tuned to hold contrast in both.
+
+**Key Characteristics:**
+- OpenAI Teal (`#10a37f`) as the singular brand/interactive accent — used sparingly, never decoratively
+- Near-black `#0d0d0d` text on pure white `#ffffff` (light) / off-white on `#212121` (dark)
+- OpenAI Sans (ABC Dinamo, 2025) as the bespoke system typeface — humanist grotesque, 5 weights
+- Editorial whitespace — long line measures, generous leading, single-column reading flow
+- Minimal-to-zero shadow; depth from hairline borders (`#e5e5e5`) and subtle surface tints
+- Dual light/dark parity — both modes are first-class, not afterthoughts
+- Soft-rounded geometry — buttons and cards at 8–12px radius, inputs often fully pill (9999px)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **OpenAI Teal** (`#10a37f`): Primary brand and interactive color — the logo mark, primary CTAs, active links, focus accents, success affirmations. Used with discipline; it is the only saturated hue in most layouts.
+- **Teal Hover** (`#1a7f64`): Darker teal for hover/pressed states on teal-filled elements.
+- **Teal Light** (`#d9f2ea`): Subtle teal-tinted backgrounds — inline success banners, selected rows.
+- **Pure White** (`#ffffff`): Page background and card surface in light mode.
+- **Near Black** (`#0d0d0d`): Primary text and the "black" of the wordmark. A true-feeling near-black, not pure `#000`, for softer contrast.
+
+### Brand (Logo / Marketing)
+- **Brand Black** (`#000000`): The official monochrome logo lockup on light backgrounds.
+- **Brand White** (`#ffffff`): The inverse logo on black/dark backgrounds.
+- **Brand Teal** (`#10a37f`): Permitted accent for the blossom/spiral mark in select brand contexts; the primary lockup remains monochrome.
+
+### Semantic
+- **Error Red** (`#ef4146`): Destructive actions, error states, validation failures.
+- **Success Green** (`#10a37f`): Confirmation and success — reuses the brand teal (the brand color *is* the success color).
+- **Warning Amber** (`#f5a623`): Caution, rate-limit warnings, pending review.
+- **Info Blue** (`#4d6bfe`): Informational callouts, links in documentation contexts.
+
+### Neutral Scale (Light)
+- **Gray 50** (`#f7f7f8`): Lightest surface — ChatGPT sidebar/light fills, code-block backgrounds.
+- **Gray 100** (`#ececec`): Secondary surface, hover fills, disabled backgrounds.
+- **Gray 200** (`#e5e5e5`): Default border, divider, hairline.
+- **Gray 300** (`#d1d1d1`): Stronger border, input outline.
+- **Gray 400** (`#b4b4b4`): Placeholder text, disabled icon.
+- **Gray 500** (`#9b9b9b`): Caption / tertiary text.
+- **Gray 600** (`#6e6e80`): Secondary body text, metadata (the signature OpenAI muted slate).
+- **Gray 700** (`#40414f`): Emphasized secondary text.
+- **Gray 800** (`#2d2d2d`): Strong labels, near-dark UI text.
+- **Gray 900** (`#0d0d0d`): Primary text / near-black.
+
+### Dark Mode Surfaces
+- **Surface Base** (`#212121`): ChatGPT main canvas in dark mode.
+- **Surface Sunken** (`#171717`): Sidebar, deeper panels.
+- **Surface Raised** (`#2f2f2f`): Cards, message bubbles, input bar on dark.
+- **Dark Border** (`#3e3e42` / `rgba(255,255,255,0.1)`): Hairline dividers on dark surfaces.
+- **Dark Text Primary** (`#ececec`): Body text on dark.
+- **Dark Text Secondary** (`#b4b4b4`): Secondary text on dark.
+
+### Surface & Borders
+- **Border Default**: `#e5e5e5` (light) / `rgba(255,255,255,0.1)` (dark).
+- **Border Strong**: `#d1d1d1` (light) / `rgba(255,255,255,0.2)` (dark).
+- **Overlay Scrim**: `rgba(0,0,0,0.5)` — modal backdrop, identical across modes.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `"OpenAI Sans", "Söhne", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
+- **Serif (research/editorial)**: `"Signifier", "Charter", Georgia, "Times New Roman", serif` — used for long-form research papers and select editorial moments.
+- **Monospace (code)**: `"SF Mono", "Söhne Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | OpenAI Sans | 56px | 600 | 60px (1.07) | -0.02em | Marketing hero, launch pages |
+| Display Large | OpenAI Sans | 40px | 600 | 46px (1.15) | -0.02em | Section headers |
+| Heading 1 | OpenAI Sans | 32px | 600 | 40px (1.25) | -0.01em | Page titles |
+| Heading 2 | OpenAI Sans | 24px | 600 | 32px (1.33) | -0.01em | Sub-sections, card titles |
+| Heading 3 | OpenAI Sans | 20px | 600 | 28px (1.40) | normal | Group labels, modal headers |
+| Subtitle | OpenAI Sans | 18px | 500 | 28px (1.56) | normal | Lead paragraphs, list headers |
+| Body Large | OpenAI Sans | 16px | 400 | 26px (1.63) | normal | Marketing body, descriptions |
+| Body | OpenAI Sans | 15px | 400 | 24px (1.60) | normal | Standard reading text, chat |
+| Body Small | OpenAI Sans | 14px | 400 | 22px (1.57) | normal | Secondary info, dense UI |
+| Caption | OpenAI Sans | 13px | 400 | 18px (1.38) | normal | Timestamps, metadata, helper |
+| Code | SF Mono / Söhne Mono | 14px | 400 | 22px (1.57) | normal | Code blocks, tokens, IDs |
+
+### Principles
+- **Five weights, three used**: OpenAI Sans ships Light–Bold, but UI leans on 400 (body), 500 (medium emphasis), 600 (headings). Bold and Light are accents, not workhorses.
+- **Negative tracking on display**: Large headings tighten to -0.01em / -0.02em for an editorial, confident set. Body text stays at default tracking.
+- **Generous leading on reading text**: Body line-height runs 1.6–1.63 — wider than typical product UI — to make model output and documentation feel calm and book-like.
+- **Serif signals "research"**: Signifier serif is a semantic cue. When OpenAI wants the tone of a paper, it switches to serif body. Product UI never uses serif.
+- **Mono for machine truth**: Code, API keys, token counts, and model IDs always render monospace — the typographic mark of "this is exact."
+
+## 4. Component Stylings
+
+### Buttons
+
+OpenAI buttons are calm, soft-cornered, and high-contrast. The default action is a solid near-black (or teal for brand CTAs); secondary actions are outlined or ghost. Geometry is consistent: ~12px radius for standard buttons, full pill for compact/chip actions.
+
+**Primary (Black)**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 0 20px
+- Height: 48px
+- Font: 15px / 500 / OpenAI Sans
+- Hover: `#2d2d2d`
+- Pressed: `#000000`
+- Disabled: `#e5e5e5` bg / `#9b9b9b` text
+- Use: The default primary action across product and marketing ("Get started", "Continue").
+
+**Primary (Teal / Brand CTA)**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 0 20px
+- Height: 48px
+- Font: 15px / 500 / OpenAI Sans
+- Hover: `#1a7f64`
+- Use: Brand-forward conversion moments (signup, upgrade to Plus) where teal reinforces identity.
+
+**Secondary (Outline)**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#d1d1d1`
+- Radius: 12px
+- Padding: 0 20px
+- Height: 48px
+- Font: 15px / 500 / OpenAI Sans
+- Hover: `#f7f7f8` bg, border `#0d0d0d`
+- Use: Secondary action paired with a primary ("Learn more", "Cancel").
+
+**Ghost / Tertiary**
+- Background: transparent
+- Text: `#0d0d0d`
+- Border: none
+- Radius: 8px
+- Padding: 0 12px
+- Height: 40px
+- Font: 14px / 500 / OpenAI Sans
+- Hover: `#ececec` bg
+- Use: Low-emphasis inline actions, toolbar buttons, menu items.
+
+**Pill (Compact / Suggestion chip)**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Radius: 9999px
+- Padding: 8px 16px
+- Font: 14px / 400 / OpenAI Sans
+- Hover: `#f7f7f8`
+- Use: ChatGPT prompt-suggestion chips, filter pills, model selectors.
+
+**Dark-mode Primary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Radius: 12px
+- Height: 48px
+- Font: 15px / 500
+- Use: On dark surfaces, the primary inverts to a white fill with dark text for maximum contrast.
+
+### Inputs
+
+OpenAI's signature input is the ChatGPT composer — a large, fully-rounded field that anchors the screen. Form inputs in the API platform use rectangular soft-cornered fields.
+
+**Chat Composer (signature)**
+- Background: `#ffffff` (light) / `#2f2f2f` (dark)
+- Text: `#0d0d0d` / `#ececec`
+- Border: 1px solid `#e5e5e5` / `rgba(255,255,255,0.1)`
+- Radius: 26px (pill-like, near-fully-rounded)
+- Padding: 14px 18px
+- Font: 16px / 400 / OpenAI Sans
+- Placeholder: `#9b9b9b`
+- Focus: subtle border darken to `#b4b4b4`; soft `0 2px 8px rgba(0,0,0,0.08)` lift
+- Use: The central message input — wide, tall, inviting, with inline send/attach icons.
+
+**Standard Form Field**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#d1d1d1`
+- Radius: 8px
+- Padding: 10px 12px
+- Font: 15px / 400 / OpenAI Sans
+- Placeholder: `#9b9b9b`
+- Focus: border `#10a37f` + `0 0 0 3px rgba(16,163,127,0.2)` ring
+- Use: Settings, API keys, account forms.
+
+**Error Field**
+- Border: 1px solid `#ef4146`
+- Focus ring: `0 0 0 3px rgba(239,65,70,0.2)`
+- Helper text below: `#ef4146` 13px
+- Use: Validation failure — paired with a single actionable error line.
+
+### Cards
+
+**Standard**
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 24px
+- Shadow: none (border carries the edge)
+- Use: Documentation cards, pricing tiers, model cards.
+
+**Interactive / Hover**
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 20px
+- Hover: border `#0d0d0d` or subtle `0 4px 12px rgba(0,0,0,0.06)` lift
+- Use: Clickable cards — model picker, example gallery, app links.
+
+**Dark Card**
+- Background: `#2f2f2f`
+- Border: 1px solid `rgba(255,255,255,0.1)`
+- Radius: 12px
+- Padding: 24px
+- Use: Cards on the dark product canvas.
+
+### Message Bubbles (ChatGPT)
+
+**User Message**
+- Background: `#f7f7f8` (light) / `#2f2f2f` (dark)
+- Text: `#0d0d0d` / `#ececec`
+- Radius: 18px
+- Padding: 10px 16px
+- Align: right, max-width ~70%
+- Use: The user's turn.
+
+**Assistant Message**
+- Background: transparent (no bubble)
+- Text: `#0d0d0d` / `#ececec`
+- Padding: 4px 0
+- Align: full-width, left
+- Use: Model output reads as flowing document text, deliberately not boxed — reinforcing "this is content, not a chat snippet."
+
+### Badges
+
+**Default (Neutral)**
+- Background: `#ececec`
+- Text: `#40414f`
+- Border: none
+- Radius: 6px
+- Padding: 2px 8px
+- Font: 12px / 500 / OpenAI Sans
+- Use: Model labels, version tags ("GPT-4o", "Beta").
+
+**Teal (Brand / New)**
+- Background: `#d9f2ea`
+- Text: `#1a7f64`
+- Radius: 6px
+- Padding: 2px 8px
+- Font: 12px / 500
+- Use: "New", "Plus", positive emphasis.
+
+**Amber (Caution)**
+- Background: `#fdf0d5`
+- Text: `#b8770f`
+- Radius: 6px
+- Padding: 2px 8px
+- Font: 12px / 500
+- Use: "Preview", "Rate limited", caution states.
+
+### Tabs
+
+**Underline Tabs**
+- Background: transparent
+- Inactive text: `#6e6e80`
+- Active text: `#0d0d0d`
+- Active indicator: 2px bottom border `#0d0d0d` (or `#10a37f` in brand contexts)
+- Font: 15px / 500 / OpenAI Sans
+- Use: Documentation, settings sections, API reference.
+
+**Segmented**
+- Track background: `#ececec`
+- Radius: 8px
+- Active segment: `#ffffff` bg + `#0d0d0d` text + `0 1px 3px rgba(0,0,0,0.08)`
+- Inactive: `#6e6e80` text
+- Font: 14px / 500
+- Use: Light/dark or mode toggles, plan switching.
+
+### Toasts
+
+**Default**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Border: none
+- Radius: 10px
+- Padding: 12px 16px
+- Shadow: `0 4px 16px rgba(0,0,0,0.16)`
+- Font: 14px / 400 / OpenAI Sans
+- Use: Transient confirmation ("Copied", "Saved"). Auto-dismiss ~3s.
+
+### Dialogs
+
+**Centered Modal**
+- Background: `#ffffff` (light) / `#2f2f2f` (dark)
+- Border: 1px solid `#e5e5e5` / `rgba(255,255,255,0.1)`
+- Radius: 16px
+- Padding: 24px
+- Shadow: `0 8px 32px rgba(0,0,0,0.16)`
+- Backdrop: `rgba(0,0,0,0.5)`
+- Use: Confirmations, settings panels, upgrade prompts.
+
+### Toggles
+
+**Default**
+- Track: `#10a37f` (on) / `#d1d1d1` (off)
+- Radius: 9999px
+- Thumb: `#ffffff` 18px circle, `0 1px 2px rgba(0,0,0,0.1)`
+- Use: Boolean settings (custom instructions, data controls).
+
+---
+
+
+**Tier 1 sources:** https://openai.com (live production site, verified via live DOM getComputedStyle).
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px
+- Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
+- Marketing section vertical rhythm: 96–128px between major bands
+- Product UI horizontal padding: 16–24px; marketing: centered max-width with auto margins
+
+### Grid & Container
+- Marketing max-width: ~1200px centered, with ~24px gutters
+- Reading column (docs/blog): ~720px max measure for comfortable line length
+- ChatGPT conversation column: ~768px max-width centered, regardless of viewport
+- 12-column grid for marketing layouts; single-column for reading and chat
+
+### Whitespace Philosophy
+- **Whitespace is the brand.** Generous margins and long vertical rhythm signal calm confidence. Crowding reads as anxious; OpenAI never crowds.
+- **One thing per band.** Marketing sections present a single idea with breathing room, not feature grids of equal weight.
+- **The reading measure is sacred.** Long-form text caps at ~720px so lines stay readable — content never spans the full viewport.
+- **Center the conversation.** ChatGPT pins content to a fixed central column even on ultrawide screens, keeping focus on the dialogue.
+
+### Border Radius Scale
+- Tight (6px): Badges, tags, small chips
+- Standard (8px): Form inputs, ghost buttons, segmented controls
+- Comfortable (12px): Buttons, cards
+- Large (16px): Modals, large panels
+- XL (18–26px): Message bubbles, chat composer
+- Pill (9999px): Suggestion chips, toggles, avatar rings
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow; hairline border `#e5e5e5` | Cards, page sections, default surfaces |
+| Subtle (Level 1) | `0 1px 3px rgba(0,0,0,0.08)` | Active segmented control, slight lift |
+| Standard (Level 2) | `0 2px 8px rgba(0,0,0,0.08)` | Composer focus, hover cards, dropdowns |
+| Elevated (Level 3) | `0 4px 16px rgba(0,0,0,0.12)` | Popovers, menus, toasts |
+| Modal (Level 4) | `0 8px 32px rgba(0,0,0,0.16)` | Dialogs, command palette |
+
+**Shadow Philosophy**: OpenAI prefers **borders over shadows**. A 1px `#e5e5e5` hairline defines most edges; shadow appears only on genuinely floating elements (menus, modals, the composer on focus). Shadows are pure black at low opacity — no colored or layered glows. This editorial flatness is intentional: depth theater would undercut the calm, trustworthy tone. In dark mode, elevation is communicated through lighter surface tints (`#212121` → `#2f2f2f`) rather than shadow.
+
+### Blur Effects
+- Sticky marketing headers use a subtle `backdrop-filter: blur(12px)` with a translucent white/dark background on scroll.
+- Modal backdrops are flat scrims, not blurred, keeping the focus binary.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use OpenAI Teal (`#10a37f`) sparingly — for the mark, active states, and key CTAs only
+- Default to near-black `#0d0d0d` on white `#ffffff`; design dark mode as a first-class peer
+- Use OpenAI Sans at 400/500/600; apply slight negative tracking on large headings
+- Define edges with 1px hairline borders (`#e5e5e5`) before reaching for shadow
+- Cap reading text at ~720px measure with 1.6 line-height
+- Center the conversation/content column even on wide viewports
+- Use monospace for code, API keys, model IDs, and token counts
+
+### Don't
+- Don't use teal as a decorative fill or background wash — it is an accent, not a theme
+- Don't add gradients, glows, or neon "AI" visual clichés — restraint is the brand
+- Don't box assistant output in a bubble — model text flows as a document, left-aligned
+- Don't use serif for product UI — serif (Signifier) signals research/editorial only
+- Don't crowd layouts; if a section feels dense, it needs more whitespace, not less
+- Don't use heavy multi-layer or colored shadows — single-layer black, low opacity
+- Don't let reading text span the full viewport width
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, full-width composer, collapsed sidebar (drawer) |
+| Tablet | 640–1024px | Sidebar toggleable, content column ~640px |
+| Desktop | 1024–1440px | Persistent sidebar, centered ~768px conversation column |
+| Wide | >1440px | Content stays centered at max-width; margins grow, not content |
+
+### Touch Targets
+- Buttons: 48px primary height, 40px ghost — both comfortably tappable
+- Suggestion chips: minimum 36px height
+- Composer: ~52px+ tall for easy thumb access on mobile
+
+### Collapsing Strategy
+- ChatGPT sidebar collapses to an off-canvas drawer below tablet
+- Marketing nav collapses to a hamburger menu under 768px
+- Multi-column marketing grids stack to single column on mobile
+- Composer pins to the bottom of the viewport on mobile with safe-area insets
+
+### Image Behavior
+- Marketing imagery is full-bleed or contained within the 1200px grid, maintaining aspect ratio
+- Model-generated images render at the conversation column width with rounded corners (12px)
+- Avatars and logos: crisp at 24–40px, consistent sizing within a context
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA (default): Near Black (`#0d0d0d`)
+- Primary CTA (brand): OpenAI Teal (`#10a37f`)
+- CTA Hover (teal): `#1a7f64`
+- Background (light): Pure White (`#ffffff`)
+- Background (dark): `#212121`
+- Surface Raised (dark): `#2f2f2f`
+- Heading text: Near Black (`#0d0d0d`)
+- Body text: Near Black (`#0d0d0d`)
+- Secondary text: Slate Gray (`#6e6e80`)
+- Placeholder: Gray (`#9b9b9b`)
+- Border: Gray 200 (`#e5e5e5`)
+- Success: Teal (`#10a37f`)
+- Error: Red (`#ef4146`)
+- Warning: Amber (`#f5a623`)
+
+### Example Component Prompts
+- "Create a ChatGPT-style composer: white bg, 1px #e5e5e5 border, 26px radius, 14px/18px padding, 16px OpenAI Sans placeholder #9b9b9b. Inline send icon right. On focus: border #b4b4b4 + 0 2px 8px rgba(0,0,0,0.08)."
+- "Build a primary button: #0d0d0d bg, white text, 15px weight 500, 48px height, 12px radius, 0 20px padding. Hover #2d2d2d. Disabled #e5e5e5 bg, #9b9b9b text."
+- "Design a brand CTA: #10a37f bg, white text 15px weight 500, 48px height, 12px radius. Hover #1a7f64. Use for signup/upgrade only."
+- "Create a model card: white bg, 1px #e5e5e5 border, 12px radius, 24px padding. Title 20px weight 600 #0d0d0d. Description 15px weight 400 #6e6e80. Hover: border #0d0d0d."
+- "Design an assistant message: no bubble, transparent bg, left-aligned full-width, #0d0d0d text 15px weight 400, line-height 1.6. User message: #f7f7f8 bg, 18px radius, right-aligned, max-width 70%."
+- "Build a suggestion chip: white bg, 1px #e5e5e5 border, 9999px radius, 8px/16px padding, 14px weight 400. Hover #f7f7f8."
+
+### Iteration Guide
+1. Always use the OpenAI Sans stack with Söhne/Helvetica fallbacks
+2. Teal `#10a37f` is an accent for mark + active + key CTA — never a background wash
+3. Default primary action is near-black `#0d0d0d`; teal is the brand-forward alternative
+4. Prefer 1px `#e5e5e5` borders over shadows for edges
+5. Body line-height 1.6, reading measure ~720px, conversation column ~768px centered
+6. Design dark mode as a peer: `#212121` base, `#2f2f2f` raised, `#ececec` text
+7. Assistant output flows as document text — never boxed in a bubble
+
+---
+
+## 10. Voice & Tone
+
+OpenAI speaks like a thoughtful researcher who respects your intelligence: clear, plain, confident without hype. It avoids both corporate jargon and breathless "revolutionary" marketing. Sentences are short and declarative. Claims are measured — capabilities are described with their limits acknowledged. The voice is in American English, lowercase-comfortable in product microcopy, sentence case nearly everywhere (not Title Case).
+
+| Context | Tone |
+|---|---|
+| CTAs | Plain imperative — "Get started", "Try ChatGPT", "Start building". Sentence case. |
+| Product microcopy | Minimal, functional — "Send a message", "Regenerate", "Copy code". |
+| Success states | Quiet and brief — "Copied", "Saved". No exclamation marks. |
+| Error messages | Honest and specific — name what happened, offer a next step. Never blame the user. |
+| Onboarding | Calm, one concept at a time. Acknowledges the tool's novelty without overhyping. |
+| Capability claims | Measured — describe what the model does *and* its limitations. "may produce inaccurate information". |
+| Documentation | Precise, example-first, second person ("you can…"). |
+
+**Forbidden tone.** No hype superlatives ("game-changing", "revolutionary", "mind-blowing"), no fake urgency, no emoji in product chrome, no Title Case headings, no anthropomorphizing the model as a person with feelings. Safety and limitation language is never hidden — it is part of the honest voice.
+
+## 11. Brand Narrative
+
+OpenAI was founded in **December 2015** as a nonprofit AI research lab by a group including **Sam Altman**, **Elon Musk**, **Greg Brockman**, **Ilya Sutskever**, and **Wojciech Zaremba**, with the stated mission to ensure that artificial general intelligence "benefits all of humanity." In 2019 it restructured into a "capped-profit" entity (OpenAI LP) to raise the capital needed for large-scale compute, taking a major investment from **Microsoft**.
+
+The brand entered global consciousness with **ChatGPT**, launched November 30, 2022, which reached an estimated 100 million users within two months — among the fastest consumer-product adoptions in history. The product line spans GPT-series models, the DALL·E image models, the Whisper speech model, the API platform, and ChatGPT's consumer tiers (Free, Plus, Pro, Team, Enterprise).
+
+The visual identity reflects the mission's gravity. Where competitors reached for the neon-gradient "sci-fi AI" aesthetic, OpenAI chose **editorial restraint**: black-on-white, a single teal accent, a custom humanist typeface, and whitespace as the dominant element. The 2025 rebrand — introducing **OpenAI Sans** by ABC Dinamo and refining the blossom/spiral mark — doubled down on this: a system that feels less like a tech product and more like a serious institution publishing serious work. The teal `#10a37f` is the one warm note in an otherwise monochrome world; it humanizes without shouting.
+
+What OpenAI refuses: the visual hype-cycle of AI startups (glowing orbs, particle fields, purple-to-cyan gradients), the density of developer-tool dashboards, and the cuteness of consumer mascots. It occupies the space of a calm, credible authority — powerful technology presented quietly enough that you trust it.
+
+## 12. Principles
+
+1. **Restraint is trust.** The more powerful the technology, the calmer its presentation should be. Visual hype undermines credibility; quiet confidence earns it.
+2. **Whitespace is the primary material.** Generous margins and long vertical rhythm are not empty — they are the brand stating that it has nothing to hide and nothing to oversell.
+3. **Teal is a scalpel, not a brush.** `#10a37f` marks the brand and the moments of action. It never becomes a background, a wash, or decoration. Scarcity gives it meaning.
+4. **Content over chrome.** The model's output is the product. Assistant text flows as a document, not a chat bubble; UI recedes so the words are the experience.
+5. **Honesty in the type.** Monospace means "exact" (code, keys, IDs). Serif means "research." Sans means "product." The typeface is a truth signal, used consistently.
+6. **Dark and light are equals.** Both modes are designed, not derived. The accent and the hierarchy hold in both; neither is an afterthought.
+7. **Edges by hairline, not shadow.** A 1px border is the default boundary. Depth is earned only by things that genuinely float.
+8. **Plain words win.** Microcopy is functional and humble. No hype, no Title Case, no exclamation. The voice respects the reader's intelligence.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly described OpenAI user segments, not individual people.*
+
+**Maya, 29, San Francisco.** Full-stack engineer at a Series-B startup. Lives in the API platform and ChatGPT Plus. Switches between light docs and the dark playground all day. Cares that API keys and model IDs are monospace and copyable in one click, that the docs have runnable examples, and that rate-limit warnings are honest and specific. Distrusts marketing fluff; reads the model card limitations carefully before shipping.
+
+**David, 47, Chicago.** Marketing director, non-technical, ChatGPT Plus subscriber. Uses ChatGPT daily to draft and refine copy. Values the calm, uncluttered composer — he's not intimidated by it the way he was by earlier "AI tools." Reads the model's output as if it were a document, not a chat. Notices and appreciates that the interface never shouts at him with badges and popups.
+
+**Priya, 22, Bangalore (using the US product in English).** CS student, free-tier user, occasionally hits the upgrade prompt. Toggles dark mode always. Treats ChatGPT as a study partner and pair-programmer. The teal "New" badge and the occasional upgrade CTA are the only color she sees, and that scarcity makes them register. Expects mobile to be flawless — composer pinned to bottom, sidebar as a clean drawer.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (new chat)** | Centered, calm — the wordmark or a short greeting, the composer ready, and 3–4 suggestion chips (white bg, 1px `#e5e5e5` border, pill). No illustration, no empty-state cartoon. |
+| **Empty (no results)** | Single line of `#6e6e80` secondary text ("No results found"). Optional ghost button to clear filters. |
+| **Loading (generating)** | The signature blinking cursor / animated dots in the assistant column as text streams in token-by-token. Content appears progressively, never as a blocking spinner over the page. |
+| **Loading (page/data)** | Skeleton blocks at `#ececec` matching final layout, subtle shimmer. Used in dashboards and the platform, not in the chat stream. |
+| **Streaming** | Text renders incrementally with a soft caret; a "Stop generating" ghost button appears below. The user retains control mid-stream. |
+| **Error (inline field)** | `#ef4146` 1px border, helper text below in `#ef4146` 13px. One specific, blameless sentence with a next step. |
+| **Error (generation failed)** | Inline message in the assistant slot — "Something went wrong" with a "Retry" ghost button. Calm, never alarmist, never a full-screen takeover for a transient failure. |
+| **Error (rate limit)** | Amber-toned banner (`#fdf0d5` bg, `#b8770f` text) stating the limit and when it resets. Honest and specific, not apologetic boilerplate. |
+| **Success (copy/save)** | Black toast ("Copied"), 3s auto-dismiss. No exclamation, no color celebration. |
+| **Disabled** | Reduced contrast — `#e5e5e5` fill, `#9b9b9b` text. Geometry unchanged so re-enabled state is stable. |
+| **Focus** | 3px teal-tinted ring `rgba(16,163,127,0.2)` on inputs; subtle border darken on the composer. Always visible for keyboard users. |
+| **Selected (chat item)** | Sidebar item gets `#ececec` (light) / `#2f2f2f` (dark) fill, no border — a quiet highlight, not a colored bar. |
+
+## 15. Motion & Easing
+
+**Durations:**
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Theme toggle, immediate state flips |
+| `motion-fast` | 120ms | Hover, focus, button press, small fades |
+| `motion-standard` | 200ms | The default — menu open, card hover lift, tab switch |
+| `motion-moderate` | 300ms | Modal/sheet entrance, sidebar drawer slide |
+| `motion-stream` | per-token | Text streaming cadence — paced to feel like thinking, not a typewriter gimmick |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-out` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — menus, modals, toasts |
+| `ease-in` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — hovers, tab content, drawer |
+
+**Signature motions.**
+
+1. **Token streaming.** The defining OpenAI motion: assistant text appears progressively as the model generates, with a soft blinking caret at the leading edge. The cadence conveys "thinking" — deliberate, not instant — and is the most recognizable interaction in the product. It is content, not decoration; it never loops or stalls artificially.
+2. **Composer focus.** On focus, the composer border darkens gently and lifts with a `0 2px 8px rgba(0,0,0,0.08)` shadow over `motion-fast`. Subtle, inviting, never bouncy.
+3. **Menu / popover.** Dropdowns and the model picker fade-and-scale in from 0.96 to 1.0 over `motion-standard` with `ease-out`, anchored to their trigger. Dismissal is faster (`motion-fast`).
+4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all transitions collapse toward `motion-instant`, streaming text appears in larger chunks rather than per-token animation, and scale/slide effects become simple fades. The product stays fully usable.
+
+<!--
+OmD v0.1 Sources — OpenAI
+
+Web verification (2026-06-06):
+- WebSearch ("OpenAI brand color hex typography font Söhne OpenAI Sans") corroborated by
+  Loftlyy, Mobbin, Fonts In Use, DesignYourWay, brandpalettes.com:
+  · Brand palette anchored on #000000 / #FFFFFF with signature teal-green #10A37F.
+  · 2025 rebrand introduced OpenAI Sans (bespoke, ABC Dinamo) in 5 weights + italics,
+    replacing the Feb-2023 Klim Type Foundry pairing of Söhne (UI/blog) and Signifier
+    (research papers); earlier system used Colfax/Charter.
+- https://openai.com and https://openai.com/brand/ returned HTTP 403 to WebFetch
+  (anti-bot); token-level UI values (ChatGPT surfaces #212121/#171717/#2f2f2f, composer
+  geometry, #6e6e80 muted slate, #ececec/#f7f7f8 grays) are widely documented public
+  product values and direct observation of the shipped ChatGPT/API surfaces, not a
+  sourced internal spec.
+
+Primary color #10a37f is OpenAI's signature teal, widely catalogued as the brand accent.
+
+Personas (§13) are fictional archetypes informed by publicly described OpenAI user
+segments. Interpretive claims (e.g., "teal is a scalpel, not a brush") are editorial
+readings of the design, not documented OpenAI statements.
+-->