Design teardown
OpenAI
A white editorial homepage: one short centered question, a wide prompt, pill actions, then a media story grid.
openai.com
Design character
Calm editorial product
The page is mostly empty white space with black type. A single question sits above a composer, and the rest of the page is an index of stories. Length stays short in the chrome and grows only in story titles.
Typography
One sans family everywhere. Hierarchy comes from size and weight, with slight negative tracking on headlines and body, and no tracking on controls.
Color system
The chrome is black, white, and a few grays. Color shows up inside story art, not in the interface.
Spacing and geometry
A 4px rhythm with wide page margins and a steady 24px gap in the story grids.
Layout
A fixed white header, a centered composer, then an asymmetric story band and repeating card indexes.
Motion
Motion is short and fades or shifts color. Nothing bounces.
UI fingerprint
- Black pill One solid black, fully round action against a white bar, paired with a gray twin.
- Soft composer A 24px-radius white field with a faint halo and a round send button inside it.
- Story index A sharp wide feature beside square cards, titles under the media, category plus time in 14px.
- Single sans OpenAI Sans from 13px nav labels to 48px headlines, mostly weight 500.