AI Assistants / iOS / Android / Web

ChatGPT

ChatGPT removes almost everything: no brand color, no custom type in the product, just monochrome surfaces so the conversation is the interface.

Download
  • #0D0D0D
  • #FCFCFC
  • #F3F3F3
  • #5D5D5D
  • #212121
  • #0285FF

Color

Every color token in the file, grouped by role.

Brand

  • primary#0D0D0D
  • on primary#FFFFFF
  • secondary#F3F3F3
  • ink secondary#5D5D5D
  • dark ink secondary#CDCDCD

Surfaces

  • canvas#FCFCFC
  • surface#FFFFFF
  • dark canvas#000000
  • dark surface#212121

Text

  • ink#0D0D0D
  • dark ink#FFFFFF

Lines

  • border#E8E8E8

Status

  • info#0285FF
  • success#00A240
  • danger#E02E2A
  • warning#E25507

More

  • dark control#414141

Typography

Each style is set with the file's own family, size, weight and spacing.

  • OpenAI SansOpenAI Sans is private and not available in open fonts. Shown in Geist, the closest open match.
  • ui-sans-serifNot served by an open font library, so it falls back through the file's own stack.
  • display64px / 500 / 64px

    ChatGPT

  • headline24px / 400 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 20px

    Continue to checkout

  • caption12px / 400 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • radius sm6px
  • radius md8px
  • radius lg10px
  • radius xl12px
  • radius 2xl16px
  • radius 4xl24px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • control sm28px
  • control md32px
  • control lg36px
  • control xl40px
  • control 2xl44px
  • control 3xl48px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • button soft
    button-soft
  • sidebar row
    sidebar-row
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 104 lines
version: alpha
name: ChatGPT-design-analysis
description: "An AI assistant drawn almost entirely in monochrome: near-black #0d0d0d on near-white #fcfcfc, the platform's own system font, full pill buttons and a published token set, with color kept for status only."
status: Draft
appVersion: "measured in a browser from chatgpt.com and openai.com, and read from the published Apps SDK UI package 0.2.2 and UI guidelines, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0d0d0d"
  on-primary: "#ffffff"
  canvas: "#fcfcfc"
  surface: "#ffffff"
  secondary: "#f3f3f3"
  ink: "#0d0d0d"
  ink-secondary: "#5d5d5d"
  border: "#e8e8e8"
  info: "#0285ff"
  success: "#00a240"
  danger: "#e02e2a"
  warning: "#e25507"
  dark-canvas: "#000000"
  dark-surface: "#212121"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#cdcdcd"
  dark-control: "#414141"

typography:
  # Font note: "OpenAI Sans" is a private font and is not available in open fonts. Closest open alternative: "Geist".
  display:
    fontFamily: "'OpenAI Sans', sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: -1.92px
  headline:
    fontFamily: "ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
  body:
    fontFamily: "ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: -0.08px
  caption:
    fontFamily: "ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px

rounded:
  radius-sm: 6px
  radius-md: 8px
  radius-lg: 10px
  radius-xl: 12px
  radius-2xl: 16px
  radius-4xl: 24px
  full: 9999px

spacing:
  control-sm: 28px
  control-md: 32px
  control-lg: 36px
  control-xl: 40px
  control-2xl: 44px
  control-3xl: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 44px
    padding: 0 12px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 44px
    padding: 0 12px
  button-soft:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 44px
    padding: 0 16px
  sidebar-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-lg}"
    height: 36px
    padding: 8px 10px

Overview

ChatGPT is OpenAI's AI assistant, on the web and in iOS and Android apps. Logged out, chatgpt.com shows the real product shell with its sidebar and composer, so the web layer here describes the product and not a marketing page. The look is monochrome: near-black on near-white, no brand color, and the platform's own font. [Measured]

What defines the look:

  1. No brand color. The product is near-black #0d0d0d, near-white #fcfcfc and grays. [Measured]
  2. System fonts in the product. The stack starts with the platform's own face. The published guidance says SF Pro on iOS and a sans-serif on Android. [Measured]
  3. Full pills. Buttons use a 999 radius and are 44 high. [Measured]
  4. A strict inversion in dark. The filled button flips to white with #0d0d0d text. [Measured]
  5. Color means status. Blue, green, red and orange exist only as semantic tokens in the published set. [Measured from the published design system]

Source for this file: chatgpt.com logged out, plus the openai.com home, ChatGPT overview and pricing pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. Token names and scales come from OpenAI's published Apps SDK UI package (version 0.2.2) and UI guidelines. These describe apps that run inside ChatGPT, so they are strong evidence for the shell but are not its full specification. See Known Gaps.

Core

Colors

RoleValueSource
Ink and filled button#0d0d0dgray 1000 in the published set, matches the live shell [Measured]
Page#fcfcfclive shell [Measured]
Soft button#f3f3f3live shell [Measured]
Secondary text#5d5d5dgray 500 in the published set, matches the live shell [Measured]
Hairlinesblack at 5, 10 and 20 percent, #e8e8e8live shell [Measured]
Info#0285ff, strong #0169ccblue 400, 500 [Measured from the published design system]
Success, danger, warning#00a240, #e02e2a, #e25507green, red and orange 500 [Measured from the published design system]
Dark page and surface#000000, #212121live shell. The published surface is #212121 [Measured]
Dark text#ffffff, #cdcdcdlive shell [Measured]
Dark controls#414141, also at 50 percentlive shell [Measured]

Typography

RoleSizeFace and weight
Prompt title24 on 28system 400 [Measured]
Composer text17 on 24 desktop, 16 on 24 mobilesystem 400 [Measured]
Body16 on 24system 400 [Measured]
Button14 on 20system 600, tracking -0.08 [Measured]
Sidebar row14 on 20system 400, tracking -0.15 [Measured]
Legal12 on 16 desktop, 11 on 15 mobilesystem 400 [Measured]
Site title64 on 64OpenAI Sans 500, tracking -1.92 [Measured]
Site body17 on 28OpenAI Sans 400 [Measured]

Shape and spacing

Radius tokens are 2, 4, 6, 8, 10, 12, 16, 20 and 24 plus full. [Measured from the published design system] In the live shell: buttons full and sidebar rows 10. Radii of 24 and 28 also appear on elements that were not identified. [Measured] Control heights step 22, 24, 26, 28, 32, 36, 40, 44 and 48. [Measured from the published design system]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark, following the system setting. The published set defines both. [Measured]

Platform: iOS

Items marked from the published design system come from OpenAI's UI guidelines, which address the ChatGPT mobile interface. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Cards inside a conversation carry at most two actions. Brand accents, when an app has them, apply to its primary button only. [Observed from the published design system]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Fullscreen views keep the composer overlaid, and tapping it opens the chat sheet. Picture in picture stays fixed to the top of the display area. [Observed from the published design system]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Layouts are asked to support text resizing without breaking. The system font is SF Pro on iOS. [Observed from the published design system]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share monochrome surfaces, the system font and full pill buttons with the web. [Inferred]

Platform: Android

Items marked from the published design system come from OpenAI's UI guidelines, which address the ChatGPT mobile interface. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Cards inside a conversation carry at most two actions. Brand accents, when an app has them, apply to its primary button only. [Observed from the published design system]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Fullscreen views keep the composer overlaid, and tapping it opens the chat sheet. Picture in picture stays fixed to the top of the display area. [Observed from the published design system]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Layouts are asked to support text resizing without breaking. The system font is a platform sans-serif on Android. [Observed from the published design system]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share monochrome surfaces, the system font and full pill buttons with the web. [Inferred]

Platform: Web

The logged-out product shell at chatgpt.com, and the openai.com pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A left sidebar of 36 high text rows at 10 radius on desktop, collapsing away at the mobile width, where Log in stays in the top bar. [Measured]

Main action

Expected on Web: Page-level button.

A composer centered under a 24px prompt title, with suggestion pills beneath it. Log in is a #0d0d0d pill 44 high with white 14px text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A logged-out prompt card sits in the sidebar with Log in as a soft #f3f3f3 pill. Other dialogs were not measured. [Measured]

Controls

Expected on Web: Native or custom.

Tool chips such as Deep research are 36 high at 10 radius. Sign up is a white pill with a black 20 percent border. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed. The composer drops from 17 to 16 at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 44 high and sidebar rows 36. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The shell loads without an account, and a card says logging in gives answers based on saved chats. Sending a message was not tried. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The shell uses the platform font rather than a brand font, so it looks native on each system. OpenAI Sans appears only on the marketing pages. [Measured]

Cross-platform consistency

Consistent across platforms: monochrome surfaces, the system font and full pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Stay monochrome and let the conversation carry the color.
  • Use the platform's system font in the product.
  • Use full pills for buttons at 44 high.
  • Invert the filled button in dark mode.

Don't

  • Don't add a brand color to the chrome.
  • Don't use custom fonts inside the product, even in fullscreen views.
  • Don't use color outside status.
  • Don't put more than two actions on a card.

Known Gaps

  • A signed-in conversation, its message bubbles and its settings were not measured. Only the logged-out shell was.
  • The published package and guidelines describe apps inside ChatGPT, so applying them to the host app is a judgement. The live shell matched the ink and secondary text values. It did not match the page color in either theme (#fcfcfc against white in light, #000000 against #212121 in dark), and live values are used in those cases.
  • The guidelines give no pixel sizes, touch targets or insets, so those mobile topics stay inferred.
  • The chatgpt.com measurement names a system font first, so the face seen depends on the device. Sizes and weights are still measured.
  • OpenAI Sans is private and is used only on the site. Geist is within 1 percent at 17px. Instrument Sans matched width more closely but its forms are narrower in the round letters.
  • Account deletion and store sign-in rules were not verified.