---
version: alpha
name: OpenAI
description: Research lab notebook at noon.
colors:
  on-surface-variant: "#666666"
  on-surface: "#000000"
  surface: "#ffffff"
  outline: "#0000001f"
  primary: "#000000"
  smoke: "#8f8f8f"
  ash: "#f1f1f1"
  whisper: "#0000000a"
typography:
  caption:
    fontFamily: OpenAI Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.51
    letterSpacing: -0.13px
  input:
    fontFamily: OpenAI Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  body-lg:
    fontFamily: OpenAI Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: -0.18px
  subheading:
    fontFamily: OpenAI Sans
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.26
    letterSpacing: -0.22px
  heading:
    fontFamily: OpenAI Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0.31px
  display:
    fontFamily: OpenAI Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -1.44px
rounded:
  tags: 9999px
  cards: 6px
  links: 4px
  inputs: 9999px
  buttons: 9999px
spacing:
  "4": 4px
  "8": 8px
  "12": 12px
  "16": 16px
  "20": 20px
  "24": 24px
  "32": 32px
  "40": 40px
  "52": 52px
  "64": 64px
  "80": 80px
  "120": 120px
---
# OpenAI — Style Reference
> Research lab notebook at noon.

**Theme:** light

OpenAI's interface operates as a typographic, editorial canvas — pure white surfaces, near-black type, and almost no chromatic identity. The system is defined by restraint: the only filled element on the page is the black 'Try ChatGPT' button, which functions as a single period at the end of an otherwise monochrome sentence. Hairline borders at 12% black opacity create structure without weight; cards carry a barely-perceptible 6px radius that whispers geometry rather than announcing it. Typography does the heavy lifting: a custom sans (OpenAI Sans) set at a Major Second scale with progressively tighter tracking — -0.03em at display, normal at body — gives headlines a compressed, almost newsprint authority. Components feel deliberately lightweight: pill-shaped controls, ghost buttons, transparent surfaces, and minimal elevation. The visual mood is 'research lab notebook' — quiet, confident, and trusting the reader to focus on content rather than chrome.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Primary text, filled action button (Try ChatGPT), strongest interactive emphasis — the single period of chromatic punctuation in an otherwise achromatic system |
| Graphite | `#666666` | `--color-graphite` | Muted captions, helper text, de-emphasized UI labels, and placeholder copy inside the prompt input |
| Smoke | `#8f8f8f` | `--color-smoke` | Tertiary text, disabled states, icon strokes — the dimmest readable voice |
| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, input fills — the infinite background that lets type and imagery carry all weight |
| Ash | `#f1f1f1` | `--color-ash` | Subtle surface elevation, the 'Log in' pill fill, hover states, language selector background — a barely-visible plane shift from Paper |
| Hairline | `#0000001f` | `--color-hairline` | All borders, dividers, card outlines, button outlines — structure without weight, defined as a semi-transparent black rather than a gray hex |
| Whisper | `#0000000a` | `--color-whisper` | Interactive surface tint for ghost-button hover and card selection. Do not promote it to a fill color |

## Tokens — Typography

### OpenAI Sans — Primary typeface for all UI text — custom geometric sans with humanist warmth, used at weight 400 for body, 500 for nav/labels/headings, 600 only for the largest headings. Signature: -0.03em tracking at display sizes creates compressed authority; +0.011em at 28px adds subtle breathing for subheads. Font features: 'calt' and 'liga' enable contextual alternates and ligatures. · `--font-openai-sans`
- **Substitute:** Inter, Söhne, or system-ui sans-serif
- **Weights:** 400, 500, 600
- **Sizes:** 13px, 14px, 16px, 17px, 18px, 22px, 28px, 48px
- **Line height:** 1.00–1.65
- **Letter spacing:** -0.03em at 48px, 0.011em at 28px, -0.01em at 22px and below
- **OpenType features:** `'calt' on, 'liga' on`
- **Role:** Primary typeface for all UI text — custom geometric sans with humanist warmth, used at weight 400 for body, 500 for nav/labels/headings, 600 only for the largest headings. Signature: -0.03em tracking at display sizes creates compressed authority; +0.011em at 28px adds subtle breathing for subheads. Font features: 'calt' and 'liga' enable contextual alternates and ligatures.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.51 | -0.13px | `--text-caption` |
| input | 16px | 1.5 | -0.16px | `--text-input` |
| body-lg | 18px | 1.32 | -0.18px | `--text-body-lg` |
| subheading | 22px | 1.26 | -0.22px | `--text-subheading` |
| heading | 28px | 1.21 | 0.31px | `--text-heading` |
| display | 48px | 1.16 | -1.44px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 52 | 52px | `--spacing-52` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 9999px |
| cards | 6px |
| links | 4px |
| inputs | 9999px |
| buttons | 9999px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 32-64px
- **Card padding:** 12px
- **Element gap:** 12-16px

## Components

### Filled Action Button
**Role:** Primary conversion — the only filled button in the system

Solid #000000 background, white text at 14px weight 500, full pill radius (9999px), 8px vertical / 20px horizontal padding. Used sparingly — currently only for 'Try ChatGPT', which carries a small outbound-arrow glyph. This is the system's only chromatic punctuation.

### Log-in Pill Button
**Role:** Secondary account entry point in the nav

Ash (#f1f1f1) fill, #000000 text at 14px weight 500, no border, full pill radius (9999px), with a small chevron. Sits immediately left of the black Try ChatGPT button in the top-right nav cluster — a quiet gray pill against the loud black one.

### Outlined Pill Chip
**Role:** Suggested prompts and category filters

Transparent background, #000000 text at 14px weight 500, 1px solid border at rgba(0,0,0,0.12), full pill radius (9999px), 8px vertical / 20px horizontal padding. The default for suggested-prompt chips like 'Talk with ChatGPT', 'Research', 'API Platform', 'Stories', 'More'.

### Ghost Text Button
**Role:** Lowest-emphasis actions and navigation

No background, no border, #000000 text at 14px weight 500. Used for the main nav items (Research, Products, Business, Developers, Company, Foundation) and breadcrumb-style links. Relies on hover state (Whisper background) for affordance.

### Prompt Input
**Role:** Primary interaction surface — the ChatGPT prompt bar (the hero's entire first screen)

Paper (#ffffff) fill on a large soft-cornered field, #000000 text at 16px weight 400, hairline border at rgba(0,0,0,0.12), a very soft ambient shadow, generous internal padding. Placeholder ('India stock market today') at #666666. A circular Ash-fill submit control with an up-arrow glyph sits bottom-right. No hard focus ring — the cursor carries focus.

### Article Card
**Role:** Content cards in the news/stories grid

Transparent background, 6px border-radius, no shadow, no padding — the card is defined entirely by its image and text block. The 6px radius applies to images, creating softly clipped photographic edges. Text sits directly below or overlaid on the image.

### Featured Article Hero Card
**Role:** Large editorial card — one per grid section

Full-width or two-column span, large photographic header (cosmic 'GPT' wordmark over a planet horizon, etc.), 48px display headline in weight 500 with -0.03em tracking below, metadata at 14px weight 500 in Graphite (#666666). The image does the visual work; type provides editorial gravity.

### Section Header
**Role:** Dividing labels between content zones

Small caps-style labels at 14px weight 500 in Graphite, generous top margin (32-64px), often accompanied by a 'View more' ghost link. Functions as a section anchor without using a colored bar or rule.

### Top Navigation Bar
**Role:** Global site navigation

Paper (#ffffff) background, OpenAI wordmark left, nav items (Research, Products, Business, Developers, Company, Foundation) at 14px weight 500 in #000, a search icon, a Log-in Ash pill and a Try ChatGPT filled black button at far right. Total height ~64px. No border-bottom — separation is whitespace alone.

### Footer
**Role:** Site footer with legal and secondary navigation

Paper background, multi-column layout with link groups at 13-14px weight 500, Graphite text color, generous top padding (64px+). No social icons, no newsletter signup — utilitarian and quiet.

## Do's and Don'ts

### Do
- Use #000000 as the sole filled button color — the 'Try ChatGPT' button is the system's only chromatic punctuation and filling any other button dilutes its signal
- Set all borders to rgba(0,0,0,0.12) rather than a gray hex — the semi-transparent black adapts to the background and maintains consistent visual weight on white and light-gray surfaces
- Apply 9999px radius to all buttons, tags, and inputs — the pill shape is the primary geometric signature and must be consistent across all interactive elements
- Use 6px radius for cards and images — this near-zero radius is a deliberate choice that feels architectural rather than soft; avoid 12px or 16px which would shift the system toward 'friendly SaaS' territory
- Pair the loud black CTA with a quiet Ash (#f1f1f1) secondary pill — the two-pill nav cluster (gray Log in + black Try ChatGPT) is the signature call-to-action rhythm
- Use weight 500 for navigation, labels, and subheads — weight 400 is reserved for body copy and weight 600 only for the largest heading tier
- Trust whitespace over dividers — sections are separated by 32-64px gaps and margin-bottom rather than horizontal rules or background color shifts

### Don't
- Do not introduce accent colors, gradients, or brand hues into the chrome — the interface is deliberately monochromatic; chromatic color appears only inside product screenshots and full-bleed photography, never in buttons, links, or labels
- Do not use heavy box-shadows on cards or content surfaces — the design relies on hairline borders and whitespace; only the prompt input carries a whisper-soft ambient shadow
- Do not use 8px or 12px radius on buttons — the pill (9999px) is a signature; non-pill buttons would break visual continuity with the chip row and prompt input
- Do not use weight 700 or 800 anywhere — the heaviest weight in the system is 600, and only at the largest heading size; heavier weights would feel aggressive against the restrained type
- Do not set body text below 16px — smaller text (13-14px) is reserved for nav, labels, and metadata where compactness is functional
- Do not use colored backgrounds for section breaks — separate sections with whitespace alone; the system has exactly two surface tones (Paper and Ash) and Ash appears only for the Log-in pill and hover/selected states
- Do not add icons inside buttons or text links — the system is text-first; icons appear only in the prompt input, the submit control, and the nav search affordance

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper | `#ffffff` | Base canvas — all content sits directly on this surface |
| 1 | Ash | `#f1f1f1` | Elevated surface for the Log-in pill, language selector, and subtle hover/selected states |
| 2 | Whisper | `#0000000a` | Interactive surface tint for ghost button hover and card selection |

## Elevation

- **Prompt input (resting state):** `rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px`

## Imagery

Photography is high-impact and editorial: large-format cosmic/space imagery (planet horizons, solar flares, star fields) for hero articles — often with a giant white wordmark ('GPT') set directly over the photograph — plus product UI screenshots for business sections, and abstract gradient washes (sunrise oranges, soft purples) for story cards. Images are edge-to-edge within cards with 6px corner radius — no padding insets, no drop shadows. The treatment is cinematic and full-bleed rather than lifestyle or product-shot. Illustrations and 3D renders are absent; photography is the primary visual medium. Icon style is minimal: thin-stroke line icons (search magnifier, up-arrow submit) at monochrome #000, no filled icons, no multi-color iconography.

## Layout

Page model is max-width contained (approximately 1200px) with generous side margins. The hero is a vertically centered prompt interaction on an empty white canvas — the 'What can I help with?' display headline sits above a single large prompt input with a row of suggested-prompt chips beneath, creating a 'command line' feeling that occupies the whole first screen. Below the hero, content flows in an asymmetric editorial grid: a large featured article with full-bleed photography beside a smaller stacked column of secondary cards. Section rhythm is consistent vertical spacing (32-64px gaps) with no background color shifts between sections. Navigation is a minimal top bar — no mega-menu, no sidebar. Overall density is spacious and editorial: one article per visual unit, large type, breathing room between elements. No dense 3+ column card grids; the layout favors 2-column editorial compositions over dashboard-style information density.

## Agent Prompt Guide

## Quick Color Reference
- text primary: #000000
- text secondary: #666666
- text tertiary: #8f8f8f
- background: #ffffff
- surface subtle: #f1f1f1
- border: rgba(0,0,0,0.12)
- primary action: #000000 (filled black CTA — the only chromatic accent)

## Example Component Prompts

1. **Hero Prompt Input**: Center a large prompt input on a #ffffff canvas. Input: #ffffff fill, 1px solid rgba(0,0,0,0.12) border, ~24px radius, whisper-soft ambient shadow, placeholder 'India stock market today' at 16px weight 400 in #666666, and a circular #f1f1f1 submit button with an up-arrow glyph at bottom-right. Above it, a heading 'What can I help with?' at 48px weight 500, #000000, letter-spacing -1.44px. Below, a row of 5 outlined pill chips spaced 8px apart.

2. **Featured Article Card**: Full-bleed photographic header (no border, 6px radius) with an oversized white wordmark set over cosmic imagery, 48px display headline below in #000 weight 500 with -0.03em tracking, metadata line at 14px weight 500 in #666666 reading 'Product · 12 min read'. Card has no background, no shadow, no padding — structure comes from spacing alone.

3. **Outlined Pill Chip**: Transparent background, 1px solid rgba(0,0,0,0.12) border, 9999px radius, 8px/20px padding, text at 14px weight 500 in #000000. Use for suggested prompts, category filters, and quick-action shortcuts.

4. **Nav CTA Cluster**: Two pills at far right of a 64px #ffffff nav bar — a 'Log in' pill on #f1f1f1 fill with #000 text and a chevron, then a 'Try ChatGPT' filled #000000 pill with white text and an outbound-arrow glyph. Both 9999px radius, 14px weight 500, 8px apart.

5. **Top Navigation Bar**: 64px height, #ffffff background, OpenAI wordmark (text-based) at far left at 14px weight 500, nav items (Research, Products, Business, Developers, Company, Foundation) spaced 16px apart at 14px weight 500 in #000, a search icon, and the two-pill CTA cluster at far right. No border-bottom.

## Similar Brands

- **Anthropic** — Same monochromatic editorial approach — black text on white, no accent colors, pill-shaped buttons, and a focus on large-format photography for content cards
- **Vercel** — Identical restraint philosophy — pure black/white palette, hairline borders at low opacity, generous whitespace, and the same anti-decorative flatness
- **Linear** — Similar dark-on-light typographic confidence with custom sans, pill buttons, and 6-8px card radii — though Linear adds subtle gradients OpenAI omits
- **Stripe** — Shared editorial-composition approach: asymmetric article grids, large display headlines, photography as visual anchor, and zero chromatic UI accents
- **xAI / Grok** — Monochrome product interface with a single filled black CTA, pill-shaped controls, and the same 'research lab' typographic authority

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-graphite: #666666;
  --color-smoke: #8f8f8f;
  --color-paper: #ffffff;
  --color-ash: #f1f1f1;
  --color-hairline: #0000001f;
  --color-whisper: #0000000a;

  /* Typography — Font Families */
  --font-openai-sans: 'OpenAI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.51;
  --tracking-caption: -0.13px;
  --text-input: 16px;
  --leading-input: 1.5;
  --tracking-input: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.32;
  --tracking-body-lg: -0.18px;
  --text-subheading: 22px;
  --leading-subheading: 1.26;
  --tracking-subheading: -0.22px;
  --text-heading: 28px;
  --leading-heading: 1.21;
  --tracking-heading: 0.31px;
  --text-display: 48px;
  --leading-display: 1.16;
  --tracking-display: -1.44px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --card-padding: 12px;

  /* Border Radius */
  --radius-links: 4px;
  --radius-cards: 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-ash: #f1f1f1;
  --surface-whisper: #0000000a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-graphite: #666666;
  --color-smoke: #8f8f8f;
  --color-paper: #ffffff;
  --color-ash: #f1f1f1;
  --color-hairline: #0000001f;
  --color-whisper: #0000000a;

  /* Typography */
  --font-openai-sans: 'OpenAI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --text-input: 16px;
  --text-body-lg: 18px;
  --text-subheading: 22px;
  --text-heading: 28px;
  --text-display: 48px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-links: 4px;
  --radius-cards: 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
}
```