The ChatGPT iOS app, dissected. White canvas. One #10A37F green you almost never see. User on the right with a bubble, model on the left with nothing — just text and a single black mark.
You have a few options. The simplest one for a single element:
Every ChatGPT screen earns its position by adding as little as possible — a white canvas, asymmetric bubble grammar, and a single black submit circle that quietly appears when there's text to send.
User messages live on the right inside a #F4F4F4 bubble at 22px radius. Assistant replies have no bubble at all — just left-aligned markdown next to a small black avatar. The asymmetry is the grammar.
Sidebar lives on a #F9F9F9 warm-gray. Today / Yesterday / Previous 7 Days as section labels — never UI cards, never tabs. The user row pins to the bottom with a tiny Plus badge.
Empty state is centered: black knot logo, model name, and 2×2 suggestion cards at 14px radius. No hero copy, no marketing — just permission to start typing.
Tap the voice icon and the conversation collapses into a single breathing orb — a graphite sphere with subtle inner glow that scales with your speech amplitude. Three controls below: mute, dismiss, end. Everything else is stripped away.
The orb's animation honors iOS Reduce Motion: it switches to a flat opacity pulse instead of a scale-breathe when set.
orb: 200×200pt
shadow: y20 b60
amplitude: 0–1.0
fallback: opacity pulse
Tap the + on the input bar and an iOS-native action sheet lifts up: Camera, Photos, Files, Scan Document. Attached media gets a 64×64 thumbnail above the input, with a tiny ✕ to remove.
Scan Document uses VisionKit's document camera — the same one Apple Notes uses — so the corner-detection and perspective-correction feel exactly like the system.
UIDocumentCameraVC
PHPicker
UIImagePicker
Tapping the "ChatGPT 4o ▾" header in the nav lifts a small floating sheet — not a full-screen modal. GPT-4o, GPT-4o mini, o1, o1 mini, each with a one-line use-case description. The currently selected model carries a single green check.
The sheet's corner radius is 14pt matching iOS-native sheets; its shadow is softer to keep the focus on copy.
sheet radius: 14pt
row height: 56pt
check: #10A37F
ChatGPT's iOS app reaches for fewer tokens than almost any consumer app in the App Store. One green you barely see. One bubble color. A handful of grays. The point is that nothing is in the way.
White canvas. Bubble background is barely-there gray. The OpenAI green appears only on confirms, model checkmarks, and the tiniest active states. Every other "color" is a shade of ink.
Söhne family — substituted here with Inter. Conversational legibility over expression. Body sits at 16/1.5 for sustained reading. The model selector and section labels are the only places weight changes register.
| Token | Sample | Size | Weight | Line |
|---|---|---|---|---|
| --display-empty | What can I help with? | 26 / 1.63rem | 600 | 1.2 |
| --model-title | ChatGPT 4o | 18 / 1.13rem | 600 | 1.2 |
| --msg-body | A conversation that disappears so the answer doesn't. | 16 / 1.00rem | 400 | 1.5 |
| --author-label | ChatGPT | 14 / 0.88rem | 600 | 1.3 |
| --bubble-body | How do I center a div? | 15 / 0.94rem | 400 | 1.45 |
| --code-mono | place-items: center; | 13 / 0.81rem | 400 | 1.5 |
| --sidebar-section | Today | 11 / 0.69rem | 600 | 1.2 |
| --account-pill | Plus | 10 / 0.63rem | 600 | 1.2 |
| --input-placeholder | Message ChatGPT | 15 / 0.94rem | 400 | 1.4 |
The user bubble's 22px corner is the most-seen radius in the app — bigger than the input pill, softer than any button. Buttons stay at 8px. The send button is a 50% black circle. Everything else hovers at 10–14px.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Buttons stay rectangular at 8px. The only true circle is the send. Inputs are pills. Tags are barely there.
place-items: center on the parent.