# OpenAI — DESIGN.md

## Overview
OpenAI is the AI-platform-of-record brand — the calm, established institution in a category full of startups shouting at each other. The page rhythm is unmistakable: a pure-black hero band at top with a full-bleed photograph and a single 88–128px Söhne headline overlaid in white, switching abruptly to a white body below. The brand uses Söhne at every tier, has no chromatic accent, and refuses gradient, illustration, and emoji.

## Color
- **Primary:** `#000000` — Pure Black (hero band, footer, dark CTAs)
- **Canvas:** `#ffffff` — Pure White (body)
- **Canvas Dark:** `#000000` — Pure Black (hero band + footer)
- **Surface card:** `#f7f7f8` — Off-White (rare card backgrounds, pricing tiers)
- **Surface card dark:** `#161616` — Near-Black (cards on dark hero band)
- **Ink:** `#0d0d0d` — Near-pure-black for body text
- **On dark:** `#ffffff` — Pure white text on black surfaces
- **Body:** `#3c3c43` — Default running-text
- **Muted:** `#6e6e80` — Secondary metadata, captions
- **Hairlines:** `#e5e5e5` — 1px borders on white; `#2a2a2a` on dark

## Typography
- **Display:** Söhne, weight 400, tracking -0.02em, sizes 64–128px hero
- **Sub-display:** Söhne weight 500, 32–48px section heads
- **Body:** Söhne, weight 400, 16–18px, 1.55 line-height
- **Caption:** Söhne weight 500, 13–14px
- **Mono:** Söhne Mono, 14px for API documentation, never decorative
- **Eyebrow:** Söhne 13px / 500 / uppercase / +1.5px tracking for category tags

## Spacing & rhythm
8-base (8/16/24/32/48/64/96/128/160). Section padding 96–160px on desktop — generous. Hero band consumes upper third of viewport; body lives in a 12-column grid with wide gaps (32px column gap minimum).

## Motion signature
Single hero video on loop at low contrast — no other animation on the page. 200ms ease-out on link hovers; product mockup cards fade in over 400ms on scroll. Refuses parallax and scroll-jacking. The brand's quietness IS the signal.

## Components observed
- `hero-band-black` — full-bleed black band housing display headline + sub-line
- `hero-photo-full-bleed` — photograph (often a person, often a research image) as hero background
- `research-card-white-on-black` — research-list card with white serif title on black
- `model-card-bordered` — white card with hairline border showing GPT-5 / 4o / o-series model variants
- `pricing-tier-card-white` — white tier card with Söhne pricing, simple feature list
- `footer-black-dense` — multi-column black footer with white type
- `api-doc-codeblock-card` — dark codeblock with Söhne Mono syntax-highlighted code
- `chatgpt-pill-cta` — the one place a pill CTA appears, in the top nav, to "Try ChatGPT"

## Trademark signals
- Pure black hero above pure white body — the page-rhythm signature
- Söhne at every typographic tier — never Inter, never Helvetica
- Photography or pure black hero, never gradient, never illustration
- Zero decorative chrome — the brand IS the negative space
- 12-column grid with wide gaps — comfortable at scale

## What they DON'T do
- No brand color outside black and white
- No gradient mesh, no hero illustration
- No emoji
- No bold display weight — Söhne at 400 carries every display tier
- No animation beyond a hero video loop
- No scarcity / urgency marketing
- No pill CTAs anywhere except the single "Try ChatGPT" in the top nav

## Exemplar pages
- https://openai.com/
- https://openai.com/index/introducing-gpt-5
- https://openai.com/chatgpt
- https://openai.com/api
- https://openai.com/research

## When to reference
Reach for OpenAI when the user wants the AI-platform-of-record voice — research-lab institution, calm authority, no marketing cliché. Especially appropriate for AI research labs, foundational-model providers, enterprise AI platforms, and any technology brand that wants to feel established rather than scrappy. Pairs well with photography-heavy hero content; very poorly with illustration-heavy content.
