OpenAI design.md
A white page that asks one question, then lets the pictures talk
An editorial, almost colorless site: pure white canvas, pure black type in one medium weight, black pill buttons and hairline-outlined chips. The hero is just a question and a chat box; all the color comes from square artwork tiles (soft blue, orange, purple gradients and photos) in the news grids below.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/openai/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by OpenAI, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from openai.com in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
OpenAI Sans
Free substitute: Figtree 400/500/600 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 48px | 500 | -1.44px |
| hero-question | 28px | 600 | 0.3px |
| section-title | 22px | 500 | -0.22px |
| card-title | 18px | 500 | -0.18px |
| body | 17px | 400 | -0.17px |
| button | 14px | 500 | 0 |
| caption | 13px | 500 | 0 |
- tags
- 9999px
- cards
- 6px
- inputs
- 24px
- buttons
- 9999px
The files
Loading…
Screenshots and measurements taken by Faundr from openai.com for reference. Inspired by OpenAI, not its official design system; Faundr isn’t affiliated with OpenAI, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
