OpenAI

---
version: alpha
name: OpenAI-design-analysis
description: OpenAI's design language is a quiet, editorial AI interface anchored on the signature green `#10a37f` against a near-black `#0d0d0d` canvas and crisp white surfaces. Typography is precise and understated, spacing is generous, and the green appears only in deliberate brand and status moments. The tone is calm, technical, and confident — the interface recedes so the model can speak.

colors:
  primary: "#10a37f"
  primary_dark: "#0f8f6f"
  primary_light: "#19c37d"
  canvas: "#ffffff"
  canvas_dark: "#0d0d0d"
  surface_dark: "#212121"
  surface_dark_2: "#2d2d2d"
  fg_dark: "#ececf1"
  fg_muted_dark: "#8e8ea0"
  fg_default: "#353740"
  fg_muted: "#6e6e80"
  border_default: "#d9d9e3"
  border_dark: "#3a3a3a"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by OpenAI

## 1. Visual Theme & Atmosphere

OpenAI's interface is a study in restraint: a near-black `#0d0d0d` canvas (or crisp white in light mode) with the signature green `#10a37f` as the only accent. The surface recedes so the model's output is the hero. Spacing is generous, type is precise, and there is an editorial, almost literary calm to the whole experience.

## 2. Color System

- **OpenAI green** `#10a37f` — the logo mark, primary buttons, streaming indicator, and status.
- Dark surfaces step through `#0d0d0d`, `#212121`, `#2d2d2d`; text `#ececf1`, muted `#8e8ea0`.
- Light mode mirrors it: `#ffffff` canvas, `#353740` text, `#6e6e80` muted, hairline `#d9d9e3`.
- The green is never diluted with other brand colors — it is a single, precise signal.

## 3. Typography

Söhne (Helvetica Neue fallback) with a clean, sans-serif editorial character. Body 16px/1.6 with comfortable measure; headings are medium-weight and modest. The type is set to read like a document, not a dashboard.

## 4. Components & Shape

Buttons are rounded-rectangle (8px) with the primary filled green; secondary is a subtle outlined or gray state. The chat interface uses message bubbles with minimal chrome. Inputs are large, borderless-but-underlined or softly bordered, with a prominent send affordance. The streaming caret is the iconic micro-interaction.

## 5. Layout & Spacing

A centered single-column layout (max ~768px) with generous vertical rhythm (16-24px). The conversation is the layout; sidebars and settings are tucked away. Whitespace is used to convey confidence and calm.

## 6. Motion

Understated: the streaming response types in, the caret pulses, and buttons shift color on hover. No bounce or slide — motion is quiet, precise, and never competes with reading.