At a glance
24tokens
9type steps
2radius steps
2pxspacing base
ChatGPT, in one page
ChatGPT's iOS app is a master class in deliberate minimalism. The canvas is pure white (#FFFFFF) in light mode or near-black (#212121) in dark — there is almost no chrome, no color, no decoration. The design choice maps directly onto the product: ChatGPT is a conversation with a model, and the UI recedes so the *text itself* is the interface. Open a new chat and the screen is almost empty — a centered compose field at the bottom, a subtle "ChatGPT" model-selector chip at the top-left, and a "New chat" icon top-right. Type a message and everything scrolls upward as the conversation builds, with your messages on the right in soft-gray bubbles and the model's responses inline without a bubble — just plain text flowing down the page like a document.
The 2024 redesign (led in part by the Sam Altman-era direction) pushed even further toward true-black/true-white extremes, stripping out the legacy ChatGPT Green (#10A37F) that was once the accent. Today's palette is almost monochromatic: a deep black #0D0D0D for primary text in light mode, #ECECEC in dark, with a soft gray #F7F7F8 for the user's message bubble background (light) / #2F2F2F (dark). The only color accent is a subtle blue (#2A7FFF) reserved for inline links and the occasional interactive chip. The assistant's response is just flowing prose — markdown-rendered with proper heading sizes, code blocks in a slightly tinted surface, and tables rendered cleanly, but no bubble framing around the text.
The identity-defining moment is the send button — a black circle with a white up-arrow (or white circle with black arrow in dark mode), 32pt diameter, sitting at the right end of the compose field. When the compose field is empty, it's replaced by a row of icons (paperclip for attachments, globe for web search, microphone for voice). When you type, those icons collapse and the send button appears. Press-and-hold the microphone to record voice; release to send as audio or transcription. There's also the unmistakable voice mode — tap the voice icon and the whole screen fades to a full-screen pulsing blue gradient sphere that listens and responds in natural voice.
Typography is Söhne — a proprietary, commercially-licensed face by Klim Type Foundry (the one used on openai.com). On iOS, ChatGPT falls back to Inter for some surfaces and to SF Pro (system) when neither is bundled. Söhne is a neo-grotesque that reads like Helvetica's more sophisticated cousin — crisper, more contemporary, with a touch of humanism. Hierarchy is minimal: chat messages at 16pt weight 400, inline code at 14pt Menlo, and markdown headings rendered at progressively larger sizes (H1 24pt, H2 20pt, H3 17pt). There are no UI headlines because the whole app is a document view.
Key Characteristics:
- Pure white canvas (
#FFFFFF) light / near-black (#212121) dark — minimum UI, maximum content - No color accent — the post-2024 design is monochromatic, with blue (
#2A7FFF) only on inline links - User messages: soft-gray bubble (
#F7F7F8light /#2F2F2Fdark), right-aligned, rounded corners - Assistant messages: NO bubble — plain text flowing inline with markdown rendering (code, tables, LaTeX, lists)
- Circular send button — black-on-white light / white-on-black dark — with up-arrow icon, 32pt
- Voice mode: full-screen pulsing blue gradient sphere — a meditative voice UI moment
- Model selector chip (
GPT-4o,GPT-4,GPT-5) top-left — pill-shaped with leading model icon - Sidebar: conversation history auto-titled, grouped by "Today / Yesterday / Previous 7 Days / Previous 30 Days"
- Compose field icon row: paperclip (attach), globe (web search), microphone (voice), send
- Thumbs up/down feedback icons below each assistant response
- Typing indicator: 3-dot pulse animation
- Söhne (or Inter / SF Pro fallback) — neo-grotesque, 400 / 500 / 600 weights, compact
- Code blocks with syntax highlighting + copy button, language-labeled
Do's and don'ts
Do
- Use pure white (
#FFFFFF) as canvas light / charcoal-black (#212121) dark — NOT true black - Make the send button a circle — black-on-white light, white-on-black dark, 32pt with up-arrow
- Keep the UI monochromatic — no brand accent beyond subtle blue (
#2A7FFF) on links - Give user messages a soft-gray bubble (
#F7F7F8) — assistant messages get NO bubble - Render markdown in assistant responses — code blocks, tables, LaTeX, headings all rendered cleanly
- Use Söhne / Inter / SF Pro in that fallback order
- Use Menlo / SF Mono for inline code chips and code blocks
- Place model selector chip top-left — pill with model name + leading icon + chevron
- Show thumbs up/down + regenerate + copy below every assistant response
- Use asymmetric bubble corners on user messages (18pt / 18pt / 18pt / 4pt — flat pointer corner on right)
- Make voice mode a full-screen pulsing blue gradient sphere — the most distinctive moment
- Auto-generate 3-5 word titles for conversations in the sidebar
- Group sidebar chats by time: "Today / Yesterday / Previous 7 Days / Previous 30 Days / Month Year"
Don't
- Don't use bubbles around assistant responses — plain inline text flow is the rule
- Don't use ChatGPT Green (
#10A37F) — it's been mostly retired; keep the UI monochromatic - Don't make the send button square or rectangular — it's a circle
- Don't use heavy shadows on content — ChatGPT is flat; shadows only on floating ephemeral UI
- Don't render markdown naively — code blocks need syntax highlighting + copy button
- Don't hardcode only SF Pro — fall back gracefully to Söhne > Inter > SF Pro
- Don't make the canvas pure black (
#000) — use#212121on dark - Don't show all sidebar chats as a flat list — group by time
- Don't animate text appearing — stream it character-by-character without motion
- Don't use a generic chat-app avatar placeholder — ChatGPT uses a small sparkle logo or none at all
- Don't omit the 4-icon feedback row (regenerate / copy / 👍 / 👎) — it's the AI-response signature
- Don't add a brand color to the compose field — pure monochrome
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Chatgpt design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Black: #0d0d0d
- White: #ffffff
- Dark Canvas: #212121
- Dark Text Primary: #ececec
- Send Light: #0d0d0d
- Send Dark: #ffffff
- Send Disabled: #cccccc
- User Bubble Light: #f7f7f8
- User Bubble Dark: #2f2f2f
- User Bubble Text: #0d0d0d
Type:
- families: Söhne, Inter, Menlo, SF Mono
- scale: 11, 12, 13, 14, 15, 16, 17, 20, 24
- weights: 400, 500, 600
Shape:
- radius: 4, 8
Spacing: 2, 6, 8, 10, 12, 16
Rules:
- Use pure white (`#FFFFFF`) as canvas light / charcoal-black (`#212121`) dark — NOT true black
- Make the send button a circle — black-on-white light, white-on-black dark, 32pt with up-arrow
- Keep the UI monochromatic — no brand accent beyond subtle blue (`#2A7FFF`) on links
- Give user messages a soft-gray bubble (`#F7F7F8`) — assistant messages get NO bubble
- Render markdown in assistant responses — code blocks, tables, LaTeX, headings all rendered cleanly
- Use Söhne / Inter / SF Pro in that fallback order
Avoid:
- Don't use bubbles around assistant responses — plain inline text flow is the rule
- Don't use ChatGPT Green (`#10A37F`) — it's been mostly retired; keep the UI monochromatic
- Don't make the send button square or rectangular — it's a circle
- Don't use heavy shadows on content — ChatGPT is flat; shadows only on floating ephemeral UI
- Don't render markdown naively — code blocks need syntax highlighting + copy button
- Don't hardcode only SF Pro — fall back gracefully to Söhne > Inter > SF Pro
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Monochromatic)
- Black (
#0D0D0D): Primary text on light mode, pure black feeling but softer than#000. - White (
#FFFFFF): Canvas light / pressed inverse. - Dark Canvas (
#212121): Primary canvas in dark mode — charcoal-black, NOT true black. - Dark Text Primary (
#ECECEC): Body text on dark.
Send Button
- Send Light (
#0D0D0D): Black circle in light mode. - Send Dark (
#FFFFFF): White circle in dark mode. - Send Icon Contrast: Always the inverse of the circle color.
- Send Disabled (
#CCCCCClight /#4D4D4Ddark): When compose is empty.
User Message Bubble
- User Bubble Light (
#F7F7F8): Soft gray, barely distinguishable from canvas. - User Bubble Dark (
#2F2F2F): Mid-dark gray on dark mode. - User Bubble Text (
#0D0D0D/#ECECEC): Same as body text.
Assistant
- Assistant Text (
#0D0D0D/#ECECEC): Same as body text — no bubble, no box. - Assistant Inline Code Bg (
#F0F0F0/#424242): Inlinecodechip background. - Code Block Bg (
#F7F7F8/#1E1E1E): Full code block background. - Code Block Border (
#E5E5E5/#363636): 1pt border.
Canvas & Surfaces (Light)
- Canvas (
#FFFFFF) - Sidebar Bg (
#F9F9F9): Sidebar background — slightly darker than canvas. - Sidebar Active (
#ECECEC): Selected conversation row. - Sidebar Hover (
#F0F0F0) - Divider (
#E5E5E5)
Canvas & Surfaces (Dark)
- Canvas (
#212121) - Sidebar Bg (
#181818): Darker than canvas — signature treatment. - Sidebar Active (
#2F2F2F) - Sidebar Hover (
#252525) - Divider (
#424242)
Text Hierarchy
- Text Primary Light (
#0D0D0D) - Text Secondary Light (
#676767): Placeholder, timestamps, meta - Text Tertiary Light (
#8E8E8E): Disabled, very low-emphasis - Text Primary Dark (
#ECECEC) - Text Secondary Dark (
#B4B4B4) - Text Tertiary Dark (
#707070)
Semantic
- Link Blue (
#2A7FFF): Inline hyperlinks — subtle blue, very minimal usage - Error Red (
#E53E3E): Error toast, "message failed" state - Warning Orange (
#D97706): Content flag warnings, usage limit warnings - Success Green (
#10A37F): Historically ChatGPT's accent — now mostly retired, appears in older UI and the "ChatGPT" wordmark logotype - Voice Mode Sphere (
#3B82F6→#60A5FA→#93C5FD): The voice-mode full-screen pulsing sphere uses a blue gradient that animates organically
Feedback & Interactions
- Regenerate Bg (
#F0F0F0/#363636): Button background behind regenerate / thumbs-up / thumbs-down icons - Copy Button Bg (
#F0F0F0): "Copy" button on code blocks - Stop Button (
#676767→#0D0D0Don press): The "stop generating" button during streaming
Type scaleRead the full spec
Font Family
- Primary (openai.com + app):
Söhne(proprietary by Klim Type Foundry, licensed) — neo-grotesque, crisp, contemporary. Used on openai.com and in-app where licensed. - Fallback (web / some surfaces):
Inter(SIL OFL, by Rasmus Andersson) — close visual substitute - System Fallback (iOS):
-apple-system, SF Pro Text, SF Pro Display— iOS system default - Monospace (code):
Menlo/SF Mono/IBM Plex Mono— all acceptable - Fallback Stack:
"Söhne", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Chat Body (User/Assistant) | Söhne | 16pt | 400 | 1.5 | 0pt | Main message text |
| Chat Body (Compact) | Söhne | 15pt | 400 | 1.45 | 0pt | User setting: "Compact" density |
| Markdown H1 | Söhne | 24pt | 600 | 1.25 | -0.2pt | # heading rendered in assistant message |
| Markdown H2 | Söhne | 20pt | 600 | 1.3 | -0.15pt | ## heading |
| Markdown H3 | Söhne | 17pt | 600 | 1.35 | -0.1pt | ### heading |
| Markdown H4+ | Söhne | 16pt | 600 | 1.4 | 0pt | #### heading |
| Inline Code | Menlo | 14pt | 400 | 1.3 | 0pt | \code\`` — in colored chip |
| Code Block | Menlo | 13pt | 400 | 1.5 | 0pt | Fenced ```` code block |
| Model Selector Chip | Söhne | 14pt | 500 | 1.0 | 0pt | "GPT-4o" at top of chat |
| New Chat Title (auto-generated) | Söhne | 15pt | 500 | 1.3 | 0pt | Sidebar conversation titles |
| Sidebar Section | Söhne | 12pt | 500 | 1.0 | 0.2pt | "Today", "Yesterday", "Previous 7 Days" |
| Button | Söhne | 14pt | 500 | 1.0 | 0pt | Regenerate / Share / Copy |
| Meta (small) | Söhne | 13pt | 400 | 1.2 | 0pt | Timestamps, "Used 2.3k tokens" |
| Compose Placeholder | Söhne | 16pt | 400 | 1.4 | 0pt | "Message ChatGPT..." |
| Tab Label (rarely used) | Söhne | 11pt | 500 | 1.0 | 0.1pt | — |
| Link Text | Söhne | 16pt | 400 | 1.5 | 0pt | Blue #2A7FFF, underlined on hover |
Principles
- Document rhythm, not UI rhythm: typography follows editorial conventions — body paragraphs at 1.5 line-height, markdown headings at progressively larger sizes
- Weight concentrated at 400 / 500 / 600: regular body, medium for chips/buttons, semibold for headings — no bold, no black, no thin
- Söhne / Inter / SF Pro are all acceptable — each renders a slightly different feel; the system should gracefully fall back in order
- Markdown is first-class: the assistant's response is rendered markdown (headings, lists, bold, italic, inline code, code blocks, tables, LaTeX math, links, images) — this is ChatGPT's response content
- Dynamic Type first-class: chat body, markdown headings scale; model chip, sidebar labels, timestamps stay fixed
- Code fonts stay monospace: inline code and code blocks always in Menlo/SF Mono/IBM Plex — never substitute
Components and layoutRead the full spec
Buttons
Send Button The single most recognizable ChatGPT component.
- Shape: Circle, 32pt diameter
- Background:
#0D0D0Dlight /#FFFFFFdark (when enabled with typed text) - Icon: SF Symbol
arrow.uporarrow.up.circle.fill, 16pt, color inverse (#FFFFFFon black light /#0D0D0Don white dark) - Position: right end of compose field
- Enabled when user has typed text; disabled gray
#CCCCCClight /#4D4D4Ddark when empty - Pressed: scale 0.94 + haptic medium
- During generation: replaced by a square "stop" icon in same circle
Voice Button (Microphone)
- Shape: Circle, 32pt diameter (matches send button visual)
- Background: transparent with 1pt
#E5E5E5border / 1pt#424242dark border - Icon: SF Symbol
mic.fillorwaveform, 18pt,#0D0D0Dlight /#ECECECdark - Tap: enters full-screen voice mode
- Long-press: start recording; release to send audio message
Action Icon Row (Compose bar, when empty)
- Horizontal row of icons inside the compose field, appearing when compose is empty (replaces send button until user types)
- Icons (left to right): paperclip (attach), globe (web search toggle), microphone (voice)
- 20pt glyph, 40pt hit area,
#676767/#B4B4B4dark - Pressed: background shift to
#F0F0F0/#2F2F2Fdark (rounded 8pt)
Regenerate / Copy / Thumbs Row (below assistant response)
- Horizontal row of 4 icons: regenerate (arrow.triangle.2.circlepath), copy (doc.on.doc), thumbs-up (hand.thumbsup), thumbs-down (hand.thumbsdown)
- Each 20pt glyph in 32pt circular hit area
- Default:
#676767 - Hover / active: background
#F0F0F0circle appears, icon#0D0D0D - Only visible on hover (desktop) or on tap of the message (mobile)
Model Selector Chip (top-left of chat)
- Shape: Pill, 500pt corner radius
- Background: transparent with 1pt
#E5E5E5/#424242dark border (on hover/tap, becomes#F0F0F0fill) - Leading: small model icon (abstract sparkle or geometric shape, 16pt)
- Text: "GPT-4o" / "GPT-4" / "GPT-5" / "o3" — Söhne 14pt w500
- Trailing chevron.down 12pt
- Padding: 6pt vertical, 10pt horizontal
- Tap: opens bottom sheet with model picker (list of available models + descriptions)
Text Link Button ("Upgrade to Plus" etc.)
- Color:
#2A7FFF(link blue) - Font: Söhne 14pt weight 500
- Optional underline on hover
Conversation Atoms
User Message Bubble
- Shape: Rounded corners (18pt on top-right, 18pt top-left, 18pt bottom-left, 4pt bottom-right — "chat bubble" with flat pointing-corner on speaker side)
- Background:
#F7F7F8light /#2F2F2Fdark - Text: Söhne 16pt w400
#0D0D0D/#ECECEC - Padding: 10pt vertical, 14pt horizontal
- Align: right (trailing), max-width 80% of container width
- Attachment preview (if any): above the text, 72pt square tile with file icon + filename
Assistant Message (no bubble)
- Structure: plain markdown-rendered content flowing inline
- Leading small avatar icon (optional, 24pt — the ChatGPT sparkle logo)
- Text: Söhne 16pt w400
#0D0D0D/#ECECEC - Line height: 1.5
- Align: left (leading), max-width: full container
- Below content: interaction row (regenerate / copy / thumbs)
Inline Code Chip
- Background:
#F0F0F0/#424242 - Font: Menlo 14pt
- Padding: 2pt vertical, 4pt horizontal
- Corner radius: 4pt
Code Block
- Background:
#F7F7F8/#1E1E1E - Border: 1pt
#E5E5E5/#363636 - Corner radius: 8pt
- Top strip (40pt tall): language label (e.g., "swift", "python") in Söhne 12pt w500
#676767+ trailing "Copy" button - Body: syntax-highlighted code in Menlo 13pt, scrollable horizontally
- Padding: 12pt
Table Rendering
- Full-width within message
- Cells: 1pt
#E5E5E5borders all around - Header row: bold Söhne 14pt w600, bg
#F7F7F8 - Body rows: Söhne 14pt w400
- Padding: 8pt per cell
LaTeX / Math Rendering
- Inline:
$x^2 + y^2$renders via MathJax/KaTeX, inline with text - Block:
$$...$$centered on own line, 120% font size
Sidebar
Conversation List Item
- Height: 40pt
- Padding: 8pt vertical, 12pt horizontal
- Background: transparent; hover
#F0F0F0/#252525; active#ECECEC/#2F2F2F - Text: auto-generated conversation title (e.g., "React Hooks Explained") in Söhne 15pt w500
#0D0D0D/#ECECEC, 1-line clamp with ellipsis - Trailing (on hover): ellipsis menu
⋯— opens Rename / Share / Delete / Archive - Long-press on mobile: opens same menu
Sidebar Section Header
- Text: "Today", "Yesterday", "Previous 7 Days", "Previous 30 Days", "June 2024" (month-grouped for older)
- Font: Söhne 12pt w500
#676767/#B4B4B4 - Padding: 16pt top, 4pt bottom, 12pt horizontal
Sidebar Top Area
- "New Chat" button at top — 44pt tall, full-width minus 12pt insets, rounded 8pt
- Leading icon
square.and.pencil+ label "New chat" Söhne 14pt w500 - Active: background
#0D0D0Dtext#FFFFFF(or dark mode#FFFFFFtext#0D0D0D)
Sidebar Search
- Below "New Chat" button: 36pt tall search field, 8pt rounded
- Placeholder "Search chats"
Sidebar User Section (bottom)
- User avatar (32pt circle) + name + Plus/Team badge + cog icon
- Tap: opens settings
Top Nav (Chat View)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Sidebar at 80% width when open; compose max-width 90% |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | User bubble max at 70% (more margin visible) |
| iPad (portrait) | 768pt | 2-column: sidebar (260pt) + chat (centered max 680pt) |
| iPad (landscape) | 1024pt+ | Same 2-column; chat max 780pt |
Dynamic Type
- Chat body, markdown H1/H2/H3, inline text: full scale
- Model chip, sidebar titles, section headers, timestamps: FIXED
- Code blocks: scale to XL (but stay monospace)
Orientation
- iPhone: rotates freely — chat works well in landscape too
- Voice mode: portrait-locked (the full-screen sphere is designed for portrait)
Touch Targets
- Send button: 32pt, 44pt hit area
- Voice button: 32pt, 44pt hit area
- Icons in compose row: 40pt hit
- Regenerate / thumbs: 32pt hit (tight — consider 44pt minimum for accessibility)
- Model chip: 36pt tall, 44pt effective
- Sidebar row: 40pt, full-row tap
Safe Area Handling
- Top: top nav respects safe area and Dynamic Island
- Bottom: compose bar respects home indicator with extra padding
- Keyboard: chat scrolls above keyboard; compose bar rises with keyboard
- Voice mode: ignores safe area (full-bleed sphere)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-chatgpt {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0d0d0d;
--heading-color: #0d0d0d;
--link-color: #0267ff;
--link-hover-color: #0052ce;
--border-color: #d3d3d3;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(13,13,13,0.06);
--card-hover-shadow: 0 6px 18px rgba(13,13,13,0.12);
--header-bg: #0d0d0d;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #626262;
--button-bg: #2a7fff;
--button-text-color: #000000;
--button-hover-bg: #0062f6;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #0d0d0d;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d3d3d3;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0d0d0d;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- uber 86.4%
- linear 77.4%
- google calendar 74.6%
- matrix 74.5%
- kashiyama 74.1%
Where this came from
- Source document
ios/design-md/misc/chatgpt/DESIGN.md· 29.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.