OpenAI

Overview

OpenAI's design system embodies "Purposeful Minimalism"—a philosophy that strips away ornament to reveal clarity and function. The brand serves researchers, developers, and enterprises seeking to understand and deploy advanced AI systems. The aesthetic is deliberately austere: pure white backgrounds (#ffffff), pure black text (#000000), and a restrained accent palette drawn from data visualization needs (blues #539af8, purples #a67df2, greens #53b559). This creates an environment where content—research papers, API documentation, product announcements—commands full attention without visual distraction. The emotional response is one of intellectual rigor and trustworthiness: the interface recedes, and the work emerges.

OpenAI's voice is precise, direct, and free of marketing hyperbole. Sentences are active and unadorned: "We believe our research will eventually lead to artificial general intelligence." The brand avoids breathless language, instead favoring concrete claims and measured optimism. Vocabulary is technical but accessible—terms like "deployment," "research," "capability," and "safety" appear frequently. The tone assumes the reader is intelligent and motivated, whether they are a researcher evaluating a paper or a developer integrating an API. Example sentence in brand voice: "ChatGPT can help with writing, analysis, math, coding, and creative tasks—try it now to see what's possible."

Colors

OpenAI's color strategy is rooted in restraint and purposefulness. The primary color is pure black (#000000), used exclusively for call-to-action buttons ("Try ChatGPT"), primary navigation, and body text. This is not a near-black or charcoal; it is absolute black, creating maximum contrast against the white surface (#ffffff) and signaling importance through visual weight rather than hue. The on-primary text is pure white (#ffffff), ensuring WCAG AAA compliance (contrast ratio 21:1).

Secondary and tertiary colors are reserved for data visualization, status indicators, and supporting UI elements. Secondary is a vivid blue (#539af8), drawn from the chart theme system and used in badges, accent highlights, and interactive states. Tertiary is a soft purple (#a67df2), used for alternative acce

Typography

OpenAI Sans (with fallback to OpenAI Sans Variable Scripts, then system sans-serif) is the sole typeface, creating visual coherence across all scales. The type system uses six functional levels: display (60px, 700 weight, -0.04em tracking) for hero statements; headline-lg (40px, 600 weight, -0.02em) for section titles; headline-md (28px, 600 weight, -0.01em) for subsections; title-lg (20px, 600 weight) for card titles; body-lg (18px, 400 weight) for long-form content; body-md (17px, 400 weight) for standard UI text; label-md (14px, 500 weight, 0.01em) for buttons and form labels; and label-sm (13px, 500 weight, 0.02em) for small UI text and badges. The progression communicates hierarchy through size and weight, not color—a deliberate choice that keeps the interface monochromatic. Negative

Layout

OpenAI uses a 12-column fluid grid with a maximum container width of 1280px, allowing content to breathe on large screens while remaining readable on mobile. The gutter size is responsive: max(20px, calc((100vw - 1280px) / 2)), ensuring proportional margins that scale with viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments within components; sm (12px) for internal component padding; md (24px) for section margins and card padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The page rhythm alternates between full-width hero sections (white background, centered text) and contained content regions (max-width: 1280px, centered). White space is generous—sections are separated by lg (40px) vertical spacing, and cards within sections

Elevation & Depth

OpenAI's elevation system is minimal and functional, using subtle shadows to indicate interactive depth rather than creating dramatic layering. The shadow palette consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on small UI elements like buttons; md (0 2px 8px rgba(0, 0, 0, 0.12)) for elevated cards and dropdown panels; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modal overlays and prominent cards. Shadows use pure black with low opacity (6–15%), ensuring they remain subtle and don't introduce color. The default card state has no shadow; shadow is applied only on hover

Shapes

OpenAI's shape philosophy is "Geometric Precision"—favoring sharp, intentional corners over soft curves, with strategic use of full-radius (9999px) for pill-shaped buttons and inputs. Buttons use border-radius: 40px (full-radius), creating a distinctive pill shape that signals interactivity and breaks the otherwise rectilinear interface. Input fields also use full-radius (border-radius: 9999px), with padding: 10px 24px 10px 52px to accommodate icon prefixes (e.g., search icons). Cards and panels use border-radius: 4px (sm) or 0.5rem (DEFAULT), maintaining a clean, architectural feel. Dropdown

Components

Action Elements Buttons are the primary interactive element and use the full-radius pill shape (border-radius: 40px) to signal clickability. Primary buttons have backgroundColor: #000000, textColor: #ffffff, padding: 10px 20px, height: 40px, fontWeight: 500 (label-md typography). On hover, the background shifts to #303030 (primary-container), maintaining contrast while indicating interactivity. Secondary buttons use backgroundColor: rgba(0, 0, 0, 0.04), textColor: #000000, padding: 8px 16px, height: 36px, and on hover shift to rgba(0, 0, 0, 0.08). All buttons use a 200ms ease-out transition on background-color and box-shadow. Focus states apply a 3px outline at rgba(0, 0, 0, 0.08) with 2px offset, meeting WCAG AAA standards.

Containers & Surfaces Cards are the primary content cont

Do's and Don'ts

**Do**

• Do use pure black (#000000) for primary CTAs and body text—it creates maximum contrast and signals importance without relying on hue.
• Do apply full-radius (border-radius: 40px) to buttons and input fields to create visual distinction from rectangular containers.
• Do use the spacing scale semantically: md (24px) for section margins, lg (40px) for major transitions, and xs (4px) for micro-adjustments within components.
• Do maintain generous white space between sections—aim for lg (40px) vertical spacing to create a breathing, unhurried aesthetic.
• Do use shadows sparingly: apply md (0 2px 8px rgba(0, 0, 0, 0.12)) only on hover or elevated contexts, never as a default state.
• Do prioritize readability: use body-md (17px, 400 weight) as the baseline for UI text and ensure all text meets 4.5:1 contrast against its background.

**Don't**

• Don't use near-black or charcoal as primary—pure black (#000000) is the brand primary and creates the necessary visual weight and contrast.
• Don't apply rounded corners to buttons; use full-radius (40px) exclusively to maintain the distinctive pill shape.
• Don't layer multiple shadows or use blur/spread—keep shadows tight (0 2px 8px) and use pure black with low opacity (6–15%).
• Don't introduce secondary colors (blue #539af8, purple #a67df2) on primary CTAs; reserve them for badges, data visualization, and supporting UI elements.
• Don't reduce padding or spacing below the semantic scale (xs: 4px minimum); cramped layouts undermine the brand's clarity and accessibility.
• Don't use color alone to convey status or hierarchy—always pair color with size, weight, or position to ensure information is accessible to all users.