OpenAI
A stark, maximally minimal canvas anchored in true white (#FFFFFF) and near-black (#212121), with a single emerald-green accent (#10A37F) that appears only on the ChatGPT brand mark and key CTAs. The system is almost aggressively undecorated — no gradients, no photography, no illustrative elements beyond the logo — trusting negative space and precise type to carry all weight. Söhne (Klim Type) sets the display hierarchy at tight tracking and high contrast weights, while body text uses system-ui for crisp screen rendering. The restraint communicates confidence: OpenAI's visual language says it doesn't need to try.
Color Tokens
1. Visual Theme & Atmosphere
OpenAI's interface is a study in confident minimalism. The homepage is nearly all white with large, tightly tracked type — Söhne at scale — and one purposeful green. ChatGPT's product surface extends this into dark mode: a warm near-black (#343541) with white text bubbles and green avatars. There's no illustrative language, no stock photography, no decorative gradients. The brand bets everything on typography, whitespace, and product quality to speak for itself.
2. Color System
Binary palette with a single chromatic escape valve:
- Canvas: Pure #FFFFFF / dark #212121 — no warm or cool tint
- Green accent: #10A37F — used exclusively for the GPT logo, CTAs, and streaming indicators
- Ink: #212121 (light) / #ECECF1 (dark) — high contrast text
- Muted: #6E6E80 — captions, secondary labels, timestamps
- Surfaces: #F7F7F8 (sidebars) / #343541 (dark chat messages) — barely perceptible differentiation
- Border: #E5E5E5 — ultra-light dividers
3. Typography
Söhne by Klim Type Foundry is the backbone — a geometric grotesque derived from Futura but warmer and more humanistic. Used at 600 weight for headlines, 400 for body, with very tight tracking at large sizes (-0.025em). The choice reads as considered and premium without being showy. Monospace code uses native system fonts.
4. Components & Patterns
- Chat bubbles: User messages in light gray (#F7F7F8) or dark surface; assistant responses on white/dark canvas with no bubble — just text
- Sidebar: Collapsible conversation history, thin 1px right border, icon + label navigation items
- Buttons: Green primary (ChatGPT), black primary (API/enterprise), ghost secondary
- Model picker: Subtle dropdown in nav, monochrome icons
- Code blocks: Dark surface even in light mode, copy button top-right
5. Spacing & Layout
Chat layout: 260px sidebar, flex content area, message width capped at ~720px centered. Marketing pages use wide containers (1280px max) with 50% of the viewport left empty on hero sections. The space is intentional and communicative.
6. Motion & Interaction
Streaming text is the signature motion — character-by-character rendering that feels alive. UI chrome is static. Hover states are minimal color shifts. Sidebar expand/collapse is smooth but unshowy at 200ms ease.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for