Obsidian
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
OpenAI Developers
developers.openai.comWebsite preview
The design language
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.
Color palette
neutral
Paper White
#ffffffPage canvas, card surfaces, inverse text on dark buttons
Carbon
#181818Section backgrounds, dark surface containers, large heading text
Fog White
#f9f9f9Card backgrounds, subtle elevated surfaces, ghost button hover fills
Ash Gray
#5d5d5dSecondary body text, muted icon strokes, helper labels
Graphite
#282828Navigation text, inline link color, icon fills — softer than pure black for repeated text contexts
Mist Gray
#edededHairline borders, nav separators, disabled state fills
Linen
#f3f3f3Card hover state, second-tier surface tint
Ink
#0d0d0dHigh-emphasis nav text, logo wordmark, near-black fallback
Smoke
#8f8f8fTertiary text, placeholder copy, scrollbar tracks
Slate Whisper
#64748bMuted metadata, caption text, minor UI labels
Typography
Type scale
Minor Second (1.067) · 16px basedisplay
30px · 600 · 1.2 · -0.02px trackingThe quick brown fox jumps
heading
20px · 500 · 1.4 · -0.011px trackingThe quick brown fox jumps
subheading
18px · 600 · 1.4 · -0.01px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.008px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.5 · -0.008px trackingThe quick brown fox jumps
caption
12px · 500 · 1.5 · -0.008px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
OpenAI Sans
- 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
- Fallback
- Inter, system-ui
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.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
9999pxcards
8pxpills
9999pxbuttons
8pxSpacing scale
2px4px6px8px10px12px16px20px24px32px40px48px56px64px80px133px289pxGuidelines
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
Components
Feature Card
Three-column content tile for product areas (API Platform, Codex, Apps SDK)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
Highlighted model release card with gradient thumbnailFull-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
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
Inactive navigation items (Home, API, Codex, ChatGPT, Resources)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
Site search field in headerTransparent 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
Below-fold product showcase tiles (Codex use cases, Showcase)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
Page hero title and supporting copyCentered 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
Functional icons on feature cards and nav20px size, 1.5px stroke weight, #282828 stroke. Monoline outlined style. No filled variants detected — all icons use stroke-only geometry.
Inline Arrow Link
Text link with directional indicator (e.g., 'Read the GPT-5.5 prompting guide ↗')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.
Surfaces & elevation
Level 1
Canvas
#ffffffPage background, full-bleed base
Level 2
Card
#f9f9f9Feature cards, announcement banner, subtle surface lift
Level 3
Card Hover
#f3f3f3Interactive card hover state, secondary tint
Level 4
Divider
#edededHairline borders, nav separators, search input background
Level 5
Dark Surface
#181818Inverted sections, dark heading text, contrast blocks
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.
Layout & imagery
Layout
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.
Imagery
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.
Design notes
Agent Guide
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 Example Component Prompts: 1. 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. 2. 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. 3. 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. 4. Create a ghost navigation button: transparent background, 8px radius, 10px vertical and 12px horizontal padding, 14px weight 500 #282828 text, no border. 5. 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
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
