OpenAI

name OpenAI

colors background: "#ffffff" foreground: "#000000" brand: "#000000" muted: "#737373" border: "#e5e5e5" card: "#ffffff" accent: "#10a37f" # ChatGPT Teal dark: background: "#000000" foreground: "#ffffff" muted: "#a3a3a3" border: "#262626" card: "#0a0a0a" accent: "#10a37f"

typography fontFamily: sans: "OpenAI Sans, Inter, system-ui, sans-serif" weights: light: 300 regular: 400 medium: 500 semibold: 600 bold: 700 scales: h1: { size: "2.5rem", weight: "700", leading: "1.2" } h2: { size: "2rem", weight: "600", leading: "1.3" } body: { size: "1rem", weight: "400", leading: "1.6" }

rounded default: "8px" full: "9999px"

Design System: OpenAI

Overview

The OpenAI design system embodies a dynamic intersection between human-centered warmth and technological precision. It is characterized by minimalistic branding, geometric clarity, and high-impact typography.

Design Philosophy

• Humanity meets Technology: Use of perfect circles (humanity) and right angles (technology).

• Geometric Precision: Every element is crafted with mathematical balance, especially the 'O' in the wordmark.

• Minimalism: Low visual noise, generous open space, and a monochrome-first color palette.

• Approachability: Rounded letterforms and smooth curves in "OpenAI Sans" create a friendly, inclusive tone.

Colors

• Monochrome Foundation: Black and White form the core of the brand, ensuring maximum clarity and versatility.

• Accents: The signature green-teal (#10a37f) is used for ChatGPT-specific products and key interactive states.

• Pastel Palette: Used in secondary materials (research paper covers) to differentiate topics while maintaining a soft, humanistic feel.

Typography

• OpenAI Sans: A bespoke typeface that blends geometric precision with a rounded character. It is the primary voice of the brand.

• Scale: Use varying weights (Light to Bold) to create hierarchy rather than excessive color.

Components

• Wordmark: Must have prescribed clear space; should NOT be used with the Blossom logo.

• Blossom: Represented as an intersection of circles. Should be used with lots of open space.

• Cards: Simple white cards with subtle borders and geometric shadows.

• Buttons: Typically rounded or pill-shaped, reflecting the circular motifs of the brand.

Visual Effects

• Open Space: High emphasis on whitespace to "let the brand breathe."

• Geometric Shadows: Clean, sharp, or subtly blurred shadows that follow geometric forms.

• Gradients: Subtle gradients (like the blue circle graphic) used sparingly to add depth without complexity.