ChatGPT Design System

Overview

ChatGPT presents a strikingly minimal conversation interface—almost austere in its restraint. The canvas sits at {colors.canvas} (#fcfcfc), a whisper away from pure white, creating a luminous but not blinding workspace. The dominant color philosophy is near-monochrome: {colors.ink} (#0d0d0d) carries almost all text, while brand voltage lives exclusively in the stark black of {colors.primary} (#010000)—used sparingly on the "Log in" CTA and solid icon buttons. This is a design that trusts whitespace, system typography, and interaction clarity over decorative flourish.

The type voice is distinctly utilitarian: the system font stack (SF Pro, Segoe UI, -apple-system) handles nearly every element, with OpenAI Sans available as a proprietary alternative for brand moments. Weights cluster tightly around 400 (regular) and 600 (semibold)—there is no bold 700 in the entire interface. The headline "Where should we begin?" arrives at {typography.display-lg} (24px/400), deliberately understated for an AI product that could easily lean into theatrical sizing. The single typographic move that defines this system is its refusal to shout: even the most prominent text feels conversational, not promotional.

Shape language follows a clear hierarchy: {rounded.pill} (infinite radius) governs all primary actions—the login button, the sign-up outline, the input container's outer shell. Meanwhile, {rounded.md} (10px) defines the softer interactive elements: sidebar items, ghost buttons, hover states. Icon buttons settle at {rounded.DEFAULT} (8px). This creates a visual grammar where "commitment" actions are visibly more rounded than "navigation" actions.

Two sub-systems are detectable: the sidebar dialect (compact, label-driven, hover-revealed backgrounds) and the hero/input dialect (centered, generous, shadow-elevated). The sidebar operates at a denser information scale; the hero breathes with {spacing.section} vertical padding and a 52–60px tall input field that dominates the viewport center.

Key Characteristics

• Canvas is {colors.canvas} (#fcfcfc)—warmer than pure white, cooler than cream—providing a neutral stage that reduces eye strain during extended sessions.
• Primary brand color {colors.primary} is effectively black (#010000), reserved exclusively for committed actions: the "Log in" filled button and solid circular icon buttons.
• All text except disabled states uses {colors.ink} (#0d0d0d); secondary/muted text drops to {colors.muted} (#8f8f8f).
• Typography never exceeds weight 600; headlines use weight 400 at modest sizes (24px max in this view), signaling confidence without aggression.
• Pill-shaped containers ({rounded.pill}) denote primary CTAs and the main chat input; {rounded.md} (10px) denotes secondary/surface-level interactions.
• The sidebar uses {colors.surface-soft} (5% black overlay) for active/hover states, creating subtle differentiation without borders.
• Shadows are nearly absent—only {extensions.shadows.sm} appears on elevated surfaces, and even then it's a whisper-thin multi-layer treatment.
• Transitions run at 150ms with cubic-bezier(0.4, 0, 0.2, 1)—the standard Material/ease-out curve—feeling instant but not jarring.
• The chat input is the visual centerpiece: white surface ({colors.surface}), 20px horizontal padding, 40–44px internal height, flanked by icon buttons in a balanced asymmetry.

Colors

Brand & Accent

• Primary ({colors.primary} — #010000): Near-black fill for committed CTAs—the "Log in" button, solid circular action buttons inside the input field. This is the only color that reads as "filled" or "primary" in the entire interface.
• Primary Hover ({colors.primary-hover} — #1a1a1a): Slightly lighter black for hover states on primary buttons, providing subtle feedback without abandoning the stark aesthetic.
• Primary Active ({colors.primary-active} — #000000): Pure black for pressed/active states on primary buttons.

Surface

• Canvas ({colors.canvas} — #fcfcfc): The application background—a fraction above white, giving the workspace a soft-lit quality rather than harsh #fff.
• Surface ({colors.surface} — #ffffff): Pure white for card-like containers, notably the chat input wrapper and any elevated panels.
• Surface Soft ({colors.surface-soft} — rgba(0, 0, 0, 0.05)): A 5% black overlay used for hover states on sidebar items, ghost buttons, and background fills on interactive list rows.
• Surface Hover ({colors.surface-hover} — rgba(0, 0, 0, 0.05)): Alias for surface-soft; applied via Tailwind's hover:bg-token-surface-hover utility class.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surfaces that sit above the canvas layer—dropdowns, modals, tooltips (inferred from shadow presence).
• Surface Dark ({colors.surface-dark} — #0d0d0d): Near-black background for high-contrast icon buttons (the microphone/action circle inside the input).

Text

• Ink ({colors.ink} — #0d0d0d): The primary text color—headlines, labels, button text, sidebar item labels. Used at 180+ occurrences in the extracted DOM.
• Body ({colors.body} — #0d0d0d): Identical to ink in this light mode; maintains semantic separation for potential dark-mode mapping.
• Muted ({colors.muted} — #8f8f8f): Secondary text color—footer legal copy, helper text, disabled icon buttons, the "UPDATED" badge text. Appears 24 times in the DOM.
• Muted Soft ({colors.muted-soft} — #a0a0a0): Tertiary/disabled text—inferred for placeholder states and very secondary metadata.
• On Primary ({colors.on-primary} — #ffffff): White text on black primary buttons—ensures AA contrast against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text/icons on {colors.surface-dark} circular buttons (microphone, send/action).
• On Surface ({colors.on-surface} — #0d0d0d): Text resting directly on white {colors.surface} cards.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(0, 0, 0, 0.08)): Very subtle dividers—at 8% opacity, nearly invisible, used for sidebar section separators or list item bottom borders.
• Hairline Strong ({colors.hairline-strong} — rgba(0, 0, 0, 0.12)): Slightly more visible borders—input focus rings, card outlines when present.
• Border Input ({colors.border-input} — rgba(0, 0, 0, 0.1)): The default border for text inputs before focus state activates.

Semantic

• Link ({colors.link} — #0d0d0d): Inline links inherit ink color; underlines provide the only differentiation in this monochromatic scheme.
• Link Active ({colors.link-active} — #000000): Slightly darker on active/visited state.
• Error ({colors.error} — #dc2626): Red for validation errors—not observed in screenshot but standard for form systems.
• Success ({colors.success} — #16a34a): Green for confirmation states—inferred for future implementation.
• Info ({colors.info} — #2563eb): Blue for informational alerts—inferred.

Typography

Font Family

The system relies primarily on the native OS font stack: -apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol". This stack renders as San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android, and Helvetica as the universal fallback. It appears 209 times in the extracted DOM, making it the overwhelming workhorse.

Additionally, OpenAI Sans is loaded via @font-face declarations from cdn.openai.com in weights 300, 400, 500, and 600 (each with italic variants). This proprietary geometric sans-serif appears only once in the current view (likely in branding elements or specific product surfaces not captured in the logged-out home state). OpenAI Sans serves as the brand voice for marketing moments; the system stack carries the interface itself.

The Circle font is also declared via embedded base64 @font-face rules—this appears to be a custom icon/dingbat font for UI icons, loaded inline to avoid network requests.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 32px | 400 | 1.35 | -0.01em | Marketing headlines (not in this view; inferred for landing pages) | | {typography.display-lg} | 24px | 400 | 1.17 | 0 | Hero question "Where should we begin?" | | {typography.display-md} | 20px | 400 | 1.4 | 0 | Section headings in dashboard | | {typography.title-lg} | 18px | 600 | 1.4 | 0 | Card titles, modal headers | | {typography.title-md} | 24px | 600 | 1.33 | 0 | Sidebar section headers, emphasized headings | | {typography.title-sm} | 16px | 600 | 1.5 | 0 | Subsection labels, settings categories | | {typography.body-lg} | 16px | 400 | 1.5 | 0 | Input placeholder text, body copy | | {typography.body-md} | 14px | 600 | 1.43 | 0 | Sidebar navigation labels, button text | | {typography.body-sm} | 13px | 400 | 1.38 | 0 | Metadata, timestamps, small labels | | {typography.caption} | 12px | 400 | 1.33 | 0 | Footer legal text, badges | | {typography.button} | 14px | 500 | 1.25 | 0 | Primary and secondary button labels | | {typography.button-sm} | 13px | 500 | 1.23 | 0 | Small button labels, tertiary actions | | {typography.label} | 14px | 500 | 1.43 | 0 | Form labels, table headers |

Principles

ChatGPT's typographic system is defined by restraint across three axes: weight, size, and color variation. The maximum weight encountered is 600 (semibold)—there is no bold 700 anywhere in the interface. This is a deliberate choice: the product's voice is conversational assistant, not marketing megaphone. When emphasis is needed, the system reaches for size (24px headlines vs 14px body) or color ({colors.ink} vs {colors.muted}) rather than weight.

Hierarchy is carried primarily through size deltas (24px → 16px → 14px → 12px) and weight pairing (400 for reading text, 600 for labels/headings). The {typography.display-lg} role at 24px/400 is particularly notable—it's large enough to dominate the hero, but its regular weight keeps it from feeling aggressive. This mirrors how a human might speak a welcome phrase: clearly, but not shouting.

Letter spacing is essentially neutral (0 or -0.01em at the largest size). There is no tracked-out uppercase styling, no wide-set display type. The system trusts the typeface's native metrics. Line heights are generous (1.33–1.5), ensuring readability during the long reading sessions typical of AI conversations.

Color-as-hierarchy plays a supporting role: {colors.muted} (#8f8f8f) immediately demotes footer text, disabled icons, and timestamp metadata without any size change. This allows the same {typography.body-sm} token to serve both primary and secondary contexts simply by swapping the color reference.

Note on Font Substitutes

OpenAI Sans is a proprietary font not available on Google Fonts. For open-source reimplementation, the closest visual substitutes are:

• Inter (Google Fonts, variable weight): Shares the geometric humanist skeleton, similar x-height, and excellent screen rendering at small sizes. Use font-weight: 400 through 600 to match the weight range.
• DM Sans (Google Fonts): Slightly warmer, but captures the friendly-yet-technical tone of OpenAI Sans.
• Plus Jakarta Sans (Google Fonts): Another strong match with similar proportions and a slightly more personality-driven character set.

Define these CSS variables for substitution:

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Inter", "DM Sans", var(--font-sans);
}

If implementing without access to cdn.openai.com, replace "OpenAI Sans" references with var(--font-brand).

Layout

Spacing System

• Base unit: 4px (with 5px and 6px as common refinements—this system does not strictly adhere to powers of two).
• Tokens: {spacing.xxs} (2px) for micro-adjustments, {spacing.xs} (4px) for internal icon gaps, {spacing.sm} (5px) for tight spacing in compact components, {spacing.md} (6px) for the most frequent spacing value (appears 49 times in DOM—sidebar item padding, gaps between icon and text), {spacing.base} (8px) for standard component padding, {spacing.lg} (10px) for button padding and input internals, {spacing.xl} (12px) for medium gaps, {spacing.2xl} (16px) for section-internal padding, {spacing.3xl} (20px) for larger component gaps, {spacing.4xl} (24px) for major section breaks, {spacing.section} (48px) for vertical band padding.
• Section padding (vertical): {spacing.section} (48px) — used in the {component.hero-band} to center the input vertically within the viewport.
• Card internal padding: The {component.chat-input-container} uses 4px 4px 4px 12px (asymmetric to accommodate the leading plus icon).
• Gutters: The main content area has no explicit gutter system in this view—it's a centered single-column layout. The sidebar maintains consistent 10px horizontal padding on items.

Grid & Container

• Max content width: 1150px (extracted from both main and header container widths). This is unusually wide for a chat interface, reflecting the product's evolution toward document editing, code execution, and multimodal content alongside conversation.
• Density choice: Editorial-airy in the hero (single centered column), marketplace-dense in the sidebar (compact 260px rail with stacked items). The system switches density by context rather than enforcing global consistency.
• Grid behavior at desktop: Single-column center layout for the hero/chat area. Left-fixed sidebar at {spacing.sidebar-width} (260px). No multi-column grid detected in the logged-out home state.
• Hero column splits: The hero is a pure center-aligned single column: headline → input field → footer. No side-by-side text/illustration layout in this view.

Whitespace Philosophy

The system practices aggressive vertical breathing room. The hero headline sits approximately 100–120px from the top nav, and the input field receives roughly 24–32px of space above it. Horizontally, the input stretches to ~680–720px wide—wide enough to feel expansive, narrow enough to maintain reading comfort. This is not a cramped tool interface; it's a conversation stage, and the whitespace invites the user to speak.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [☰]     [🔍][⊞]    ChatGPT ▼              [Log in] [Sign up] │
│ logo    search                          primary   secondary   │
│                                          button    button      │
└─────────────────────────────────────────────────────────────────┘
  ↑         ↑                                  ↑          ↑
  36px     36px                             pill       pill
  icon     icons                           rounded    rounded

The top nav ({component.top-nav}) spans full viewport width at {spacing.nav-height} (56px) height. The ChatGPT wordmark sits left-of-center with a dropdown chevron. Search and view-toggle icons occupy the left-center zone. The right side flushes the authentication pair: {component.button-primary} (filled black) and {component.button-secondary} (outlined/transparent).

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│                                                                 │
│                    Where should we begin?                       │
│                    ─────────────────────                         │
│                                                                 │
│     ┌───────────────────────────────────────────────────┐      │
│     │ [+]  Ask anything                    [🎤] [●]      │      │
│     └───────────────────────────────────────────────────┘      │
│                                                                 │
│              ChatGPT is AI. By using it, you agree...           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

The {component.hero-band} centers everything horizontally. The {component.hero-headline} ("Where should we begin?") uses {typography.display-lg}. Below it, the {component.chat-input-container} (white, {rounded.xl}, shadow-elevated) contains: a {component.chat-input-plus-btn} (plus icon, left-aligned), the {component.chat-input} itself (placeholder "Ask anything"), and right-aligned {component.chat-input-mic-btn} (microphone, muted color, circular) + {component.chat-input-action-btn} (solid black circle with waveform/icon). Below the input, {component.footer} text appears in {typography.caption} and {colors.muted}.

Sidebar Layout

┌────────────┐
│ [◉]        │  ← Logo/icon (top)
│            │
│ ✏ New chat│  ← {component.sidebar-item} or {component.sidebar-item-active}
│ 🖼 Images  │     (New chat appears active/highlighted)
│   UPDATED  │     {component.badge-updated} badge
│ ⚡ Plugins │
│ 📡 Deep    │
│   research │
│            │
│ ────────── │  ← {component.hairline} divider
│            │
│ 💎 See     │
│   plans... │  ← With external-link arrow (→)
│ ⚙ Settings │
│ ❓ Help    │     With arrow (→)
│            │
│ ────────── │
│ Get responses│
│ tailored to you│
│             │  ← {component.sidebar-footer-text}
│ Log in     │  ← {component.sidebar-login-button} (pill outline)
└────────────┘
  ↑ 260px wide

The sidebar ({component.sidebar}) is fixed-left, {spacing.sidebar-width} (260px) wide, with {colors.canvas} background. Items use {component.sidebar-item} styling: {typography.body-md}, 6px vertical × 10px horizontal padding, {rounded.md} corners. Active items receive {colors.surface-soft} background. Section dividers are invisible or {colors.hairline}. The bottom zone contains promotional copy in {colors.muted} and a pill-shaped login CTA.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, {colors.canvas} or transparent background | Top nav, sidebar background, hero band | | 1 – Surface | {colors.surface} (white), no shadow or {extensions.shadows.none} | Sidebar items, buttons at rest | | 2 – Elevated | {extensions.shadows.sm} – multi-layer: 1px border at 4% opacity, 2px blur at 4%, 80px spread at 2.4% | Chat input container, dropdowns, modals | | 3 – Focus ring | Blue-tinted shadow (detected as rgb(31, 78, 148) base) | Input focus states, keyboard navigation | | 4 – Glow | {extensions.shadows.input-glow} – white 8px spread creating a halo | Decorative glow behind input (subtle depth cue) |

The elevation philosophy is nearly flat. ChatGPT avoids the "stacked paper" metaphor common in enterprise tools. The only element that floats noticeably above the canvas is the chat input container—and even then, the shadow is so subtle (4% opacity at its strongest layer) that it registers as a "presence" rather than a "layer."

Color-block separation replaces shadow-based depth in most cases: the sidebar is distinguished from the main area by implicit position (left rail) rather than drop shadow. Buttons use background color changes (transparent → {colors.surface-soft}) rather than lifts to communicate hover.

If there's a "decorative depth" technique here, it's the white glow ({extensions.shadows.input-glow}) detected behind the input—an 8px white blur that creates a subtle halo, making the input appear to emit light onto the canvas. This is the single theatrical moment in an otherwise restrained z-space.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Small internal elements, icon button inner hits | | {rounded.DEFAULT} | 8px | Standard icon buttons, small containers | | {rounded.md} | 10px | Most common radius—sidebar items, ghost buttons, hover states, input inner | | {rounded.lg} | 12px | Cards, panels (inferred) | | {rounded.xl} | 16px | Chat input outer container | | {rounded['2xl']} | 20px | Skip-to-content button, large pills | | {rounded.pill} / {rounded.full} | 9999px | Primary CTAs, circular icon buttons |

The shape vocabulary clusters tightly around 10px (the mode of the extracted radii, appearing 11 times). This is the "comfortable roundness"—softer than a sharp corner, less playful than a full pill. The jump to 9999px (pill/full) is reserved for elements that need to read as "button" or "avatar" at a glance: the Log in CTA, Sign up outline, and the microphone/send circles inside the input.

Photography Geometry

No photography is present in the logged-out home view. The interface is entirely typographic + iconographic. If imagery were introduced (e.g., in a marketing landing page or onboarding flow), the shape language suggests it would use {rounded.lg} (16px) or {rounded.xl} (16–20px) corners for content images, maintaining the soft, approachable aesthetic.

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-hover}, {component.chat-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The committed action button. Filled with {colors.primary} (near-black), white {colors.on-primary} text, {typography.button} (14px/500), {rounded.pill} shape, 8px 16px padding. Used for "Log in" in the top nav and sidebar. On hover, transitions to {component.button-primary-hover} with {colors.primary-hover}. No visible border; relies on background-color contrast alone.

{component.button-secondary} — The outlined/ghost alternative. Transparent background, {colors.ink} text, identical typography and rounding to primary. Used for "Sign up for free" in the top nav. Hover state ({component.button-secondary-hover}) reveals {colors.surface-soft} background. May carry a 1px {colors.hairline} border in some implementations (not visible in this view).

{component.button-ghost} — Tertiary action for navigation items. Transparent background, {colors.ink} text, {typography.button-sm} (13px/500), {rounded.md} (10px), 6px 10px padding. Used for sidebar navigation labels and utility links. Hover ({component.button-ghost-hover}) applies {colors.surface-soft} background. This is the highest-frequency button variant in the sidebar.

{component.button-icon} — Square icon-only button. Transparent, {colors.ink} icon color, 36×36px size, {rounded.DEFAULT} (8px). Used for top-nav search and menu toggle buttons. Hover ({component.button-icon-hover}) shows {colors.surface-soft} background. Contains an SVG icon (search magnifier, hamburger menu) centered within the hit area.

{component.button-icon-muted} — Disabled/de-emphasized icon button. Identical dimensions to {component.button-icon} but {colors.muted} text/color. Used for secondary utility icons that are available but not primary.

{component.button-icon-circle-solid} — High-contrast circular action button. {colors.surface-dark} (near-black) background, white {colors.on-dark} icon, 32×32px, {rounded.full}. Used for the send/action button inside the chat input (right side, showing a waveform/audio icon). This is the visually heaviest micro-component in the interface.

Cards & Containers

{component.top-nav} — The global header. {colors.canvas} background, {spacing.nav-height} (56px) fixed height, full viewport width. Contains the logo, model selector ("ChatGPT ▼"), search/view icons (left-center), and auth buttons (right). No visible border-bottom; separation from content is implied by layout position.

{component.sidebar} — Fixed-left navigation rail. {colors.canvas} background, {spacing.sidebar-width} (260px) wide, full viewport height. Contains grouped navigation items (New chat, Images, Plugins, Deep research), utility links (Plans, Settings, Help), and a promotional/login footer. Items are vertically stacked with {spacing.md} (6px) gaps between them.

{component.sidebar-item} — Individual sidebar navigation row. Transparent background, {typography.body-md} (14px/600) in {colors.ink}, {rounded.md} (10px), 6px 10px padding. Includes an SVG icon (16–20px) to the left of the label text, with 6px gap between icon and text. Active variant ({component.sidebar-item-active}) applies {colors.surface-soft} background. Hover variant ({component.sidebar-item-hover}) matches active state.

{component.sidebar-divider} — Visual separator between sidebar sections. Typically transparent or a 1px {colors.hairline} line. May contain optional section label text in {typography.caption} / {colors.muted}.

{component.sidebar-footer-text} — Promotional copy in the sidebar lower zone. {colors.muted} text, {typography.body-sm} (13px/400), describing the benefit of logging in. Precedes the sidebar login button.

{component.sidebar-login-button} — Pill-shaped login CTA in the sidebar footer. Transparent background with potential border, {typography.button} styling, {rounded.pill}. Mirrors the top-nav primary button but in secondary/outline treatment for hierarchy balance.

{component.hero-band} — The central content area. {colors.canvas} background, {spacing.section} (48px) vertical padding, center-aligned content. Contains the headline, input, and footer text. Max-width is implicitly constrained by the 1150px parent container.

{component.hero-headline} — The welcome question. Uses {typography.display-lg} (24px/400), {colors.ink} text. Centered horizontally. No additional decoration—pure type.

{component.chat-input-container} — The outer shell of the main input. {colors.surface} (white) background, {rounded.xl} (16px), 4px 4px 4px 12px asymmetric padding (extra left padding for the plus button). Carries {extensions.shadows.sm} elevation. Contains the plus button, text input, and right-side icon buttons in a flex row with align-items: center.

{component.footer} — Legal/attribution text below the input. {colors.canvas} background, {colors.muted} text, {typography.caption} (12px/400), center-aligned. Contains the "ChatGPT is AI..." disclaimer with inline {component.footer-link} elements for Terms and Privacy Policy.

Inputs & Forms

{component.chat-input} — The primary text input. Transparent background (inherits white from parent), {typography.body-lg} (16px/400), {colors.ink} text, {colors.muted} placeholder. No visible border; focus state ({component.chat-input-focus}) likely triggers a shadow or ring change. Height accommodates single-line entry with 10px 8px internal padding. Placeholder reads "Ask anything".

{component.chat-input-plus-btn} — Attachment/addition button inside the input (left side). Transparent background, {colors.ink} icon (plus symbol), 28×28px size, {rounded.sm} (6px). Hover likely shows {colors.surface-soft} background.

{component.chat-input-mic-btn} — Voice input button (right side, first). Transparent background, {colors.muted} icon (microphone), 32×32px, {rounded.full} (circular). The muted color indicates it's secondary to the adjacent action button.

{component.chat-input-action-btn} — Primary action button (right side, second). {colors.surface-dark} background, white icon (waveform or send symbol), 32×32px, {rounded.full}. This is the visual anchor of the input's right edge—heaviest weight, highest contrast.

Navigation

{component.top-nav-search-btn} — Search trigger in the header. {component.button-icon} variant. Magnifying glass SVG icon.

{component.top-nav-menu-btn} — View/layout toggle in the header. {component.button-icon} variant. Rectangle/grid SVG icon.

{component.badge-updated} — Status badge appended to sidebar items. {colors.surface-soft} background, {colors.muted} text ("UPDATED"), {typography.caption}, {rounded.pill} shape, 2px 8px padding. Appears inline-right of the "Images" sidebar item.

{component.skip-to-content} — Accessibility skip link. Fixed-position at top, {typography.body-lg}, {rounded['2xl']} (20px), 8px 16px padding. Visible on keyboard focus; hidden otherwise.

{component.footer-link} — Inline link within footer text. {colors.link} (matches ink), {typography.caption}, underline decoration. Used for "Terms", "Privacy Policy", "Learn more".

Do's and Don'ts

Do

• Do use {colors.primary} (#010000) only for committed actions—the "Log in" filled button and solid circular action buttons. Reserve it for moments where the user makes a decision.
• Do apply {rounded.pill} to all primary CTAs ({component.button-primary}, {component.sidebar-login-button}) and circular icon buttons ({component.button-icon-circle-solid}). This creates immediate visual recognition of "actionable" elements.
• Do keep headline weight at 400 ({typography.display-lg}) rather than bumping to 600 or 700. The system's voice is conversational, not declarative—let size carry emphasis.
• Do use {colors.muted} (#8f8f8f) for all secondary text—footers, timestamps, disabled icons, helper copy. Avoid introducing new gray values; this token covers the entire secondary spectrum.
• Do give the chat input container ({component.chat-input-container}) {rounded.xl} (16px) corners and {colors.surface} (white) background. It should be the single most prominent surface element in the hero area.
• Do maintain {spacing.md} (6px) padding on sidebar items ({component.sidebar-item}). This tight-but-comfortable spacing supports scanning long navigation lists.
• Do use {colors.surface-soft} (5% black) for all hover/active backgrounds on sidebar items and ghost buttons. Avoid introducing new background colors—opacity on black is the sole mechanism.
• Do keep transitions at 150ms with cubic-bezier(0.4, 0, 0.2, 1). The interface should feel instant; longer durations would slow the perceived responsiveness of an AI chat tool.
• Do center-align the hero content—headline, input, and footer—within the {component.hero-band}. Asymmetry here would undermine the "conversation partner" positioning.
• Do use {typography.body-md} (14px/600) for sidebar navigation labels. The 600 weight provides enough distinction from body copy without needing larger size.

Don't

• Don't use {colors.primary} for text, borders, or decorative elements. Its only legitimate home is filled button backgrounds and solid icon button circles.
• Don't introduce bold (700) weight anywhere in the interface. The system caps at 600 ({typography.title-md}, {typography.body-md}). If something needs more emphasis, increase size or switch to {colors.ink} from {colors.muted}.
• Don't add visible shadows to the sidebar, top nav, or hero band. These surfaces are flat (elevation level 0). Only the chat input container and modal/dropdown surfaces receive {extensions.shadows.sm}.
• Don't use rounded corners smaller than {rounded.sm} (6px) on interactive elements. Even the smallest buttons sit at 6–8px; sharper corners would read as foreign.
• Don't expand the radius vocabulary beyond the defined tokens. If you need something between {rounded.md} (10px) and {rounded.xl} (16px), use {rounded.lg} (12px)—don't invent 11px or 14px.
• Don't place the chat input left-aligned or constrain its width below 600px in desktop view. The expansive, centered input is a signature moment of this design.
• Don't use colors outside the defined palette for status indicators. Map error/warning/info to {colors.error}, a yellow-orange (to be added), and {colors.info} respectively.
• Don't add gradient backgrounds, patterns, or illustrations to the hero area. The {colors.canvas} background is intentionally plain—visual noise would distract from the conversation-starting prompt.
• Don't make the sidebar wider than 260px ({spacing.sidebar-width}) or narrower than 200px on desktop. This width balances label readability with content-area real estate.
• Don't forget that {colors.body} and {colors.ink} are currently identical (#0d0d0d) in light mode, but they serve different semantic roles. Reference {colors.body} for prose, {colors.ink} for UI labels—they may diverge in dark mode.

Motion & Animation

Transition Tokens

--transition-fast: opacity 0.001s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), fill 0.15s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: opacity 0.15s linear;
--transition-slower: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--theme-transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), outline-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), fill 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-all: all;

The --transition-base token (150ms) is the workhorse, covering color, background, border, and fill changes. The --theme-transition (200ms) variant handles light/dark mode shifts. Notably, --transition-fast (essentially 0ms) is used for opacity toggles that must feel instantaneous (dropdown appearances, tooltip shows).

Keyframe Animations

• peek-top-animation — Slides a panel down from the top of the viewport (likely for notification banners or update toasts).
• peek-top-end-animation — Reverses the peek animation, sliding the panel back up.
• mask-shimmer-offset-move — Creates a sweeping highlight effect across loading skeleton placeholders.
• blink — Text cursor blinking for the input field caret.
• show — Simple fade-in from opacity 0 to 1.
• add-top-shadow / add-bottom-shadow — Animates shadow appearance on scroll-fixed elements (header gaining shadow when page scrolls).
• shimmer-skeleton — Loading state shimmer for content placeholders.
• pulse-dot — Pulsing indicator for "AI is typing" or recording status.
• float-sidebar-in / float-sidebar-out — Slide-and-fade entrance/exit for the sidebar panel.
• pulseSize — Subtle scale pulse for attention-grabbing elements.
• toast-open / toast-close — Toast notification enter/exit with slide and fade.
• icon-shimmer — Metallic sweep effect across icons (possibly for premium/badge highlights).
• loading-results-shimmer — Shimmer effect specifically for AI response streaming placeholders.
• scalePulse — Scale-based pulse (larger than pulseSize).
• diagonalSweep — Diagonal wipe transition.
• loading-shimmer — Generic loading shimmer variant.
• rotateShine — Rotating gleam effect (possibly for sparkles or magic-wand moments).

Interaction Patterns

• Hover background reveal: Sidebar items, ghost buttons, and icon buttons transition from transparent to {colors.surface-soft} over 150ms. No y-axis translation or scale—pure color fade.
• Focus ring expansion: Inputs gain a subtle shadow/ring on focus (detected as rgb(31, 78, 148) base in one shadow declaration), expanding outward with the base timing curve.
• Sidebar slide-in: The sidebar animates in from the left edge (float-sidebar-in) with transform + opacity, taking approximately 200–250ms.
• Scroll-triggered header shadow: When the user scrolls past the initial viewport, the top nav gains {extensions.shadows.sm} via add-top-shadow keyframe—creating a subtle elevation cue.
• Skeleton loading shimmer: During AI response generation, placeholder blocks show a diagonal light sweep (shimmer-skeleton, loading-results-shimmer) at 1.5–2s loop duration.
• Toast notifications: Slide in from bottom or top (toast-open) with 200–300ms ease-out, auto-dismiss after ~3s with reverse animation (toast-close).
• Input cursor blink: Standard blink keyframe at 1s interval (50% duty cycle) for the text insertion point.
• Button press scale: While not explicitly in keyframes, the 150ms transition on all suggests buttons may implement a subtle transform: scale(0.97) on active/pressed state.

Imagery Style

• No photography present in the logged-out home view. The interface is purely typographic and iconographic.
• Illustration style (inferred from brand materials): When illustrations appear (on marketing pages, onboarding, empty states), they use flat, minimal vector art with {colors.ink} strokes on {colors.canvas} or light tints of {colors.muted}. No gradients, no textures, no photorealism.
• Icon style: Stroke-based, 1.5–2px weight, geometric construction, monoline (uniform stroke width). Icons use currentColor to inherit text color. Size range: 16px (inline/small), 20px (standard sidebar), 24px (hero/featured).
• Avatar/profile imagery: Would use {rounded.full} (circle) based on the circular icon button pattern. Not observed in this view.
• Product screenshots/demos: When shown (pricing page, feature overviews), likely use {rounded.lg} (16px) or {rounded.xl} (16–20px) corners with {extensions.shadows.sm} elevation, matching the input container's treatment.
• Color treatment of imagery: Any imagery would be displayed without heavy filters—no duotone, no grayscale, no tint overlays. The aesthetic is "show it plainly."

Icon System

• Library: Custom SVG icons (the Circle font detected in @font-face is an embedded icon font, but primary UI icons appear as inline SVGs or via the Circle font glyph mapping).
• Specific icons observed:
  • OpenAI spiral/logo mark (top-left, sidebar top)
  • Magnifying glass (search, top-nav)
  • Rectangle/grid (view toggle, top-nav)
  • Plus/Add (chat input left button)
  • Pencil/Edit (New chat sidebar item)
  • Image/Picture (Images sidebar item)
  • Puzzle piece (Plugins sidebar item)
  • Microphone/Signal (Deep research sidebar item)
  • Gem/Diamond (See plans and pricing)
  • Gear (Settings)
  • Question mark circle (Help)
  • Chevron down (ChatGPT model selector)
  • Arrow up-right external link (plans/help arrows)
  • Microphone (voice input, inside chat input)
  • Waveform/Audio bars (action button, inside chat input)
• Treatment: Stroke-based, currentColor inheritance, 1.5–2px stroke weight. Icons align vertically with adjacent text (baseline alignment for sidebar items, center alignment for standalone buttons).
• Size mapping: Sidebar icons = 18–20px, top-nav icons = 20px, input-internal icons = 16–20px, action button icon = 16–18px.
• The Circle font (embedded via base64) likely contains optimized versions of these icons for faster rendering and smaller bundle size than inline SVGs.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — ChatGPT uses React with SSR/SSG patterns
- Styling:        Tailwind CSS v3.4+ (detected via class naming conventions: `rounded-2xl`, `px-4`, `text-base`, `transition-colors`)
- Fonts:          System font stack (native); OpenAI Sans from cdn.openai.com for brand moments
- Animation:      Tailwind's built-in transition utilities + CSS keyframes for complex sequences (shimmer, toast)
- Icons:          Custom SVG set + embedded Circle font for optimized icon delivery
- Component lib:  Custom components (no shadcn/Radix detected — this is a fully proprietary component system)
- State:          React Context or lightweight state management for theme/auth state

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Sidebar collapses to hamburger menu; input width = 100% minus 32px gutters; hero padding reduces to 24px | | Tablet | 640–1024px | Sidebar may persist as overlay or narrow rail (~200px); input constrained to ~560px | | Desktop | 1024–1280px | Full sidebar (260px) visible; input at ~640–680px; max content 1150px | | Wide | > 1280px | Content centers within 1150px max; extra horizontal canvas space |

Touch Targets

• {component.button-primary}: ~40–44px height (8px padding × 2 + 14px font + line-height) — meets WCAG AAA minimum.
• {component.button-icon}: 36×36px — slightly below 44px AAA ideal but acceptable for secondary actions; touch devices may expand to 44px via touch:h-10 touch:w-10 classes (detected in DOM).
• {component.button-icon-circle-solid}: 32×32px — below ideal; likely expands on touch via the detected touch: prefix utilities.
• {component.chat-input}: ~44–48px total height — excellent touch target.
• {component.sidebar-item}: ~32px height (6px padding × 2 + 14px font + 20px line-height) — below 44px; may expand to 44px on mobile via touch-specific classes.

Collapsing Strategy

• Navigation: At mobile widths, the 260px sidebar disappears (or becomes a slide-over drawer triggered by the hamburger {component.top-nav-menu-btn}). The float-sidebar-in/float-sidebar-out animations suggest a drawer pattern.
• Hero columns: The hero is already single-column; on mobile it simply loses horizontal padding (from ~100px sides to ~16px sides) and the input stretches full-width minus gutters.
• Top nav: The "ChatGPT ▼" model selector may collapse to just the icon or hide entirely on mobile. Auth buttons may reduce to icon-only (person icon for login).
• Input field: Maintains its internal layout (plus | text | mic | action) but compresses horizontally. The 12px left padding may reduce to 8px.
• Footer text: Remains center-aligned but may reduce in font size by 1–2px or wrap to multiple lines.

Image Behavior

No responsive imagery behavior can be extracted from this text-heavy view. However, based on the system's patterns:

• Hero illustrations (if added): Would scale from 100% width on mobile to ~50–60% width on desktop, potentially flipping from above-headline to beside-headline position.
• Avatars: Would remain circular ({rounded.full}) at 32–40px across all breakpoints.
• Demo screenshots: Would use max-width: 100%; height: auto; with {rounded.xl} corners maintained.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS. ChatGPT's class naming (text-token-text-primary, bg-token-surface-hover, rounded-2xl) strongly suggests Tailwind with custom theme tokens. Set up tailwind.config.js with the tokens defined in this DESIGN.md's frontmatter.

2. Map every frontmatter token to Tailwind's theme extension. Colors go to theme.colors, typography to theme.fontFamily/theme.fontSize/theme.fontWeight/theme.lineHeight, spacing to theme.spacing, borderRadius to theme.borderRadius. Never hard-code a hex or px value that has a corresponding token.

3. Build the layout skeleton first: Fixed top nav ({component.top-nav} at 56px height), fixed left sidebar ({component.sidebar} at 260px width), and fluid center content area (max-width 1150px). Use CSS Grid or Flexbox for the three-zone layout.

4. Implement components in dependency order: Start with atoms ({component.button-icon}, {component.button-primary}), then molecules ({component.chat-input-container} wrapping {component.chat-input} + icon buttons), then organisms ({component.sidebar} populated with {component.sidebar-item} instances, {component.hero-band} containing headline + input + footer).

5. Add state variants as separate component entries. Following the frontmatter pattern, {component.button-primary-hover} is a distinct style object, not a nested &:hover pseudo-class (though your implementation will map it to &:hover). This keeps the spec flat and linter-friendly.

6. Apply motion last. Add the --transition-base token (150ms cubic-bezier) to all interactive elements' transition property. Implement float-sidebar-in/float-sidebar-out for the sidebar drawer. Add shimmer-skeleton for any loading states you build.

7. Use the system font stack as default. Import OpenAI Sans from https://cdn.openai.com/common/fonts/openai-sans/v4/OpenAISans-Regular.woff2 (and other weights) only for brand-marketing surfaces. The interface itself runs on -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto.

8. Test contrast ratios. {colors.ink} (#0d0d0d) on {colors.canvas} (#fcfcfc) yields ~16.5:1 (AAA+). {colors.primary} (#010000) with {colors.on-primary} (#ffffff) is ~21:1 (AAA+). {colors.muted} (#8f8f8f) on {colors.canvas} is ~3.2:1 (AA for large text, fail for small—acceptable for caption/footer use).

9. Run npx @google/design.md lint DESIGN.md after any edits. Watch for broken-ref (token references that don't resolve), contrast-ratio (accessibility issues), and orphaned-tokens (tokens defined but never used in components).

10. When adding new components, decide which sub-system they belong to. ChatGPT has at least two dialects: sidebar (dense, label-driven, 10px radius, 600-weight 14px type) and hero/input (airy, centered, 16px radius, 400-weight 24px headline). A new component should inherit the dialect of its container.

Font Setup

For local development without access to cdn.openai.com:

/* In globals.css or tailwind.config.js extend.fontFamily */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Inter", var(--font-sans);
}

/* Apply to body */
body {
  font-family: var(--font-sans);
}

/* Apply to brand/marketing headings */
h1, h2, .brand-heading {
  font-family: var(--font-brand);
}

Known Gaps

• Hover state styling: Per the no-hover policy, hover backgrounds are inferred from CSS class names (hover:bg-token-surface-hover) but not visually verified. The {component.*-hover} variants in frontmatter represent best-effort extraction.
• Dark mode tokens: The extensions.mode is "light". Dark mode color mappings (canvas → ~#1a1a1a, ink → #ececec, etc.) are not extractable from this screenshot and would require a separate dark-mode capture.
• Loading/skeleton states: While shimmer-skeleton and loading-results-shimmer keyframes exist, the visual appearance of skeleton placeholder blocks (border-radius, color, height) is not captured.
• Form validation states: Error ({colors.error}) and success ({colors.success}) tokens are defined but no validated form fields were visible. Red border treatments, error message typography, and iconography are inferred.
• Authenticated/dashboard surfaces: This spec captures the logged-out home state only. Chat bubbles, code blocks, file attachments, canvas/whiteboard views, and settings panels are not represented.
• Dropdown/menu components: The "ChatGPT ▼" model selector implies a dropdown, but its contents, positioning, and styling are not visible. Same for any account menus.
• Keyboard navigation focus rings: A shadow with rgb(31, 78, 148) base was detected once, suggesting a blue focus ring, but its exact radius, offset, and spread are unclear.
• The oklab() color values: Two background colors used oklab() notation (a perceptual color space). These have been interpreted as near-white and near-black for the token system, but precise sRGB equivalents may vary slightly.
• Responsive breakpoint values: Exact pixel breakpoints (640, 1024, etc.) are industry-standard inferences. ChatGPT's actual media query breakpoints may differ.
• Internationalization (i18n) impact: The type scale assumes Latin-script proportions. CJK or Arabic script may require adjusted line heights or font-size modifiers not captured here.