Preview image. Unlock full-res
Blank page before the first word — a design that treats white space as the most powerful element, reserving all color for user-generated and editorial content.
OpenAI.com reads like a blank page waiting to be written on — pure white, near-zero chromatic saturation (1%), and typography that does everything. The custom OpenAI Sans carries the entire visual weight: tightly tracked at -0.03em for large display text, it condenses space so headlines feel carved rather than set. Black (#000000) and border-gray (#e5e7eb) are the only tools; no accent colors, no gradients on the core UI, no decorative illustration. Color arrives exclusively through editorial imagery — soft-focus flower macros, pastel gradient thumbnail cards — making those images feel explosive against the white canvas. The signature tension is 9999px pills for interactive chips and inputs sitting inside a layout where cards use a very specific 6.08px radius, creating a system that pairs one extreme roundness with one precise near-flat radius. Use #000000 as the only filled button background color — no colored CTAs Apply 9999px border-radius to all pill buttons, ghost buttons, and the conversational input field Use 6.08px border-radius on all image-containing card elements and thumbnail clips Set display headlines (48px) with letter-spacing -0.03em; omit tracking overrides below 22px unless using caps labels Use #e5e7eb as the only border/divider color — never darken it or tint it Introduce color only through photography or editorial imagery — never through UI backgrounds or button fills Maintain minimum 64px vertical gap between page sections Do not use any colored accent (blue, green, orange) on interactive elements or backgrounds Do not apply box-shadows to cards — separation comes from whitespace, not depth Do not mix border-radius values between pill (9999px) and card (6.08px) contexts — the contrast is intentional and the values must be exact Do not use weight below 400 or above 600 in OpenAI Sans — the 400/500/600 triad defines all typographic hierarchy Do not use background colors on section blocks — the page stays #ffffff wall-to-wall Do not add letter-spacing at body sizes (16-18px) — tracking is only for display (negative) and caps labels (positive +0.011em) Do not use more than two typographic colors: #000000 for primary and #666666 for secondary — #8f8f8f is reserved for disabled/tertiary only
