OpenAI Design System

Overview

The OpenAI design system is an exercise in disciplined minimalism — a near-monochromatic palette where pure black ({colors.ink}) meets pure white ({colors.canvas}) with nothing in between but carefully calibrated opacity layers. The brand voice is clinical precision wrapped in approachable warmth: this is not cold brutalism, but rather the visual language of a research laboratory that wants you to feel welcome.

Brand voltage concentrates almost entirely into two moments: the solid-black {button-primary} CTA buttons that punctuate every page, and the dramatic full-bleed hero imagery that uses saturated gradients and photographic content as emotional counterweight to the typographic restraint. The navigation bar floats atop the canvas with no background blur or shadow — just clean links in {typography.nav-link} at 17px weight 400, confident enough to disappear until needed.

Typography carries all hierarchy through size alone. The heaviest weight in regular usage is 500 (medium), and even the {typography.display-xl} hero headlines stop there. This is deliberate: OpenAI trusts scale and negative space to create emphasis, never bloat. The proprietary OpenAI Sans face — served as WOFF2 from their CDN — is a geometric humanist with slightly squared proportions that reads cleanly at both 64px display sizes and 14px body copy. A secondary serif face, LF Serif, appears sparingly for editorial accents.

Shapes lean toward the generous end: default corners sit at 6px ({rounded.DEFAULT}), but interactive elements go fully pill-shaped ({rounded.pill} at 9999px). Hero image containers round to 40px ({rounded.hero}), creating distinctive "squircle" frames around the gradient-rich feature visuals. Cards settle between these extremes at 16–24px radius.

Key Characteristics

• Pure black-on-white foundation with opacity-only surface layering ({colors.surface-strong} at 12% black, {colors.surface-soft} at 4%)
• Single brand color is {colors.primary} (#000000) applied only to CTAs and highest-emphasis text
• Maximum font weight of 500 across all components — hierarchy via size, never boldness
• Pill-rounded ({rounded.pill}) all interactive elements: buttons, inputs, tags
• Proprietary OpenAI Sans at 400/500/600/700 with LF Serif for editorial moments
• Hero imagery uses 40px corner radius ({rounded.hero}) with vibrant gradient photography
• Shadow system stays extremely subtle — max opacity 8%, never colored
• Spacing scale anchored at 16px base, expanding to 120px for hero vertical rhythm
• Motion capped at 300ms with standard Material-style easing curves

Colors

Brand & Accent

• Primary ({colors.primary} — #000000): Solid black. Used exclusively for the main CTA button background ({component.button-primary}), the highest-priority navigation element backgrounds, and occasional solid-black decorative bands. This is the only "color" in the system.
• Primary Active ({colors.primary-active} — #333333): Dark charcoal. Applied to {component.button-primary-active} state when a user presses or holds the primary button.
• Primary Hover ({colors.primary-hover} — #1a1a1a): Near-black. Used for hover state on {component.button-primary} before activation.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white. The base layer for the entire page body, hero sections, and elevated card backgrounds.
• Surface ({colors.surface} — #f1f1f1): Light cool gray. Used for footer backgrounds and large container bands that need subtle separation from canvas without being distinct cards.
• Surface Soft ({colors.surface-soft} — rgba(0, 0, 0, 0.04)): 4% black tint. Applied to hover backgrounds for ghost buttons, icon circle containers ({component.icon-circle}), and subtle row-highlight states.
• Surface Strong ({colors.surface-strong} — rgba(0, 0, 0, 0.12)): 12% black tint. Used for pressed/disabled button backgrounds, secondary hover fills, and tag/badge containers needing more visibility than surface-soft.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White with implied elevation via shadow. Used for floating cards like the {component.card-icon-grid} product tiles that lift above surrounding content.

Text / Ink

• Ink ({colors.ink} — #000000): Pure black. Headlines, navigation labels, primary body text, and any text requiring maximum contrast against white or light backgrounds.
• Body ({colors.body} — #000000): Identical to ink in this light-mode system; reserved for future dark-mode divergence where body text may soften below headline black.
• Muted ({colors.muted} — #999999): Mid-gray. Secondary text: metadata labels ("Product", "18 min read"), timestamps, placeholder descriptions beneath titles.
• Muted Soft ({colors.muted-soft} — #707070): Darker mid-gray. Tertiary supporting text, captions, and disabled-label states where {colors.muted} would lose too much contrast.
• On Primary ({colors.on-primary} — #ffffff): Pure white. Text color rendered inside {component.button-primary} and any black-background container. Passes WCAG AAA against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text for any future dark-surface contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(0, 0, 0, 0.12)): 12% black. Default border/divider color for input outlines, card borders, and separator lines between content regions.
• Hairline Soft ({colors.hairline-soft} — rgba(0, 0, 0, 0.06)): 6% black. Subtle dividers used between list items, inside complex cards, and for decorative line elements.
• Border Strong ({colors.border-strong} — rgba(0, 0, 0, 0.18)): 18% black. Focus rings, active input borders, and emphasized container edges.

Typography

Font Family

The system is built on OpenAI Sans, a proprietary geometric humanist sans-serif served directly from OpenAI's CDN (cdn.openai.com/common/fonts/openai-sans/v2/). The font family includes four weights (400 Regular, 500 Medium, 600 Semibold, 700 Bold) each in Roman and Italic variants, all loaded as WOFF2 with font-display: swap. Fallback is the generic sans-serif stack.

A secondary serif face, LF Serif, is registered in the font-face declarations for editorial and long-form reading contexts (likely research papers or blog posts), though it does not appear in the landing-page viewport captured here. It provides a warmer, more traditional counterpoint to OpenAI Sans's technical precision when the content demands it.

OpenAI Sans plays every role: display headlines, navigation labels, body copy, button text, and metadata captions. There is no font-switching by role — one face, many sizes, maximum weight 500 in production UI.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 500 | 1.1 | -0.03em | Hero overlay text ("GPT-5.5") | | {typography.display-lg} | 22px | 500 | 1.26 | -0.01em | Article H1 headlines ("Introducing GPT-5.5") | | {typography.title-md} | 22px | 500 | 1.26 | -0.01em | Card titles, section headers | | {typography.body-lg} | 16px | 500 | 1.5 | 0 | Lead paragraphs, feature descriptions | | {typography.body-md} | 14px | 500 | 1.4 | 0 | Standard body copy, card descriptions, button labels | | {typography.body-sm} | 13px | 400 | 1.38 | 0 | Supporting details, fine print | | {typography.caption} | 12px | 400 | 1.33 | 0 | Timestamps, metadata badges | | {typography.button} | 14px | 500 | 1.25 | 0 | All button and CTA text | | {typography.label-md} | 13px | 500 | 1.38 | 0 | Category tags ("Product"), form labels | | {typography.nav-link} | 17px | 400 | 1.35 | 0 | Top-navigation menu items |

Principles

The typography system's defining discipline is weight ceiling at 500 for UI text. While the OpenAI Sans family ships weights up to 700 Bold, the design system deliberately caps interface typography at Medium (500). This means a {typography.display-xl} headline at 64px carries the same weight as a 14px button label — emphasis comes purely from scale differential (a 4.5× ratio between largest and smallest UI text).

Letter-spacing tightens slightly at display scales (-0.03em at 64px, -0.01em at 22px) to optically compensate for the loose spacing that large geometric fonts exhibit. Body-scale text sits at normal letter-spacing.

Navigation text breaks pattern at weight 400 (Regular) rather than 500, creating a subtle visual demotion relative to page content — the nav should be scannable but quieter than what it navigates to.

Color also participates in hierarchy: metadata uses {colors.muted} (#999999) at smaller sizes while headlines stay {colors.ink} (#000000), creating dual-axis differentiation (size + value).

Note on Font Substitutes

OpenAI Sans is proprietary and not available on Google Fonts. For implementation without access to OpenAI's CDN, substitute with DM Sans (Google Fonts) which shares similar geometric humanist proportions, slightly squared letterforms, and excellent readability across the 12–64px range. Define the fallback in your CSS variables:

:root {
  --font-sans: "OpenAI Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "LF Serif", Georgia, "Times New Roman", serif;
}

If DM Sans is unavailable, Inter serves as a secondary fallback though its taller x-height and more mechanical construction will alter the spatial feel noticeably.

Layout

Spacing System

• Base unit: 4px (half the typical 8px base), with major tokens clustering at multiples of 4 or 8 thereafter.
• Tokens: {spacing.xxs} (4px — internal icon gaps, tight spacers), {spacing.xs} (8px — small internal gaps), {spacing.sm} (12px — compact padding), {spacing.md} (16px — standard card padding, gutters), {spacing.lg} (24px — section-internal gaps), {spacing.xl} (32px — inter-component gaps), {spacing.xxl} (48px — minor section breaks), {spacing.section} (80px — vertical section rhythm), {spacing.hero-vertical} (120px — hero top/bottom padding), {spacing.wide-gap} (112px — rare major separators).
• Section padding (vertical): {spacing.section} (80px) for standard content sections; {spacing.hero-vertical} (120px) for the hero band above the fold.
• Card internal padding: {spacing.md} (16px) for standard {component.card} and {component.card-product}; {component.card-icon-grid} also uses 16px internally.
• Gutters: Desktop grid uses implicit gutters derived from {spacing.xl} (32px) between columns in multi-column layouts; the right-rail sidebar separates from main content at approximately 48–64px.

Grid & Container

• Max content width: 1440px (extracted from main/article/header containers). Content centers within viewport beyond this width.
• Editorial density choice: The homepage operates at "editorial showcase" density — large hero imagery consumes ~60% of above-fold real estate, with text column taking the remainder. This is not a dashboard-dense layout.
• Specific grid behaviors: The viewport shows a two-column asymmetrical grid — a wide left column (~66%) containing the hero image and article header, and a narrower right rail (~33%) containing product announcement cards and icon-grid widgets. The right rail stacks vertically with consistent 24–32px gaps between items.
• Hero column splits: Left side holds the full-width hero image container (with "GPT-5.5" text overlay); below it sits the article headline and metadata row. Right side holds stacked promotional cards.

Whitespace Philosophy

OpenAI's whitespace strategy is editorial-generous with structural purpose. The hero section breathes with 120px vertical padding, allowing the gradient imagery to command attention without feeling cramped. Between sections, the system inserts 80–112px of negative space, creating clear visual chapters. However, within cards and the right rail, spacing tightens to 16–24px to maintain information density for scanable content. Whitespace is never "wasted" — it frames the dramatic imagery moments and separates distinct narrative blocks.

Header Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│ [OpenAI]   Research  Products  Business  Developers  Company  Foundation  🔍   Log In ▾  [Try ChatGPT ↗] │
│                                                                                      │
└──────────────────────────────────────────────────────────────────────────────────────┘
  ↑logo       ←——————— center-weighted navigation links —————————→        ↑search  ↑dropdown  ↑primary CTA
  flush-left                                                                   flush-right group
  max-width: 1440px centered
  height: 64px
  background: transparent (canvas shows through)

The top navigation bar is 64px tall, transparent background, with the OpenAI wordmark flush left. Navigation links center-weighted (Research through Foundation) with equal spacing. Flush-right cluster contains: search trigger (icon-only), "Log In" dropdown (ghost button styling), and the solid-black {component.button-primary} "Try ChatGPT" call-to-action.

Hero Section

┌───────────────────────────────────────────────────┐ ┌──────────────────────┐
│                                                   │ │  [Magazine Cover Img]│
│     ╭──────────────────────────────────╮          │ │                      │
│     │                                  │          │ │ Introducing...       │
│     │         GPT-5.5                  │          │ │ Product              │
│     │     (display-xl, white text)     │          │ │                      │
│     │                                  │          │ ├──────────────────────┤
│     │   Gradient flower/petal BG       │          │ │  ┌────┐ ┌────┐      │
│     │   (hero-image-container)         │          │  │Spark│ │Scout│      │
│     ╰──────────────────────────────────╯          │  │ └────┘ └────┘      │
│                                                   │  │  ┌────┐ ┌────┐      │
│  Introducing GPT-5.5                              │  │Angle│ │Tally│      │
│  (display-lg, black text)                         │  │ └────┘ └────┘      │
│  Product · 18 min read                            │ │  [gradient bg]      │
│  (meta-tag, label-md, muted)                      │ └──────────────────────┘
└───────────────────────────────────────────────────┘
  ↑main content column (~66% width)                   ↑right rail (~33% width)

The hero features a dominant image container with 40px rounded corners ({rounded.hero}) displaying a vibrant gradient photograph (pink/orange petals against blue-purple wash). Overlaid centered text reads "GPT-5.5" in {typography.display-xl} (64px, white). Below the image, the article headline "Introducing GPT-5.5" renders in {typography.display-lg}, followed by a metadata line using {component.meta-tag} styling. The right rail contains a featured product card with cover imagery and an icon-grid widget showcasing four product tools (Spark, Scout, Angle, Tally) each in individual rounded cards.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, no border | Base canvas, nav bar background, flat buttons | | 1 (Hairline outline) | 1px border {colors.hairline} | Input fields, card borders, dividers | | 2 (Soft lift) | {extensions.shadows.sm} — 0 2px 5px rgba(0,0,0,0.06) | Hovered cards, dropdown panels | | 3 (Float) | {extensions.shadows.md} — 0 4px 6px rgba(0,0,0,0.02) + 0 0 2px rgba(0,0,0,0.05) | Elevated cards ({component.card-product}), persistent floating elements | | 4 (Modal/Dropdown) | {extensions.shadows.lg} — 0 8px 24px rgba(0,0,0,0.08) | Modals, mega-menu dropdowns, tooltips |

The elevation philosophy is layered but color-neutral. Shadows never carry hue tints — they are pure black at very low opacity (max 8%). This keeps the visual temperature consistent with the monochrome palette. Elevation is used sparingly: most components (nav bar, hero band, article headers) sit flat at Level 0. Only cards intended to "pop" from their surroundings receive shadow treatment, and even then the lift is gentle enough that the component still feels part of the page rather than hovering above it.

The {component.card-product} (right-rail announcement cards) uses Level 3 elevation to separate from the white canvas, while the {component.card-icon-grid} product tiles appear to use either subtle shadow or rely on their container's background contrast for separation.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, badge corners, compact tags | | {rounded.DEFAULT} | 6px | Standard card radius, icon circles, default component rounding | | {rounded.md} | 8px | Medium emphasis cards, input focus states | | {rounded.lg} | 16px | Major card containers, product announcement cards | | {rounded.xl} | 24px | Large feature cards, image-adjacent containers | | {rounded.hero} | 40px | Hero image frame, signature squircle containers | | {rounded.pill} | 9999px | Buttons, search inputs, pill tags, all interactive elements |

The shape vocabulary splits clearly: interactive things are pills (buttons, inputs, nav triggers), informational things are rounded rectangles (cards, containers). The hero image container at 40px occupies a unique middle-ground — too sharp for a pill, too soft for a standard card — creating a distinctive "OpenAI squircle" that frames their dramatic gradient imagery.

Photography Geometry

Hero imagery and feature photographs render inside containers with {rounded.hero} (40px) corners, creating distinctly softened rectangular frames. Images appear to use 16:9 or similar widescreen aspect ratios within those frames. Product announcement cards in the right rail contain smaller thumbnail images with tighter crops (roughly 4:3 or 1:1) sitting atop text content, likely using {rounded.lg} (16px) or slightly less. Avatar/icon imagery in the product tile grid sits within circular or softly rounded square containers depending on context. Full-bleed imagery is reserved for the hero position only; all other images are contained within card boundaries.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Interactive Elements

{component.button-primary} — The principal call-to-action button used for "Try ChatGPT" and conversion-focused actions throughout the site. Solid {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) white text. Uses {typography.button} (14px/500) and {rounded.pill} (9999px) with horizontal padding of 20px and 10px vertical. Renders with a subtle {extensions.shadows.md} elevation on some contexts. Active state transitions to {component.button-primary-active} (dark charcoal #333333). Hover should target {component.button-primary-hover} (#1a1a1a).

{component.button-secondary} — Ghost/outline-style button alternative with transparent background and {colors.ink} text. Same pill geometry and typography as primary. On hover, applies {colors.surface-strong} (12% black) background fill via {component.button-secondary-hover}. Used for secondary actions alongside primary CTAs.

{component.button-ghost} — Minimal text-only interaction with transparent background and {colors.muted} text color. Slightly less rounded than CTAs at {rounded.DEFAULT} (6px). Tighter padding (8px × 12px) for compact utility actions like filter toggles or dismiss controls.

{component.login-dropdown} — Trigger for the account/authentication dropdown in the nav bar. Transparent background, pill-shaped, showing "Log In" text with a chevron indicator. Uses {typography.body-md} sizing. Expands to a dropdown panel on click/tap.

{component.search-trigger} — Icon-only square button (40px × 40px) opening the search interface. Transparent background with {colors.ink} icon color. Positioned in the nav bar's right cluster before the login control.

Cards & Containers

{component.card} — General-purpose content card with {colors.canvas} background and 16px ({rounded.lg}) corner radius. Internal padding of {spacing.md} (16px). Carries {typography.body-md} for descriptive text. Subtle shadow elevation (Level 2–3) lifts it from the page. Used for generic content blocks.

{component.card-product} — Specialized announcement card for product launches (e.g., "Introducing ChatGPT Images 2.0"). Larger radius at {rounded.xl} (24px), same 16px internal padding. Contains a thumbnail/image area above text content: headline in {typography.title-md}, category label ("Product") in {typography.label-md} with muted color, optional description. Uses {extensions.shadows.md} for float effect.

{component.card-icon-grid} — Container widget holding a 2×2 grid of product/tool icons (Spark, Scout, Angle, Tally in the viewport). White background with {rounded.lg} (16px) corners. Sits inside a larger gradient-background container (cyan-to-blue gradient visible in screenshot). Each inner tile is itself a mini-card with icon, tool name in bold, and subtitle in muted text. Internal gap between tiles approximately 12–16px.

{component.icon-circle} — Circular/squarish container for standalone icons (the emoji-style icons in the product grid: star, robot, lightning bolt, folder). Background of {colors.surface-soft} (4% black) with 48px dimensions and {rounded.DEFAULT} (6px) corners. Icon rendered centered, typically in multicolor or branded treatment.

{component.hero-image-container} — The large hero image frame containing gradient photography. Transparent background (image fills it), {rounded.hero} (40px) corners creating the signature squircle shape. Contains absolutely-positioned text overlay ("GPT-5.5") centered within. No internal padding — image bleeds to edge, text has its own positioning context.

{component.article-header} — Text block below hero image containing the article headline ("Introducing GPT-5.5") and metadata line. Canvas background, {typography.display-lg} for the headline in {colors.ink}, followed by {component.meta-tag} elements for category and read time. Padding top/bottom of {spacing.md} (16px), no lateral padding (inherits from grid column).

{component.meta-tag} — Inline label element for category ("Product") and metadata ("18 min read"). Transparent background, {typography.label-md} (13px/500) in {colors.muted} (#999999). Minimal vertical padding (4px). Multiple metas separated by non-breaking space or dot separator.

{component.badge-label} — Category or status badge similar to meta-tag but potentially with subtle background in some contexts. Here shown as transparent with 6px radius and {typography.label-md}.

Navigation & Structural

{component.top-nav} — The global navigation header spanning full viewport width at 64px height (height: 64px). {colors.canvas} background (transparent in practice since canvas is the page background), {typography.nav-link} (17px/400) for link text. Fixed positioning with potential backdrop-blur on scroll (CSS classes suggest backdrop-blur-[50px] capability). Contains logo, nav links, search, login, and CTA in a flex row with align-items: center.

{component.nav-link-item} — Individual navigation menu item (Research, Products, Business, etc.). Transparent background, {colors.ink} text, no padding override (uses nav bar's inherent spacing). Transitions color on hover/focus. May expand to show dropdown menu on certain items (Products appears to have a chevron indicator based on button classes).

Inputs & Forms

{component.text-input} — Search/text input field with pill-shaped container ({rounded.pill}). Transparent background with 44px height, 24px horizontal padding plus extra 52px left padding to accommodate a leading icon (search magnifying glass). Text renders in {typography.body-md} (14px/500) with {colors.ink} color. Border is initially none or hairline-thin; focus state ({component.text-input-focus}) likely adds {colors.border-strong} outline ring.

Dividers

{component.divider} — Horizontal rule using {colors.hairline} (12% black) at 1px height, spanning full width of parent container. Used between content sections where visual separation is needed without heavy blocking.

Footer (Inferred)

{component.footer} — Page footer region (not fully in viewport but inferable). {colors.surface} (#f1f1f1) background providing subtle grounding, {typography.body-sm} (13px) in {colors.muted} for link text. Padding of {spacing.xl} (32px) vertical and {spacing.md} (16px) horizontal. Multi-column layout expected for sitemap links, legal text, and social icons.

Do's and Don'ts

Do

• Do use {typography.display-xl} (64px) exclusively for hero-overlay text on imagery — never for body headlines.
• Do apply {rounded.pill} (9999px) to every button, input field, and clickable tag — this is non-negotiable for the OpenAI shape language.
• Do keep body text at {typography.body-md} (14px/500) maximum weight — if you need emphasis, increase size to {typography.body-lg} (16px) instead of bumping to 600/700.
• Do use {colors.muted} (#999999) for all metadata: categories, timestamps, read-time estimates, and helper descriptions beneath headlines.
• Do give hero image containers {rounded.hero} (40px) corners — this squircle shape is a signature identifier of OpenAI's current design era.
• Do let whitespace breathe at {spacing.hero-vertical} (120px) above and below the hero section; compressing this kills the dramatic entrance.
• Do layer surfaces using opacity tokens: {colors.surface-soft} (4%) for hovers, {colors.surface-strong} (12%) for pressed states — never introduce new hex colors for surface variation.
• Do keep the nav bar at 64px height with transparent background — avoid sticky-header solid-color treatments.
• Do use {extensions.shadows.sm} or {extensions.shadows.md} for card elevation — stay under 8% black opacity in all shadow layers.
• Do reserve {colors.primary} (#000000) background for the single most important action on any given screen (typically one {component.button-primary} instance).

Don't

• Don't use font-weight above 500 for any UI text — the 600/700 weights in OpenAI Sans exist for edge cases only, not regular interface elements.
• Don't add color to shadows — the shadow system is strictly neutral grayscale; warm or cool tints break the monochromatic discipline.
• Don't use rounded corners smaller than {rounded.sm} (4px) for anything except tiny decorative elements — the minimum viable radius is 4px, and most things should be 6px+.
• Don't place {component.button-primary} instances in close proximity without clear hierarchy — one primary CTA per visual region; demote others to {component.button-secondary} or {component.button-ghost}.
• Don't apply background color to the top navigation bar — it must remain transparent over the canvas content beneath it.
• Don't use {typography.caption} (12px) for body copy or interface labels — reserve it for true micro-copy like legal footnotes and timestamp suffixes.
• Don't invent new spacing values outside the defined scale — if you need something between {spacing.lg} (24px) and {spacing.xl} (32px), pick one; don't add 28px.
• Don't add gradients or patterns to card backgrounds — cards are solid {colors.canvas} or {colors.surface}; gradient backgrounds belong only to special decorative containers (like the icon-grid wrapper).
• Don't uppercase button text or navigation labels — the system uses sentence case throughout (except acronyms like "ChatGPT", "GPT").
• Don't omit the 52px left padding on {component.text-input} fields that contain leading icons — the space is calculated for the icon to sit comfortably without crowding the text cursor start position.

Motion & Animation

Transition Tokens

The extracted CSS reveals multiple transition patterns used across the codebase, likely corresponding to different interaction categories:

/* Fast color/property transitions — hover states, focus changes */
--transition-fast: color 0.1s cubic-bezier(0, 0, 1, 1), 
                   background-color 0.1s cubic-bezier(0, 0, 1, 1),
                   border-color 0.1s cubic-bezier(0, 0, 1, 1);

/* Standard interactive transition — button background shifts */
--transition-standard: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Complex property transitions — dropdown reveals, panel animations */
--transition-complex: color 0.2s cubic-bezier(0.17, 0.17, 0.3, 1) 0.2s,
                      background-color 0.2s cubic-bezier(0.17, 0.17, 0.3, 1) 0.2s,
                      transform 0.2s cubic-bezier(0.17, 0.17, 0.3, 1) 0.2s,
                      opacity 0.2s cubic-bezier(0.17, 0.17, 0.3, 1) 0.2s;

/* Opacity-only fade */
--transition-opacity: opacity 0.3s cubic-bezier(0, 0, 0.56, 0.46, 1);

Keyframe Animations

The following keyframe names were detected in the stylesheet, indicating specialized animation modules:

• terminal-sequenced-cursor-flicker — Blinking cursor animation for terminal/code-display components (research demos).
• terminal-typewriter-cursor-flicker — Typewriter-effect cursor blink for character-by-character text reveal.
• crt-flicker / crt-pulse / crt-typewriter / crt-blink-cursor / crt-content-glitch / crt-text-shadow-glitch / crt-overlay-glitch — Comprehensive CRT monitor simulation effects package for retro-computer aesthetic sections.
• carousel-nav-progress-fill / carousel-nav-progress-fade — Progress indicator animations for image/content carousels.
• float-x / float-y-rotate — Gentle floating/parallax movement for hero imagery or decorative elements.
• fade-in / fade-out / content-show — Standard entrance/exit fade transitions.
• safety-diagram-arrow-left / safety-diagram-arrow-right — Directional arrow movements for interactive safety/technical diagrams.
• search-loading-gradient — Animated shimmer gradient for search-result loading states.

Interaction Patterns

• Nav backdrop blur: On scroll, the top navigation gains backdrop-blur-[50px] with a smooth background-color transition (duration-short, ease-curve-out-cubic), creating frosted-glass effect over scrolling content.
• Button hover lift: Primary and secondary buttons likely gain subtle Y-axis translation (+1-2px) or shadow deepening on hover (inferred from transition-transform in complex token).
• Dropdown reveal: Login and mega-menu dropdowns animate with opacity + slight Y-offset (0.2s delay + 0.2s duration using out-cubic easing) for a "material unfurl" feel.
• Carousel progress: Image carousels feature animated progress-bar indicators that fill/fade to signal auto-advancement timing.
• Focus rings: Inputs and buttons gain {colors.border-strong} outline rings with fast (0.1s) color-transition easing on keyboard focus.
• Scroll-triggered fades: Content sections likely use intersection-observer-triggered fade-in animations as they enter viewport (standard for editorial landing pages).
• Icon grid hover: Product tiles in the {component.card-icon-grid} probably lift slightly with shadow intensification on hover (common pattern for this card style).

Imagery Style

• Hero imagery dominates the above-fold experience — the GPT-5.5 hero uses a macro floral photograph (pink/orange petals) treated with a cyan-blue gradient overlay/wash, creating an ethereal, AI-generated-aesthetic quality that signals creativity and generation capability.
• Gradient-as-atmosphere: Backgrounds behind product tiles use vibrant linear gradients (cyan → blue visible in the icon grid container), suggesting OpenAI uses gradient washes as environmental coloring rather than flat surface fills.
• Photographic realism mixed with synthetic quality: The magazine-cover mockup in the right rail ("Convergence — ChatGPT Images 2.0") shows photorealistic rendering (chameleon in cowboy hat on magazine cover), indicating the imagery showcases AI generation capabilities themselves.
• Full-bleed hero, contained everywhere else: Only the hero image gets unrestricted canvas presence (within its rounded frame); all subsequent imagery lives inside card boundaries with controlled aspect ratios.
• Rounded image corners: All photographed/thumbnail content renders inside containers with 16–40px radius, softening the digital edges and integrating images into the rounded-card component system.
• White text overlays on imagery: When text sits on top of photos (like "GPT-5.5" on the hero), it uses {colors.on-primary} (#ffffff) at large size for legibility, positioned centrally or with careful placement avoiding busy image regions.
• No stock-photo aesthetic: Despite the floral subject, the image processing (gradient mapping, saturation treatment) gives it a distinctive "AI-native" look that avoids generic tech-stock photography vibes.
• Product icons are playful: The icon grid uses emoji-like characters (⭐, 🤖, ⚡, 📁) suggesting a friendly, accessible tone for sub-products/tools, contrasting with the serious main-brand presentation.

Icon System

• Library: Custom SVG icons (no third-party icon library detected in imports; framework tailwindLikely suggests inline SVG or custom component system).
• Specific icons observed:
  • Search/magnifying glass (nav bar search trigger)
  • Chevron down (login dropdown indicator, nav submenu arrows)
  • External link arrow (Try ChatGPT ↗ external-link indicator)
  • Star/spark (Spark product icon)
  • Robot/head (Scout product icon)
  • Lightning bolt (Angle product icon)
  • Folder/files (Tally product icon)
  • Menu/hamburger (implied for mobile nav, though desktop-only in viewport)
• Treatment: Icons appear to use currentColor inheritance for stroke/fill color, aligning with text color of parent container. Nav icons render at approximately 16–20px; product grid icons at 24–32px for prominence. Alignment is optically centered with adjacent text (vertical-align: middle or flexbox centering).

Recommended Frontend Stack

- Framework:      Next.js (App Router) — inferred from __next_f script markers and React server-component patterns
- Styling:        Tailwind CSS v3-v4 (utility-first with custom theme extension; class naming conventions match Tailwind's arbitrary-value syntax)
- Fonts:          Self-hosted WOFF2 from cdn.openai.com for OpenAI Sans + LF Serif; define @font-face declarations pointing to their CDN URLs
- Animation:      CSS transitions + keyframes (custom animation module system detected; no JS-animation library required)
- Icons:          Custom SVG components (inline React components with currentColor)
- Component lib:  Custom component system (no shadcn/Radix detected; homegrown primitives with Tailwind composition)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column stack; hero image reduces to ~100% width; nav collapses to hamburger menu; right rail moves below main content | | Tablet (md) | 640–1023px | Two-column begins; hero image takes ~60% width; nav may show abbreviated link set; icon grid collapses to 2-col or scroll | | Desktop (lg) | 1024–1439px | Full nav visible; hero maintains 2-column asymmetrical layout; max-width container engages | | Wide (xl) | ≥ 1440px | Content centers in 1440px max-width container with equal margins; spacing scales to full token values |

Touch Targets

• {component.button-primary}: ~160px × 40px (padding 10px × 20px + text) — exceeds 44px WCAG AAA minimum comfortably.
• {component.text-input}: 44px height (explicitly set) — meets 44px minimum; pill shape ensures generous tap area.
• {component.search-trigger}: 40px × 40px — slightly under 44px ideal; consider increasing to 44–48px for mobile touch compliance.
• {component.nav-link-item}: Full 64px nav bar height — excellent touch target spanning entire header height.
• {component.card-icon-grid} inner tiles: Approximately 100px × 100px estimated — well above touch minimums.

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal link list (Research, Products, Business...) collapses into a hamburger menu triggering a full-screen or off-canvas drawer with stacked links. The "Try ChatGPT" CTA likely remains persistent or moves into the menu.
• Hero columns: The asymmetric 2-column layout (hero image + headline left, promo cards right) stacks vertically on mobile: hero image first (full width), then article header, then right-rail cards in sequence.
• Right-rail grid: The 2×2 icon grid may collapse to a horizontal scroll container or 1-column stack on narrow viewports to prevent excessive vertical length.
• Hero text overlay: "GPT-5.5" overlay text scales down proportionally (likely 40–48px on mobile vs 64px desktop) maintaining visual dominance over the reduced image.
• Spacing compression: Vertical padding reduces from {spacing.hero-vertical} (120px) to approximately {spacing.xl} (32–48px) on mobile to avoid excessive whitespace consuming limited screen real estate.
• Card padding: Internal card padding may tighten from 16px to 12px on mobile, and corner radii may reduce slightly ({rounded.lg} → {rounded.md}) for denser information display.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS matching the extracted framework profile. Configure tailwind.config.js to extend the theme with all tokens from this DESIGN.md's YAML frontmatter (colors, typography, borderRadius, spacing, boxShadow as custom extensions).

2. Define CSS custom properties for the font-family variables (--font-sans, --font-serif) pointing to the OpenAI CDN WOFF2 URLs found in the font-face declarations. Add @font-face rules for OpenAI Sans (weights 400, 500, 600, 700) and LF Serif (weight 400, italic) with font-display: swap.

3. Build components referencing only tokens. Every hardcoded value in your JSX/HTML should reference a Tailwind theme token or CSS custom property. If you find yourself writing bg-black, use bg-primary; if writing rounded-[9999px], use rounded-pill (define this in your config).

4. Implement the nav bar first as the foundational layout element: 64px height, transparent background, flexbox row with the ASCII diagram structure (logo left, links center, utilities right). Test the backdrop-blur scroll behavior early — it's a signature interaction.

5. Construct the hero section next with its two-column grid: left column containing the {component.hero-image-container} (40px-radius img + centered overlay text), right column with stacked {component.card-product} and {component.card-icon-grid}. Get the 1440px max-width container working before adding interior content.

6. Add state variants as separate component entries. Your component library should export ButtonPrimary, ButtonPrimaryHover, ButtonPrimaryActive, ButtonPrimaryDisabled as distinct styled variations (or use Tailwind's variant prefixes: hover:bg-primary-hover, active:bg-primary-active).

7. Respect the weight ceiling audit. Before committing any typography, run a grep/search for font-weight: [6-9] or semibold or bold in UI components — flag anything above 500 unless it's a justified exception (like a numeric data visualization label).

8. Test with real imagery. The design's success depends heavily on hero image treatment — source a gradient-floral or abstract gradient photo, place it in the 40px-radius container, overlay white "GPT-5.5" text at 64px, and verify the atmospheric balance matches the original intent.

9. Run the linter. Execute npx @google/design.md lint DESIGN.md after any frontmatter edits to catch broken {token.references}, orphaned components, or missing required fields before pushing to your design system repo.

10. When in doubt about emphasis, choose size over weight. The OpenAI system's core discipline is letting 64px/500 headlines coexist with 14px/500 body text — if something feels insufficiently prominent, make it bigger first, darker second, heavier last (and almost never).

Font Setup

For local development without access to the OpenAI CDN, configure your font loading as follows:

/* In globals.css or equivalent */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');

:root {
  --font-sans: "DM Sans", "OpenAI Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "LF Serif", Georgia, "Times New Roman", serif;
  
  /* Color tokens */
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-primary: #000000;
  /* ... extend with all colors from frontmatter ... */
}

Replace DM Sans with OpenAI Sans once you have licensed access or are deploying to the openai.com domain where the CDN URLs resolve.

Known Gaps

• Hover state specifics: Per the no-hover policy, exact hover styles (shadow depth changes, Y-translate values, background-color targets) for buttons, cards, and links are inferred from transition tokens but not visually confirmed.
• Loading/skeleton states: No loading skeleton, spinner, or shimmer component was extractable from the static viewport; the search-loading-gradient keyframe suggests such states exist but their DOM structure is unknown.
• Form validation states: Beyond {component.text-input-focus}, error, warning, and success input states (red/green borders, accompanying message typography) were not visible in the screenshot.
• Dark mode: The system is explicitly light-mode (extensions.mode: "light"). Dark-mode token mappings (inverting canvas/ink, adjusting surface opacities, ensuring on-dark contrast) are entirely speculative and would require a separate dark-mode design pass.
• Mobile navigation behavior: The collapsed hamburger menu, its animation, and the off-canvas drawer layout are assumed based on responsive breakpoints but not captured in the desktop viewport.
• Mega-menu dropdown contents: Navigation items like "Products" and "Developers" likely trigger multi-column dropdown panels on desktop hover; their internal structure, link lists, and featured-content areas are not represented in the extracted data.
• Footer complete layout: Only the footer's existence and basic styling tokens are inferred; the actual sitemap columns, newsletter signup, legal text, and social icon arrangement are below the visible viewport.
• CRT/Terminal animation modules: Several complex keyframe animations (crt-*, terminal-*) were detected in CSS but their associated DOM structures and user-facing contexts (likely research demo pages, not the homepage) could not be mapped to specific components.
• Exact pixel values for opacity-based surfaces: The rgba(0, 0, 0, 0.04) and rgba(0, 0, 0, 0.12) surface tokens are extracted accurately, but their perceptual appearance varies significantly by monitor calibration and ambient lighting; implementers should test on physical hardware.
• Component composition for icon-grid widget: The nested card-within-gradient-container structure of the {component.card-icon-grid} (white tiles inside a cyan gradient wrapper) is partially inferred; the gradient container itself has no dedicated component entry and may be a one-off layout construct.