Design System Inspired by OpenAI

Category: AI & LLM Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.

1. Visual Theme & Atmosphere

OpenAI’s product surface reads like a research lab dressed for the public — clinical, restrained, deliberately quiet. The page background is a true white (#ffffff) layered against a near-black ink (#0d0d0d) with a subtle teal undertone, so even the text feels slightly cooled rather than aggressively dark. The result is a chromatic neutrality that puts model output, code, and prose front and center, not the chrome around them.

The signature move is the use of Söhne (or its system stand-in inter) at restrained weights — 400 for body, 500 for nav and labels, 600 for emphasis — paired with Signifier, a contemporary serif used for editorial display. Where most AI brands lean futuristic, OpenAI’s serif headlines give the product a quietly literary tone, as if every announcement is an essay.

The shape system is uniformly soft: 8px–12px radii, 9999px pills for tags and chips, no harsh corners anywhere. Section transitions are denoted by whitespace rather than dividers; when borders appear they are #e5e5e5 hairlines that read as the absence of color rather than its presence.

Key Characteristics:

• True white canvas (#ffffff) with deep teal-black ink (#0d0d0d)
• Söhne / Inter at modest weights (400, 500, 600) — restraint over assertion
• Signifier serif for editorial display headlines
• Soft 8–12px radii everywhere; 9999px pills for chips
• Hairline borders (#e5e5e5) used sparingly; whitespace as primary divider
• Single-color illustrations in deep teal — no gradients in marks
• Generous line-height (1.55–1.65) and tracking near zero

2. Color Palette & Roles

Primary

• Pure White (#ffffff): Primary background, card surface, button background.
• Ink Black (#0d0d0d): Primary text, brand mark, primary CTA.
• Soft Black (#1a1a1a): Secondary heading, alternative ink for non-critical text.

Surface & Background

• Mist (#fafafa): Section break background, footer surface.
• Pearl (#f5f5f5): Card surface, elevated panel.
• Cloud (#ececec): Disabled background, divider tint.

Brand Accent

• OpenAI Teal (#10a37f): Brand primary, link, highlight badge — the lone color in an otherwise neutral system.
• Teal Deep (#0a7a5e): Hover and pressed state for the brand color.
• Teal Soft (#e8f5f0): Surface tint for success badges, highlight callouts.

Neutrals & Text

• Graphite (#3c3c3c): Body text, default reading color.
• Slate (#6e6e6e): Secondary text, captions, metadata.
• Ash (#9b9b9b): Tertiary text, placeholder, disabled label.
• Stone (#c4c4c4): Decorative dividers, faint icons.

Semantic & Border

• Border Hairline (#e5e5e5): Standard hairline separator.
• Border Soft (#ededed): Card outline on white surface.
• Error (#ef4146): Validation, destructive action.
• Warning (#f5a623): Soft amber for advisory states.
• Info (#2563eb): Informational link tone (used sparingly; teal still wins).

3. Typography Rules

Font Family

• Display / Editorial: Signifier, with fallback: 'Source Serif Pro', Georgia, serif
• Body / UI: Söhne, with fallback: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
• Code / Mono: Söhne Mono, with fallback: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

Hierarchy

Principles

• Restraint as identity: weights cap at 600; 700+ feels off-brand. Hierarchy comes from size and color, not weight.
• Serif for soul, sans for system: Signifier appears only in editorial display moments. The product UI is sans-only.
• Negative tracking on display: -0.02em on display sizes; tracking returns to zero by 16px.

4. Component Stylings

Buttons

Primary

• Background: #0d0d0d
• Text: #ffffff
• Padding: 10px 18px
• Radius: 9999px (full pill) on chips, 12px on rectangular CTAs
• Hover: #1a1a1a background
• Use: Primary CTA, “Try ChatGPT”, “Sign in”

Secondary

• Background: #ffffff
• Text: #0d0d0d
• Border: 1px solid #e5e5e5
• Padding: 10px 18px
• Radius: 12px
• Hover: background #fafafa, border #d4d4d4

Brand Accent

• Background: #10a37f
• Text: #ffffff
• Padding: 10px 18px
• Radius: 12px
• Hover: #0a7a5e
• Use: Highlighted upgrade CTA, success path

Cards

• Background: #ffffff
• Border: 1px solid #ededed
• Radius: 16px
• Padding: 24px–32px
• Shadow: none by default; on hover 0 4px 16px rgba(13,13,13,0.06)

Inputs

• Background: #ffffff
• Border: 1px solid #e5e5e5
• Radius: 12px
• Padding: 12px 14px
• Focus: border #10a37f, ring 0 0 0 3px rgba(16,163,127,0.12)

Pills & Tags

• Background: #f5f5f5
• Text: #3c3c3c
• Padding: 4px 10px
• Radius: 9999px
• Font: 12px / 500

5. Spacing & Layout

• Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: max-width 1200px, 24px gutter on mobile, 48px on desktop.
• Section rhythm: 96–128px vertical between major sections; 64px on mobile.
• Grid: 12-column desktop, 4-column mobile, 24px gap.

6. Motion

• Duration: 150–220ms for hover; 280–360ms for layout transitions.
• Easing: cubic-bezier(0.16, 1, 0.3, 1) (smooth out) for entrances.
• Restraint: no parallax, no scroll-jacking. Subtle fade and translate only.

7. Usage Guardrails

• Preserve the neutral editorial restraint, soft radius, and sparse accent usage together; green accents alone do not create an OpenAI-like surface.
• Use Signifier-style display moments only for editorial or announcement hierarchy, keeping product controls in the sans system.
• Avoid ornamental motion, heavy shadows, and oversized decorative cards; the system should feel calm, readable, and deliberate.