Pure-black cinema screen: violet aurora video hero, OpenAI Sans at a single 500 weight, white pill CTAs, and luminous periwinkle gradient panels holding light-mode screenshots.
Browse Codex in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: chatgpt.com/codex (live DOM, computed styles), 2026-07-08, desktop 1512px. Coverage: full landing page (hero → chapters → pricing → footer). Product app: not captured. Responsive: not captured. Prices shown localized (A$).
A pure-black cinema screen for one product: the hero is a full-bleed looping ambient video (aurora periwinkle-violet over a dark earth) with a frosted app icon, a huge thin-tracked "Codex" wordmark, and a single white pill CTA. Below, the page alternates quiet black chapters — small-to-medium white headings, soft gray body — with luminous violet gradient media panels carrying floating light-mode product screenshots. Everything is set in OpenAI Sans at a single 500 weight; chrome is grayscale, and all color belongs to the ambient video and the violet panels. Feels: cinematic, minimal, luminous, assured.
| Token | Hex | Role / usage |
|---|---|---|
| bg | #000000 | Page canvas |
| ink | #0d0d0d | Dark pill fill, text on light pills |
| footer | #212121 | Footer band, dark chips |
| chip | #303030 (@.50–.75 tiers) | Small dark UI chips |
| card border | rgba(255,255,255,.05) | Pricing card hairlines |
| glass pill | rgba(0,0,0,.04) | Secondary pill on light regions |
| panel gradient | periwinkle→violet (ambient video / baked imagery) | Chapter media panels, hero |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Display, headings, plan names, footer links |
| body | #cdcdcd | Chapter body copy |
| pill-bg | #f9f9f9 | Primary CTA fill (text #0d0d0d) |
| muted | rgba(255,255,255,.44–.60) | Fine print, "From", meta |
Rule: chrome is strictly grayscale; all color lives in the hero video and the violet media panels. No accent hue exists as a UI token.
"OpenAI Sans", "OpenAI Sans Variable Scripts", ui-sans-serif, system-ui, sans-serif — one family, essentially one weight (500; body 400).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero wordmark ("Codex") | 64 / 64 | 500 | -1.92px (-3%), centered |
| Pricing display | 48 / 55.7 | 500 | -1.44px (-3%), centered |
| Chapter heading | 30 / 39.6 | 500 | -0.3px |
| Plan name (h3) | 30 / 39.6 | 500 | -0.3px |
| Price | 48 | 500 | — (A$30 + 14px / month muted) |
| Hero subhead | 22 / 27.7 | 500 | 0 |
| Section eyebrow (h2) | 17 / 28 | 500 | -0.17px |
| Card title (h3) | 16 / 20 | 510 | -0.3px |
| Body copy | 16 / 24 | 400 | 0, #cdcdcd |
| UI / buttons / nav | 14 | 400–500 | 0 |
Patterns: single-weight system — everything is 500 except 400 body; tracking tightens -3% on display sizes; hero and pricing center, chapters left-align.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.