Screenshot of Openai

Openai

openai.com

The reference for white-canvas restraint: a pure #ffffff page where black #000000 type and a single ChatGPT-style 9999px pill input do all the work, and colour is rationed to editorial imagery alone.

SaaS Product flagship

Design tokens

background
surface
text
textMuted
accent
border
display
OpenAI Sans
body
OpenAI Sans
mono

Do / Don't

Reference it for

  • Empty-canvas hero: no illustration, no gradient, a centred question ("What can I help with?") in ~28px black over deep white space, with the product input as the only object
  • Product-as-hero: the actual ChatGPT input (rounded ~24px container, ghost placeholder, circular up-arrow send button bottom-right) stands in for a marketing graphic
  • Two-radius system: chips, inputs and buttons at full 9999px pills against editorial cards clipped to a precise 6.08px radius
  • Black/white-only core UI: #000000 text, #ffffff canvas, #e5e7eb hairline borders, muted #666666 secondary, no accent colour anywhere in chrome
  • Tightly tracked display type (-0.03em) so headlines read carved rather than set; weights stay 400/500/600
  • Pill filter row under the input (Talk with ChatGPT / Research / API Platform / Stories / More) as lightweight secondary navigation
  • Near-absent elevation: one barely-there shadow (rgba(0,0,0,0.02) 4px 6px) on the CTA only; separation comes from whitespace not shadow stacking
  • Minimal top nav: wordmark left, flat text links, a search glyph, a ghost "Log in" pill beside a solid black "Try ChatGPT" pill with arrow

Do not copy

  • The OpenAI wordmark and blossom/hexagon logo mark
  • The custom OpenAI Sans typeface (use a neutral grotesque substitute)
  • The literal "What can I help with?" line and ChatGPT product chrome
  • "Try ChatGPT" and the named nav labels (Research/Products/Business/Foundation)
  • The specific editorial photography and pastel gradient story cards
  • The exact 6.08px card radius as a signature; it is brand-specific quirk not a borrowable token