OpenAI Codex

Overview

OpenAI Codex is a design system built for technical clarity and trust. The brand serves engineering teams and enterprises who demand precision, speed, and reliability from their AI coding agents. The aesthetic is 'Minimalist Precision'—a light-mode, high-contrast interface that prioritizes legibility and reduces cognitive load through restrained use of color and generous whitespace. Every pixel serves a function; decoration is eliminated in favor of information hierarchy. The emotional response is one of confidence: users feel they are in control of powerful, well-engineered tools. The voice is direct, technical but never jargon-heavy, and action-oriented. OpenAI's tone avoids hype; instead, it speaks in concrete capabilities and measurable outcomes. Example: 'Codex completes pull requests 40% faster—integrate it into your workflow today.'

Colors

The color system employs a stark primary-secondary split: pure black (#000000) and pure white (#ffffff) form the backbone, ensuring maximum contrast and accessibility (WCAG AAA). Black is the primary accent, used for all interactive elements (buttons, links, focus states) and primary text. Secondary colors—a deep technical blue (#2e4780) and warm earth tones (#736422, #804126)—appear in data visualization, status indicators, and supporting UI elements. The secondary blue (#2e4780) is reserved for charts, graphs, and analytical contexts; its light container (#eaf1fe) provides subtle backgrounds for secondary information. Tertiary warm tones (#736422 keyline through #fff4c2 lightest) are used for success states, highlights, and accent badges. All surfaces use the white-to-gray scale (surface

Typography

The type system uses OpenAI Sans (a proprietary variable font family) across all scales, ensuring brand consistency and technical precision. Display (60px, weight 700) is reserved for hero headlines and major page titles; headline-lg (48px, weight 600) for section breaks; headline-md (32px, weight 600) for subsections. Body-lg (18px, weight 400) is used for introductory paragraphs and feature descriptions, while body-md (17px, weight 400) serves as the default body text—matching the rendered DOM default of 17px. Label-md (14px, weight 500) is applied to buttons, form labels, and UI controls; label-sm (12px, weight 500) for captions, badges, and metadata. Letter-spacing is tightened on display and headline levels (-0.04em to -0.01em) to create visual impact and reduce perceived size; body a

Layout

The page layout uses a 12-column grid with a max-width container of 1280px, centered with symmetric gutters (24px on desktop, responsive down to 20px on mobile). The gutter variable (--gutter-size) is calculated as max(20px, calc((var(--document-width) - 68rem) / 2)), ensuring the content never feels cramped. Sections are separated using lg spacing (40px) for major breaks, md spacing (24px) for subsections, and sm spacing (12px) for related elements within a section. The hero section uses a centered, single-column layout with the OpenAI logo (80px × 80px) centered above the headline, followed by a subheading (body-lg), and two CTAs side-by-side (primary button + secondary text link). Whitespace is generous: the hero occupies ~60% of the viewport height, with breathing room above and below.

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle surface-color layering, avoiding the heavy shadows common in skeuomorphic design. Level 1 (Base): the white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Containers): 1px border in outline-variant (#dddee1) plus elevation-sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)), creating a subtle lift. Level 3 (Modals, Dropdowns, Popovers): elevation-md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px border in outline (#bcbec4), signaling modal prominence. Level 4 (Floating Actions, Tooltips): eleva

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are used strategically to soften the austere black-and-white palette without sacrificing precision. Buttons use full rounding (border-radius: 9999px) to create pill-shaped affordances that feel modern and approachable; this applies to all button variants (primary, secondary, ghost). Input fields also use full rounding (9999px) to signal interactivity and match button styling. Cards and containers use moderate rounding (12px to 16px) to create visual separation without appearing playful; this is the md to lg range. Modals and popovers

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#000000) background, {colors.on-primary} (#ffffff) text, label-md typography (14px, weight 500), full rounding (9999px), and 12px vertical × 24px horizontal padding, resulting in a 44px height. On hover, the background transitions to #1a1a1a over 200ms (transition: background-color 200ms ease-out), providing tactile feedback. The button-secondary uses a transparent background with a 1px border in {colors.outline} (#bcbec4), same typography and rounding, and transitions to {colors.surface-container-low} (#f0f0f0) on hover. The button-ghost uses rgba(0, 0, 0, 0.04) background (matching the rendered primaryCta style), full rounding, and transitions to rgba(0, 0, 0, 0.08) on h

Do's and Don'ts

**Do**

• Do use black (#000000) as the primary accent for all CTAs, focus states, and key interactive elements—it commands attention and builds trust.
• Do maintain high contrast: all text must meet WCAG AAA standards (7:1 minimum ratio) for accessibility and legibility.
• Do use the secondary blue (#2e4780) and tertiary warm tones (#736422, #804126) exclusively for data visualization, status indicators, and supporting UI—never as primary actions.
• Do apply full rounding (9999px) to buttons and inputs to signal interactivity; use moderate rounding (12–16px) for cards and containers.
• Do transition all interactive states (hover, focus, active) over 150–200ms using ease-out timing to provide tactile feedback without jarring jumps.
• Do use the surface-container scale (low #f0f0f0 through highest #e0e0e0) to create depth through color layering, not shadows alone.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency beyond rgba(0, 0, 0, ...) for shadows.
• Don't apply shadows heavier than elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12))—the system prioritizes clarity over depth.
• Don't mix rounded and sharp corners on related components; buttons and inputs must both use full rounding (9999px) for consistency.
• Don't use the secondary or tertiary colors for primary actions or body text—they are reserved for data visualization and status states.
• Don't apply text-shadow or text-stroke effects except on small labels over busy backgrounds (use 0 1px 2px rgba(255, 255, 255, 0.8) only).
• Don't exceed 24px padding on cards or 24px horizontal padding on buttons—the system values compact, efficient layouts.