ChatGPT DESIGN.md

1. Visual Theme & Atmosphere

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 (#F7F7F8 light / #2F2F2F dark), 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

2. Color Palette & Roles

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 (#CCCCCC light / #4D4D4D dark): 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): Inline code chip 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 → #0D0D0D on press): The "stop generating" button during streaming

3. Typography Rules

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

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

4. Component Stylings

Buttons

Send Button The single most recognizable ChatGPT component.

• Shape: Circle, 32pt diameter
• Background: #0D0D0D light / #FFFFFF dark (when enabled with typed text)
• Icon: SF Symbol arrow.up or arrow.up.circle.fill, 16pt, color inverse (#FFFFFF on black light / #0D0D0D on white dark)
• Position: right end of compose field
• Enabled when user has typed text; disabled gray #CCCCCC light / #4D4D4D dark 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 #E5E5E5 border / 1pt #424242 dark border
• Icon: SF Symbol mic.fill or waveform, 18pt, #0D0D0D light / #ECECEC dark
• 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 / #B4B4B4 dark
• Pressed: background shift to #F0F0F0 / #2F2F2F dark (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 #F0F0F0 circle 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 / #424242 dark border (on hover/tap, becomes #F0F0F0 fill)
• 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: #F7F7F8 light / #2F2F2F dark
• 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 #E5E5E5 borders 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 #0D0D0D text #FFFFFF (or dark mode #FFFFFF text #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)

• Height: 52pt + safe area
• Background: transparent (or slightly tinted on scroll)
• Leading: hamburger / sidebar toggle (24pt) OR workspace avatar
• Center-leading: model selector chip (see above)
• Trailing: "New chat" icon (square.and.pencil), 24pt

Input Fields

Message Composer (docked bottom)

• Background: #FFFFFF / #212121 dark (same as canvas)
• Border: 1pt #E5E5E5 / #424242 top — just on top edge, or an entire rounded-rectangle container
• Padding: 8pt horizontal, 8pt vertical
• Shape: full-width rounded rectangle, 24pt corner radius (pill-like on iPhone), or full-bleed with just top border
• Auto-growing text area: min 48pt height, max 144pt (~6 lines) then scrolls
• Leading: + or paperclip icon for attachments (opens sheet: Photos, Camera, Files, Google Drive)
• Trailing: when empty — globe icon + microphone icon; when has text — send button

Voice Mode (Full-screen)

• Full-screen overlay, transparent dimming on entry
• Center: pulsing blue gradient sphere (3B82F6 → 60A5FA → 93C5FD) about 280pt diameter
• Sphere animates organically (Perlin-noise-driven deformation + scale pulse)
• Waveform visualization overlay on sphere during user speech
• Background: the gradient canvas takes over the screen
• Controls: "Mute" toggle bottom-left, "End" (X) button bottom-right, "Swap" to change voice
• Assistant speech: subtle text overlay at bottom while speaking ("ChatGPT is speaking..." small white)
• End: taps X, returns to chat with a new entry "[voice conversation]" added to the history

Distinctive Components

Send Button (Black/White Circle) The signature — 32pt circle, black-on-white or white-on-black inverse, single up-arrow glyph. Universally recognizable.

Voice Mode Sphere A mesmerizing full-screen blue gradient sphere that pulses and morphs as you speak. It's the product's most-recognized animated moment.

Model Selector Chip "GPT-4o", "GPT-5" chip top-left — tap opens a sheet with all models.

Regenerate + Feedback Icons After every assistant response: regenerate / copy / 👍 / 👎 — a 4-icon row that signals "this is an AI response, you can refine or rate it".

Typing Indicator 3 dots pulsing in sequence while the model is generating. Below the last message while streaming, then fades when text appears.

Code Block with Copy Every fenced code block has a top strip with the language label + a "Copy" button on the right. Copy gives a brief "Copied!" toast.

Attachment Preview in User Bubble When attaching a file/image, the attachment shows as a small tile above the text in the user bubble (72pt square with file icon or image thumbnail + truncated filename).

Auto-titled Conversations Every new chat gets an auto-generated 3-5 word title after the first exchange ("React Hooks Explained", "Django ORM Help"), shown in the sidebar.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56, 72
• Message vertical gap: 16pt between turns
• User bubble max-width: 80% of container
• Assistant response: full-width
• Sidebar conversation item: 40pt tall, 12pt horizontal padding

Grid & Container

• iPhone: full-bleed chat with 16pt horizontal insets; composer docks at bottom with safe-area padding
• iPad: split-view — sidebar (260pt) + chat (centered, max-width 780pt); very generous centering for readability
• Message bubbles never span full width — the 80% max keeps conversation visually anchored to side

Whitespace Philosophy

• Generous chat rhythm: 16pt between turns, 1.5 line-height on body — a reading-first app
• Minimal chrome: only the model chip at top, the send button at bottom-right, and the sidebar when open
• Centered at rest: on an empty new chat, the compose field sits slightly below center with a small model-name + greeting ("Ready when you are" or "How can I help you today?")
• Sidebar is secondary: slides in but not always visible; the chat is primary

Border Radius Scale

• Square (0pt): Plain text (body, assistant response)
• Subtle (4pt): Inline code chips, inline attachment tiles
• Standard (8pt): Code blocks, tables, sidebar "New chat" button
• Comfortable (12pt): Sheets, model picker
• Bubble Corner (18pt on 3 corners + 4pt on pointer corner): User message bubble — asymmetric "chat bubble" rounding
• Large (24pt): Compose field wrapper on iPhone (nearly pill)
• Circle (50%): Send button, voice button, user avatar

6. Depth & Elevation

ChatGPT is radically flat. The only shadows are on ephemeral UI.

Shadow Philosophy: ChatGPT treats shadows as functional, not decorative — they appear only where the "this is floating above, tap outside to dismiss" signal is needed. The chat itself is absolutely flat. Code blocks and tables are bordered (1pt), not shadowed. The voice-mode sphere is the dramatic exception — it glows with a radial blue gradient that extends beyond its edge.

Motion

• Message send: user bubble slides up from bottom with 250ms ease-out; send button pulses briefly (scale 0.9 → 1.0)
• Typing indicator: 3 dots pulse in sequence — each dot opacity 0.3 ↔ 1.0 over 600ms, staggered 200ms
• Assistant streaming: each token appears inline as it arrives (no animation — just character-by-character append)
• Regenerate tap: assistant response fades out 200ms, new response streams in
• Voice mode entry: scale from 0 → 1.0 with spring, opacity 0 → 1, 400ms; sphere starts pulsing immediately
• Voice mode sphere: continuous organic pulse — scale 0.95 ↔ 1.05 over 2s ease-in-out, with Perlin-noise deformation on SVG path
• Sidebar slide: edge-swipe 1:1 tracking; spring 250ms damping 0.8 on release
• New chat transition: existing chat fades out 150ms, empty state fades in 150ms
• Copy button: tap shows brief "Copied!" pill that fades in/out over 1s
• Thumbs feedback: tap fills icon + brief scale 1.0 → 1.15 → 1.0 spring + soft haptic
• Haptics: soft on send / copy / thumbs; medium on voice mode entry; success on long action completion

7. 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 #212121 on 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

8. Responsive Behavior

Device Sizes

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)

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #212121
• Text primary: #0D0D0D / #ECECEC dark
• Text secondary: #676767 / #B4B4B4 dark
• User bubble (light): #F7F7F8
• User bubble (dark): #2F2F2F
• Send button: #0D0D0D light / #FFFFFF dark
• Send icon: inverse of circle
• Inline code bg: #F0F0F0 / #424242
• Code block bg: #F7F7F8 / #1E1E1E
• Link blue: #2A7FFF
• Sidebar bg (light): #F9F9F9
• Sidebar bg (dark): #181818
• Divider: #E5E5E5 / #424242
• Legacy ChatGPT green (retired mostly): #10A37F
• Voice mode sphere gradient: #3B82F6 → #60A5FA → #93C5FD

Example Component Prompts

• "Build the ChatGPT send button in SwiftUI: 32pt circle, #0D0D0D background (or #FFFFFF on dark mode), SF Symbol arrow.up 16pt weight bold in contrasting inverse color (#FFFFFF light, #0D0D0D dark). Position: right end of compose field. Enabled only when text has been typed — disabled state is #CCCCCC light / #4D4D4D dark with same icon. Pressed: scale 0.94 + medium haptic. Replace with a square stop.fill icon during streaming."

• "Create a ChatGPT user message bubble: right-aligned, max-width 80% of container. Background #F7F7F8 light / #2F2F2F dark. Asymmetric corner radii: top-left 18pt, top-right 18pt, bottom-left 18pt, bottom-right 4pt (the 'pointer' corner). Padding 10pt vertical 14pt horizontal. Text Söhne 16pt w400 #0D0D0D / #ECECEC. If attachment: 72pt square thumbnail above text with file icon + truncated filename in 12pt #676767."

• "Design the ChatGPT assistant response: leading optional 24pt sparkle-logo icon, then full-width markdown-rendered content in Söhne 16pt w400 line-height 1.5 #0D0D0D / #ECECEC. NO bubble — just plain text flowing. Markdown headings at H1 24pt / H2 20pt / H3 17pt, all w600. Inline code \code`in Menlo 14pt with#F0F0F0bg and 4pt radius. Code blocks:#F7F7F8bg, 1pt#E5E5E5border, 8pt radius, top strip with language label in Söhne 12pt w500#676767 + right-aligned 'Copy' button. Below the response: 4-icon row — regenerate (arrow.triangle.2.circlepath), copy (doc.on.doc), thumbsup, thumbsdown — each 20pt in 32pt hit area, #676767` default."

• "Render the ChatGPT model selector chip: top-left of chat, pill shape 500pt radius, 1pt #E5E5E5 border, transparent fill (or #F0F0F0 on press). Leading 16pt model icon (abstract sparkle shape), 'GPT-4o' label in Söhne 14pt w500 #0D0D0D, trailing chevron.down 12pt. Padding 6pt vertical 10pt horizontal. Tap: presents bottom sheet with model picker listing GPT-4o / GPT-4 / GPT-3.5 / etc with descriptions."

• "Build the ChatGPT compose field: docked at bottom, #FFFFFF / #212121 dark background, rounded rectangle container with 24pt corner radius. Auto-growing text area: min 48pt, max ~144pt then scroll. Placeholder 'Message ChatGPT…' in Söhne 16pt w400 #676767. Leading + icon button for attachments. Trailing: when empty, show two icons globe (web) + microphone, both 20pt #676767 in 40pt hit areas; when text entered, replace with the black 32pt send button circle with up-arrow. Text input in Söhne 16pt w400 #0D0D0D."

• "Create ChatGPT voice mode: full-screen takeover, background fades to black. Center: ~280pt diameter animated sphere with radial gradient #3B82F6 → #60A5FA → #93C5FD, pulsing continuously (scale 0.95 ↔ 1.05 over 2s ease-in-out) + Perlin-noise deformation on the SVG circle path. Sphere has a glow: rgba(59,130,246,0.4) 0 0 80pt. Bottom-center: waveform visualization while user speaks. Bottom-left: 'Mute' button. Bottom-right: 'End' (X) button — 44pt circular, white on semi-transparent black. While assistant speaks: small white text 'ChatGPT is speaking…' above controls. Entrance: scale 0 → 1 + opacity 0 → 1 over 400ms spring; haptic medium on entry."

Iteration Guide

1. Canvas is pure white (#FFFFFF) in light, charcoal (#212121) dark — NOT true black
2. Send button is a 32pt circle, black-on-white light / white-on-black dark — single up-arrow glyph
3. User messages get a soft-gray bubble with asymmetric corners (18/18/18/4); assistant messages get NO bubble
4. Typography is Söhne / Inter / SF Pro fallback order; code always in Menlo / SF Mono
5. UI is monochromatic — the only accent is subtle blue #2A7FFF on links; no brand green, no colorful chrome
6. Markdown in assistant responses is fully rendered — headings, code blocks with syntax + copy button, tables, LaTeX
7. Below every assistant response: 4 icons — regenerate / copy / thumbs-up / thumbs-down
8. Model selector chip top-left (pill with "GPT-4o" + chevron) is a canonical UI element
9. Voice mode is a full-screen blue gradient sphere that pulses organically — the dramatic flagship moment
10. Sidebar groups conversations by time: Today / Yesterday / Previous 7 Days / Previous 30 Days / Month Year