Design System Inspiration of OpenAI

Overview

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)

Primary tasks

• Send a message to the model and read the reply
• Draft and refine copy with the model every day
• Stop a reply while it is still generating
• Copy an API key or model ID in one click
• Read a model card’s limitations before shipping with it
• Upgrade from the free tier to a paid plan

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.

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.

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.

Colors

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.

Typography

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

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.”

Layout

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

Responsive Behavior

Breakpoints

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

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card-hover: 0 4px 12px rgba(0,0,0,0.06)
• shadow.toast: 0 4px 16px rgba(0,0,0,0.16)
• shadow.dialog: 0 8px 32px rgba(0,0,0,0.16)

Motion & Easing

Durations:

Easings:

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.
• and 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. –>

Components

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).

States

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

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).

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.

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

Governance

Known Gaps

• Contrast, button-teal. Text #ffffff on #10a37f measures 3.20:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-ghost. Text #0d0d0d on #00000000 measures 1.08:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-teal. Text #1a7f64 on #d9f2ea measures 4.18:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-amber. Text #b8770f on #fdf0d5 measures 3.27:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, tab-underline. Text #6e6e80 on #00000000 measures 4.21:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, segmented. Text #6e6e80 on #ececec measures 4.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.