# Codex (OpenAI) — Marketing Site Design Spec

> 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$).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Canvas & surfaces
| 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 |

### Text
| 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.

## 3. Typography Rules

- Font stack: `"OpenAI Sans", "OpenAI Sans Variable Scripts", ui-sans-serif, system-ui, sans-serif` — one family, essentially one weight (500; body 400).
- Body: 16px / 24px / 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.

## 4. Component Stylings

### Buttons (all pills)
- **Primary light**: bg `#f9f9f9`, text `#0d0d0d`, 14px/500; hero h44 padding `0 16px`, nav/plan h36 padding `0 20px`. Full-width inside pricing cards.
- **Dark pill**: bg `#0d0d0d`, text white, h36 ("Go to Cloud").
- **Glass pill**: bg `rgba(0,0,0,.04)` on light nav region, ink text ("Contact sales").
- Plan CTAs carry a trailing `›` chevron.

### Chapter media panels (signature)
- Large rounded (8px) panels filled with periwinkle→violet gradient imagery; light-mode product screenshots float inside with soft deep shadows; prompt-card overlays (white, radius ~16) sit on top.

### Pricing cards
- Transparent bg on black, 1px `rgba(255,255,255,.05)` border, radius 6–8, padding `16px 16px 24px`; plan name 30/500, description 16/24 `#cdcdcd`, price 48/500 + muted `/ month`, full-width white pill; fine print `rgba(255,255,255,.44)` 13–14px.

### Nav
- h64, transparent over hero video → near-black band after scroll; ChatGPT wordmark left, center links 14px/400 (`#5d5d5d`→white on dark), right glass pill + dark/white pill.

### Logo wall
- "Trusted by top teams" label in muted gray, then a marquee row of white logos (~44px tall assets).

### Footer
- `#212121` band, white 14px links in columns; large wordmark.

## 5. Layout Principles

- Hero: 100vh centered stack — app icon (rounded-square glass) → 64px wordmark → 22px subhead → white pill → logo marquee at bottom. Ambient video full-bleed behind.
- Chapters: 2-col split — left text column (30px heading + 16px `#cdcdcd` body, ~420px wide), right large violet media panel (~815px); sides alternate; generous ~200px vertical rhythm.
- Pricing: centered 48px display, 3-up equal cards.
- Content max ~1280px; black canvas continuous from hero video into sections.

## 6. Depth & Elevation

- Radius scale: 6 (small/card corners), **8 dominant** (media panels, screenshots), 16–24 (overlay prompt cards), 9999 (all buttons).
- Elevation: soft deep shadows only under floating screenshots inside panels; pricing cards flat with hairline borders; pills flat.
- Glass: frosted app-icon tile in hero; glass pill on light nav.

## 7. Motion

- Ambient loop: hero background video (`background-video-jan-28.mp4`), autoplay/loop/muted — the page's signature motion.
- Micro-transitions: Tailwind default `cubic-bezier(0.4,0,0.2,1)` at 100–150ms (color/bg/border); 500ms opacity fades for scroll reveals; one smooth `all .64s cubic-bezier(0.22,…)` reveal.
- Logo marquee scrolls continuously. No motion library detected beyond CSS/vanilla.

## 8. Backgrounds, Effects & WebGL

- **Hero**: full-bleed `<video>` loop (aurora periwinkle-violet, dark earth silhouette), `object-cover`; no canvas/WebGL.
- **Chapter panels**: baked violet/periwinkle gradient imagery (radius 8) — luminous color fields against pure black.
- Frosted-glass app icon tile; otherwise flat black — no dot grids, no noise overlays, no gradients in chrome.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure `#000000`; let color come only from the ambient video/violet panels.
- Set everything in OpenAI Sans at weight 500 (400 body) — a single-weight system.
- Track display sizes tight (-3%): 64px hero, 48px pricing, both centered; chapters 30px left-aligned.
- Use white `#f9f9f9` pills (h44 hero / h36 elsewhere, 14px/500) as the only CTA style; dark `#0d0d0d` pill as the counterpart on light regions.
- Put product screenshots inside violet gradient panels at radius 8 with soft deep shadows.
- Keep body copy `#cdcdcd` at 16/24; fine print at 44–60% white.
- Keep pricing cards transparent with 5%-white hairlines.
- Keep motion ambient (looping video) + fast micro-fades (100–150ms, 500ms reveals).

### Don't
- Don't introduce an accent color, gradient text, or colored buttons — chrome stays grayscale.
- Don't use bold (600+) anywhere; the system is single-weight 500.
- Don't put borders or heavy shadows on pills or panels; hairlines only on pricing cards.
- Don't replace the ambient video with a static flat black hero — the luminous backdrop is the identity.
- Don't left-align the hero or pricing displays; don't center chapter headings.

## 10. Responsive Behavior

Not captured — desktop 1512px only.

## 11. Agent Prompt Guide

- Canvas `#000000` · Text `#ffffff` · Body `#cdcdcd` · Muted `rgba(255,255,255,.44)` · Border `rgba(255,255,255,.05)` · CTA `#f9f9f9` on `#0d0d0d`
- Font: `"OpenAI Sans", ui-sans-serif, system-ui` · Body: 16px/24 · Radius: 9999 pills / 8 panels / 6 cards · CTA height: 44px hero, 36px nav
- Display: 64/500/-3% centered · Chapter: 30/500 left · Panels: periwinkle→violet gradient fields

<codex_design_language>
Use the Codex (OpenAI) design language: pure black #000000 canvas styled like a cinema screen, with all color confined to one luminous periwinkle→violet ambient field — a looping aurora video behind the hero and violet gradient media panels (radius 8) holding floating light-mode product screenshots with soft deep shadows. Type is OpenAI Sans at a single weight: 500 for everything, 400 body — hero wordmark 64px with -1.92px tracking centered, pricing display 48px/-1.44px centered, chapter headings 30px/-0.3px left-aligned, body 16/24 in gray #cdcdcd, fine print at 44% white. All buttons are pills: near-white #f9f9f9 with #0d0d0d text (44px hero, 36px nav/plans, 14px/500), dark #0d0d0d pill and rgba(0,0,0,.04) glass pill as counterparts. Pricing cards are transparent with 1px rgba(255,255,255,.05) hairlines, radius 6–8. Nav h64 transparent→near-black; footer #212121; white logo marquee. Motion: ambient video loop plus 100–150ms micro-fades and 500ms scroll reveals. Feels: cinematic, minimal, luminous. Avoid: accent colors or colored buttons, bold weights, bordered pills, static flat hero, centered chapter headings.
</codex_design_language>