--- version: alpha name: "openai.com" description: "Design system extracted from https://openai.com/ on 2026-10-28" colors: background: "#ffffff" surface: "#e0e0e0" surface-2: "#f1f1f1" foreground: "#000000" muted-foreground: "#666666" primary: "#000000" on-primary: "#ffffff" border: "#e0e0e0" typography: headline-display: fontFamily: "OpenAI Sans" fontSize: "48px" fontWeight: 500 lineHeight: "1.4" headline-lg: fontFamily: "OpenAI Sans" fontSize: "13px" fontWeight: 500 lineHeight: "19.68px" headline-md: fontFamily: "OpenAI Sans" fontSize: "24px" fontWeight: 500 lineHeight: "1.4" body-md: fontFamily: "OpenAI Sans" fontSize: "14px" fontWeight: 500 lineHeight: "19.6px" label-md: fontFamily: "OpenAI Sans" fontSize: "16px" fontWeight: 400 lineHeight: "24px" letterSpacing: "-0.16px" button: fontFamily: "OpenAI Sans" fontSize: "13px" fontWeight: 500 lineHeight: "19.68px" rounded: none: "0px" 2xl: "40px" xl: "24px" md: "6px" sm: "4px" full: "9999px" spacing: unit: "8px" 1: "8px" 2: "16px" 3: "24px" 4: "32px" 5: "64px" 6: "120px" components: button-ghost: backgroundColor: "#ffffff" textColor: "#000000" typography: "{typography.button}" rounded: "0px" height: "64px" padding: "0px 16px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "40px" height: "36px" padding: "0px 20px" button-secondary: backgroundColor: "#ffffff" textColor: "#000000" typography: "{typography.button}" rounded: "9999px" height: "40px" padding: "0px 12px" input: backgroundColor: "transparent" rounded: "0px" height: "40px" card: backgroundColor: "#ffffff" rounded: "24px" padding: "16px" --- # openai.com ## Overview OpenAI | Research & Deployment: We believe our research will eventually lead to artificial general intelligence, a system that can solve human-level problems. Soft, well-rounded controls, layered shadows for depth, confident display type at 48px / 500, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 818 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Learn about ChatGPT Busi"), rest - `screenshots/c-button-1--focus.png`: Button 1 ("Learn about ChatGPT Busi"), focus - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-icon-button-1--active.png`: Icon button 1, active - `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled - `screenshots/c-overlay-dialog-1--open.jpg`: Dialog / modal 1 opened by icon-button - `screenshots/c-link-1--rest.png`: Text link 1 ("Introducing GPT-6.1 Terr"), rest - `screenshots/c-link-1--focus.png`: Text link 1 ("Introducing GPT-6.1 Terr"), focus - `screenshots/c-textarea-1--rest.png`: Textarea 1, rest - `screenshots/c-textarea-1--focus.png`: Textarea 1, focus - `screenshots/c-textarea-1--disabled.png`: Textarea 1, disabled - `screenshots/c-textarea-1--filled.png`: Textarea 1, filled - `screenshots/c-label-1--rest.png`: Field label 1 ("Message ChatGPTQuiz me o"), rest - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Research Index"), rest - `screenshots/c-language-switch-1--rest.png`: Language / region switch 1 ("EnglishUnited States"), rest - `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by language-switch "EnglishUnited States" - `screenshots/c-button-2--rest.png`: Button 2 ("View more"), rest - `screenshots/c-button-2--focus.png`: Button 2 ("View more"), focus - `screenshots/c-button-2--active.png`: Button 2 ("View more"), active - `screenshots/c-button-2--disabled.png`: Button 2 ("View more"), disabled - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("Research"), rest - `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("Research"), focus - `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2 ("Log in"), rest - `screenshots/c-overlay-dropdown-menu-3--open.png`: Dropdown menu 3 opened by menu-button "Log in" - `screenshots/c-button-3--rest.png`: Button 3 ("Products"), rest - `screenshots/c-button-3--focus.png`: Button 3 ("Products"), focus ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#e0e0e0` | Cards, panels, raised or recessed surfaces | | surface-2 | `#f1f1f1` | Secondary surface | | foreground | `#000000` | Primary text | | muted-foreground | `#666666` | Secondary text, captions | | primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | border | `#e0e0e0` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#e0e0e0`, `#ffffff`, `#f1f1f1`, `#000000`. The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **OpenAI Sans** for h2, button, body, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | OpenAI Sans | 48px | 500 | 1.4 | normal | | headline-lg | OpenAI Sans | 13px | 500 | 19.68px | normal | | headline-md | OpenAI Sans | 24px | 500 | 1.4 | normal | | body-md | OpenAI Sans | 14px | 500 | 19.6px | normal | | label-md | OpenAI Sans | 16px | 400 | 24px | -0.16px | | button | OpenAI Sans | 13px | 500 | 19.68px | normal | - headline-display: fallback (source h1); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 13px, 14px, 17px, 18px, 22px, 48px. Base body size 14px. See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 64, 120 (px). - Flex and grid gaps: 8, 16, 24, 40 px. - Content max width: 1376px, centred. - Breakpoints: 700px, 767px, 768px, 800px, 1280px. - Header: 0px tall, static, background `rgba(0, 0, 0, 0)`; 8 nav links at 13px / 500 (Skip to main content · Research · Business · Developers · Company · Foundation(opens in a new window) · Try ChatGPT(opens in a new window)). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px` - shadow-2: `rgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px` ## Shapes - Buttons: 40px - Inputs: 0px - Cards and panels: 24px - Images and media: 0px - Radius scale: none 0px, 2xl 40px, xl 24px, md 6px, sm 4px, full 9999px ## Components ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 0px, height 64px, padding 0px 16px, 17px / 400. Sample label: "Products". ### Button, primary Background `#000000`, text `#ffffff`, border none, radius 40px, height 36px, padding 0px 20px, 14px / 500. Sample label: "Try ChatGPT(opens in a n". ### Button, secondary Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border 1px solid #0000001f, radius 9999px, height 40px, padding 0px 12px, 14px / 500, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px`. Sample label: "Learn about ChatGPT Busi". ### Input Height 40px, background `transparent`, border 0px solid #e5e7eb, radius 0px, 14px text, padding 10px 24px. ### Card Background `#ffffff`, border none, radius 24px, padding 16px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px`. Typical size about 768×104px. ### Link Colour `#000000`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (19 of 87 in the checklist, 29 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 17 state changes, 3 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | outline, ghost, ghost lg, ink-icon-right, outline, filled, link-icon-right sm | focus, active, disabled | "Learn about ChatGPT Business" | | Icon button | ghost, filled | focus, active, disabled, open | | | Text link | plain | focus | "Introducing GPT-6.1 TerraProdu" | | Close / dismiss button | ghost | rest only | | | Search field | outlined-icon-left | rest only | | | Textarea | outlined | focus, disabled, filled | | | Field label | other | rest only | "Message ChatGPTQuiz me on voca" | | Navigation link | plain, plain, plain | focus | "Docs(opens in a new window)" | | Menu / dropdown trigger | ghost, filled | open | | | Footer | default | rest only | "ResearchResearch IndexResearch" | | Footer link | plain | rest only | "Research Index" | | Language / region switch | default | open | "EnglishUnited States" | | Avatar | 443px-rounded | rest only | | | Image / figure | aspect-1, aspect-1, aspect-1.78 | rest only | | | Video / media embed | default | rest only | "Your browser does not support " | | Icon | outline-14px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Text input, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Tooltip, Popover, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Hero, Section band, Content container, Sticky bar. ## Dark Mode Both themes exist; the default render is light and the dark theme was reached via prefers-color-scheme. Token pairs, light → dark: | Token | Light | Dark | | --- | --- | --- | | background | `#ffffff` | `#000000` | | surface | `#e0e0e0` | `#1f1f1f` | | foreground | `#000000` | `#ffffff` | | muted-foreground | `#666666` | `#999999` | | primary | `#000000` | `#ffffff` | | on-primary | `#ffffff` | `#111111` | | border | `#e0e0e0` | `#333333` | ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 443px | 32px | 17px | | 0px, hamburger (Research menu), 2 CTA | | 3→1 col; 6→6 col; 2→2 col | content-width | | laptop 1024px | 960px | 32px | 17px | | 0px, hamburger (Research menu), 2 CTA | | 3→1 col; 6→6 col; 2→2 col | content-width | | tablet 768px | 704px | 32px | 17px | | 0px, hamburger (Open mobile navigation), 2 CTA | | 3→3 col; 3→3 col; 3→3 col | 5 full-width | | phone 390px | 342px | 24px | 17px | | 0px, hamburger (Open mobile navigation) | | 3→1 col; 6→1 col; 3→3 col | 6 full-width | - Nav collapses to a hamburger by 390px (first seen at 1440px); header 0px → 0px. - Card grids: 2 columns → 1 column on phones (gap 24px → 24px). - Body text is 17px at the sampled desktop and phone widths. - Phone side gutter 24px. - 6 buttons stretch full-width on phones. ## Interaction & Motion 238 elements carry transitions; typical 0.3s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, transform, translate. No running keyframe animations at rest. - Hover on button-primary ("Log in"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.2s | cubic-bezier(0, 0, 1, 1). - Hover on button-secondary ("Learn about ChatGPT Business"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.25s | cubic-bezier(0, 0, 1, 1). - Hover on nav-link ("Research"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.1s | cubic-bezier(0, 0, 1, 1). - Hover on input: no visible change; cursor text. - Focus on button-primary: outline 1px none rgba(0, 0, 0, 0.486), offset 2px. - Focus on input: outline 1px none rgb(16, 16, 16). - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - Hover/click menus: below the trigger, 0px gap, right edges aligned; transparent, radius 0px, padding 0px 0px, shadow none; 2 items, 32px tall, 14px, padding 0px 16px; fades in (opacity 0.00 at 40ms → 1.00); hides within 400ms of leaving (transition or unmount). - No scroll-reveal: content is visible without scrolling into view. - Portal roots present: portal-root. Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 8px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#000000` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 14px in OpenAI Sans. - Do match corner radii per element class (buttons 40px, cards 24px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.