--- 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 | Role | Value | Source | |------|-------|--------| | Ink and filled button | `#0d0d0d` | gray 1000 in the published set, matches the live shell [Measured] | | Page | `#fcfcfc` | live shell [Measured] | | Soft button | `#f3f3f3` | live shell [Measured] | | Secondary text | `#5d5d5d` | gray 500 in the published set, matches the live shell [Measured] | | Hairlines | black at 5, 10 and 20 percent, `#e8e8e8` | live shell [Measured] | | Info | `#0285ff`, strong `#0169cc` | blue 400, 500 [Measured from the published design system] | | Success, danger, warning | `#00a240`, `#e02e2a`, `#e25507` | green, red and orange 500 [Measured from the published design system] | | Dark page and surface | `#000000`, `#212121` | live shell. The published surface is `#212121` [Measured] | | Dark text | `#ffffff`, `#cdcdcd` | live shell [Measured] | | Dark controls | `#414141`, also at 50 percent | live shell [Measured] | ### Typography | Role | Size | Face and weight | |------|------|-----------------| | Prompt title | 24 on 28 | system 400 [Measured] | | Composer text | 17 on 24 desktop, 16 on 24 mobile | system 400 [Measured] | | Body | 16 on 24 | system 400 [Measured] | | Button | 14 on 20 | system 600, tracking -0.08 [Measured] | | Sidebar row | 14 on 20 | system 400, tracking -0.15 [Measured] | | Legal | 12 on 16 desktop, 11 on 15 mobile | system 400 [Measured] | | Site title | 64 on 64 | OpenAI Sans 500, tracking -1.92 [Measured] | | Site body | 17 on 28 | OpenAI 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.