OpenAI

Stack

OpenAI's marketing site (openai.com) is a server-rendered Next.js application delivered via Vercel. Content is managed through Contentful CMS (evident from images.ctfassets.net image URLs). Assets are served as WebP via Contentful's image transformation pipeline with responsive w= query parameters (e.g. w=3840 for retina). No public design-token file or Storybook instance is exposed, so token values below are inferred from visual inspection and published brand guidelines.

Typography

OpenAI uses a custom sans-serif typeface family called Söhne (by Klim Type Foundry), supplemented by Söhne Mono for code snippets and technical content. The fallback stack is system-ui, -apple-system, sans-serif. The type scale is tightly controlled:

• Display / Hero: 56–80px, weight 500 (medium), tracking −0.02em, line-height 1.1
• H1: 40–48px, weight 500, tracking −0.01em, line-height 1.15
• H2: 28–32px, weight 500, tracking −0.01em, line-height 1.2
• H3: 20–24px, weight 500, line-height 1.3
• Body / Large: 18px, weight 400, line-height 1.6
• Body: 16px, weight 400, line-height 1.6
• Caption / Label: 12–14px, weight 400–500, letter-spacing 0–0.02em
• Code: Söhne Mono, 14px, weight 400

Color Philosophy

OpenAI's palette is intentionally minimal and high-contrast. The primary language is black-on-white (light mode) with a fully inverted dark mode as the default hero experience. Accent color usage is restrained — the brand green (#10A37F, the ChatGPT green) appears sparingly for interactive states such as links and CTA buttons. Secondary accent hues (teal, warm orange, pink) appear only in editorial artwork and photography, never in UI chrome. The system supports both light and dark themes.

• Light mode: white background, near-black text, subtle gray borders and dividers
• Dark mode: true black (#000000) background, white text — used prominently for hero sections
• Brand accent: ChatGPT green #10A37F for links, hover states, primary CTAs
• Secondary surface: light gray #F4F4F4 for card backgrounds in light mode
• Muted text: #6E6E80 (gray-500 equivalent) for captions, metadata, and secondary labels

Spacing

OpenAI follows an 8-point spacing grid. Common spacings:

• Base unit: 8px
• Component padding (tight): 8px / 12px
• Component padding (default): 16px / 20px
• Component padding (loose): 24px / 32px
• Section vertical rhythm: 64px / 80px / 96px
• Page max-width: 1280px with auto horizontal margins
• Content column (prose): ~720px max-width for readable measure

Component Defaults

• Buttons (primary): Black fill, white text, border-radius 9999px (pill), padding 12px 24px, font-size 16px weight 500. Hover: slight opacity or dark gray fill.
• Buttons (secondary / outline): Transparent fill, 1px black border, same pill radius. Dark mode: white border, white text.
• Cards: border-radius 12px, 1px border #E5E5E5 in light mode, overflow hidden, subtle box-shadow or none.
• Navigation: Fixed top bar, white/black background matching theme, 64px height, blur backdrop on scroll.
• Links: Underline on hover, color inherits accent green for interactive contexts.
• Images: All editorial images served as 1:1 or 16:9 aspect ratio squares with object-fit cover, corner radius matching card.
• Dividers: 1px solid, color #E5E5E5 light / #2D2D2D dark.
• Code blocks: Söhne Mono, dark background #1A1A1A, no border, border-radius 8px, padding 16px.

Layout

The site uses a 12-column CSS Grid with a 1280px container and 24px gutters. Sections alternate between full-bleed (edge-to-edge background color) and contained content blocks. Card grids use a 3-up or 4-up layout on desktop, collapsing to 1-up on mobile. The hero section on the homepage is full-viewport-height with vertically centered content. Navigation is a standard horizontal top bar on desktop and a slide-in drawer on mobile.