A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
9type steps
3radius steps
3pxspacing base
Imessage, in one page
iMessage is the canonical iOS conversation surface — and arguably the most-imitated chat UI on the planet. Its design philosophy is "the message is the moment": the interface is engineered to disappear so the bubble, the tapback, and the typing dots carry the entire emotional weight of a conversation. Open a thread and you see a clean white canvas (#FFFFFF light / true-black #000000 dark), a hairline-thin navigation bar with a circular contact avatar centered above the contact's name, a vertically-scrolling stack of rounded "bubbles," and a blur-backed input bar pinned to the bottom with a + attachment button, a pill text field, and a circular send button. There are no cards, no list dividers inside the thread, no chrome competing with the words.
The single most recognizable element is the bubble pair: outgoing iMessages render in iMessage Blue (#007AFF) with white text and a tail on the bottom-right; incoming bubbles render in a neutral gray (#E9E9EB light / #26262A dark) with primary-color text and a tail on the bottom-left. When a message can't be sent over iMessage (recipient not on Apple, no data), the outgoing bubble falls back to SMS Green (#34C759) — this blue-vs-green distinction is so culturally loaded it has its own discourse. Bubbles use a ~19pt corner radius with the corner nearest the sender's edge "pinched" to ~6pt to form the tail. Consecutive messages from the same sender group with ~3pt gaps; a sender change inserts ~9pt.
The second signature moment is the tapback: long-press any bubble and a floating reaction strip appears with six glyphs — Heart, Thumbs Up, Thumbs Down, Ha-Ha, Double-Exclamation, Question Mark. The chosen reaction docks as a small chip overlapping the top edge of the bubble. Add typing dots (three pulsing gray circles in an incoming-shaped bubble), delivery receipts ("Delivered" / "Read 9:41 AM" in tiny gray right-aligned text under the last outgoing bubble), inline message effects (Slam, Loud, Gentle, Invisible Ink), and full-bleed emoji, and you have the complete iMessage emotional vocabulary.
Color is restrained and almost entirely systemic. Beyond the two brand bubble colors, iMessage leans on Apple's system palette: systemBlue for every interactive control and link, systemGray ramps for bubbles and secondary text, systemRed for FaceTime/decline and destructive actions, systemGreen for SMS. There is no decorative brand palette — the blue/green bubble dichotomy *is* the brand. Typography is pure San Francisco (SF Pro Text / SF Pro Display), Apple's system face, used at Dynamic Type sizes with the message body at 16-17pt regular and the contact headline at 17pt semibold.
Key Characteristics:
- White canvas (
#FFFFFF) light / true-black (#000000) dark — minimum chrome, maximum message - Blue/gray bubble pair: outgoing iMessage Blue (
#007AFF), incoming gray (#E9E9EB/#26262A) - SMS Green (
#34C759) fallback bubble when iMessage is unavailable - ~19pt rounded bubbles with a pinched ~6pt tail corner on the sender's edge
- Tapback reaction strip — Heart / Thumbs Up / Thumbs Down / Ha-Ha / ‼️ / ❓ — docks as an overlapping chip
- Typing indicator — three pulsing gray dots in an incoming-shaped bubble
- Delivery receipts — "Delivered" / "Read 9:41 AM" tiny gray right-aligned under last outgoing message
- Blur-backed input bar —
+attach, pill text field, circular send (arrow-up) button - SF Pro typography at Dynamic Type sizes; no custom brand font
- System-color UI —
systemBluecontrols,systemGrayramps,systemRedFaceTime/destructive - Message effects (Slam / Loud / Gentle / Invisible Ink) and screen effects
- Centered nav with circular avatar above contact name + chevron-down disclosure
Do's and don'ts
Do
- Use white (
#FFFFFF) light canvas / true black (#000000) dark — black for OLED in dark mode - Render outgoing iMessages in iMessage Blue
#007AFF, SMS fallback in Green#34C759 - Use neutral gray for incoming bubbles —
#E9E9EBlight /#26262Adark — never tinted - Pinch the sender-edge corner to ~6pt to form the tail; keep the other three at ~19pt
- Group same-sender messages at 3pt, separate sender turns at 9pt
- Always use white text on blue and green bubbles, primary label on gray
- Provide the six-glyph tapback strip on long-press and dock the reaction as an overlapping chip
- Show typing as three pulsing gray dots in an incoming-shaped bubble
- Show "Delivered" / "Read 9:41 AM" as tiny gray right-aligned text under the last outgoing bubble
- Use San Francisco at Dynamic Type sizes — never a custom brand font
- Use system materials (blur) for nav and input bar, not opaque bars
- Keep bubble max width ~78% so the empty opposite margin signals direction
Don't
- Don't put dividers, cards, or shadows on message bubbles — they're flat and edge-grouped
- Don't tint incoming bubbles — they are neutral gray, the contrast against blue is the point
- Don't swap the blue/green semantics — blue = iMessage, green = SMS, this is culturally fixed
- Don't use a custom font — iMessage is pure system SF Pro at Dynamic Type
- Don't make bubbles full-width — the ~78% cap and one-sided whitespace are the directional cue
- Don't keep the tail on every bubble in a run — only the last bubble of a same-sender group
- Don't use pure black text on a blue bubble — outgoing text is always
#FFFFFF - Don't add a brand accent palette —
systemBlue/systemGreen/systemGrayis the entire system - Don't animate aggressively outside effects — base motion is quiet spring, 0.2–0.35s
- Don't put a heavy drop shadow on bubbles for "depth" — depth is blur material, content is flat
- Don't show "Read" if the user hasn't enabled read receipts — respect the setting
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 Imessage design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- iMessage Blue: #007aff
- iMessage Blue Pressed: #0062cc
- SMS Green: #34c759
- SMS Green Pressed: #248a3d
- Canvas White: #ffffff
- Incoming Bubble: #e9e9eb
- Surface Gray: #f2f2f7
- Input Field: #ffffff
- Divider: #3c3c43
- Dark Canvas: #000000
Type:
- families: SF Pro Text, SF Pro Display, System, Numerals
- scale: 11, 12, 13, 15, 16, 17, 20, 28, 34
- weights: 400, 500, 600, 700
Shape:
- radius: 14, 19, 24
- elevation: Shadow: none
Spacing: 3, 8, 9, 13
Rules:
- Use white (`#FFFFFF`) light canvas / true black (`#000000`) dark — black for OLED in dark mode
- Render outgoing iMessages in iMessage Blue `#007AFF`, SMS fallback in Green `#34C759`
- Use neutral gray for incoming bubbles — `#E9E9EB` light / `#26262A` dark — never tinted
- Pinch the sender-edge corner to ~6pt to form the tail; keep the other three at ~19pt
- Group same-sender messages at 3pt, separate sender turns at 9pt
- Always use white text on blue and green bubbles, primary label on gray
Avoid:
- Don't put dividers, cards, or shadows on message bubbles — they're flat and edge-grouped
- Don't tint incoming bubbles — they are neutral gray, the contrast against blue is the point
- Don't swap the blue/green semantics — blue = iMessage, green = SMS, this is culturally fixed
- Don't use a custom font — iMessage is pure system SF Pro at Dynamic Type
- Don't make bubbles full-width — the ~78% cap and one-sided whitespace are the directional cue
- Don't keep the tail on every bubble in a run — only the last bubble of a same-sender group
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- iMessage Blue (
#007AFF): Outgoing iMessage bubble, every interactive control, links, send button —systemBlue. - iMessage Blue Pressed (
#0062CC): Pressed/highlighted state of blue controls. - SMS Green (
#34C759): Outgoing SMS/MMS fallback bubble, "Send as Text Message" —systemGreen. - SMS Green Pressed (
#248A3D): Pressed state of green bubble/control.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Thread background, primary light canvas. - Incoming Bubble (
#E9E9EB): Gray incoming message bubble —systemGray5-ish. - Surface Gray (
#F2F2F7): Grouped table background (conversation list), settings —systemGroupedBackground. - Input Field (
#FFFFFFwith#C6C6C81pt border): Pill compose field. - Divider (
#3C3C434A): Hairline nav separator (separator, ~29% opacity).
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#000000): True black thread background (OLED). - Incoming Bubble (Dark) (
#26262A): Dark gray incoming bubble. - Dark Surface 1 (
#1C1C1E): Elevated surfaces, conversation list rows —systemGray6dark. - Dark Surface 2 (
#2C2C2E):+button background, tapback strip, attachment tray —systemGray5dark. - Dark Divider (
#38383A): Hairline nav/list separators (separatordark).
Text
- Text Primary Light (
#000000): Incoming bubble text, primary labels —label. - Text on Blue/Green (
#FFFFFF): Outgoing bubble text — always white on blue and green. - Text Secondary (
#3C3C4399light /#EBEBF599dark): Timestamps, contact subtitle —secondaryLabel. - Text Tertiary (
#3C3C434Dlight /#EBEBF54Ddark): "Delivered", placeholder, typing dots —tertiaryLabel. - Text Primary Dark (
#FFFFFF): Incoming bubble text and labels on dark.
Semantic
- Error / FaceTime Red (
#FF3B30light /#FF453Adark): Decline call, delete message, unsend confirmation —systemRed. - Success Green (
#34C759/#30D158): SMS sent confirmation, accept call —systemGreen. - Link Blue (
#007AFF/#2997FF): Inline links inside bubbles, "Tap to Load" —systemBlue. - Selection Highlight (
#007AFF@ 20%): Text selection within a bubble.
Bubble Color Matrix
| State | Light Mode | Dark Mode | Text |
|---|---|---|---|
| Outgoing iMessage | #007AFF | #007AFF | #FFFFFF |
| Outgoing SMS/MMS | #34C759 | #34C759 | #FFFFFF |
| Incoming | #E9E9EB | #26262A | #000000 / #FFFFFF |
| Failed (not delivered) | #FF3B30 glyph + gray bubble | #FF453A glyph + #26262A | #000000 / #FFFFFF |
| Tapback chip bg | #FFFFFF w/ shadow | #2C2C2E | n/a |
Type scaleRead the full spec
Font Family
- System:
SF Pro Text(≤ 19pt) /SF Pro Display(≥ 20pt) — Apple's San Francisco. Selected automatically by the OS via the system font; never bundled or named in code (use.system). - Fallback Stack (web/cross-platform mirror):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: SF proportional by default; tabular figures in timestamps.
- No custom brand typeface — iMessage is 100% system San Francisco at Dynamic Type sizes.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | SF Pro Display | 34pt | 700 | 1.2 | 0.4pt | "Messages" list screen title |
| Title 1 | SF Pro Display | 28pt | 700 | 1.2 | 0.36pt | "New Message" sheet title |
| Title 3 | SF Pro Display | 20pt | 600 | 1.25 | 0.38pt | Group name, large contact name |
| Headline | SF Pro Text | 17pt | 600 | 1.3 | -0.4pt | Contact name in chat nav bar |
| Body / Bubble | SF Pro Text | 17pt | 400 | 1.3 | -0.4pt | Message text (Dynamic Type default) |
| Message (compact) | SF Pro Text | 15pt | 400 | 1.3 | -0.2pt | Dense / smaller Dynamic Type |
| Callout | SF Pro Text | 16pt | 400 | 1.3 | -0.3pt | Inline link text, "Tap to Load" |
| Subhead | SF Pro Text | 15pt | 400 | 1.35 | -0.2pt | Conversation list preview line |
| Footnote | SF Pro Text | 13pt | 600 | 1.35 | -0.08pt | "Delivered" / "Read 9:41 AM" |
| Caption 1 | SF Pro Text | 12pt | 400 | 1.35 | 0pt | Timestamp separators |
| Caption 2 | SF Pro Text | 11pt | 600 | 1.35 | 0.06pt | "iMessage" / "SMS" label above thread |
| Tab / Toolbar | SF Pro Text | 11pt | 500 | 1.0 | 0.07pt | Toolbar labels |
Principles
- Dynamic Type is mandatory: Message body, headline, and list previews scale across the user's text-size setting; only timestamps and chrome stay fixed.
- Weight concentrated at 400 / 500 / 600 / 700: Regular body, medium toolbar, semibold headline/footnote, bold titles. No thin or black weights.
- Tail does not change type: bubble tail/grouping is a shape concern; text metrics never change with bubble position.
- White text on blue and green is non-negotiable: outgoing bubbles always use
#FFFFFFtext regardless of mode. - Tracking is negative for body (SF optical), positive for tiny captions — follow Apple's Dynamic Type tracking table.
Components and layoutRead the full spec
Buttons
Send Button (circular)
- Shape: 30pt circle (icon arrow-up
arrow.up) - Background:
#007AFF(iMessage) /#34C759(SMS) /#8E8E93disabled when field empty - Icon:
#FFFFFF, 15pt, weight semibold - Pressed: scale 0.92 + slight darken (
#0062CC) - Sits at the trailing edge of the input bar
Primary Action Button (sheets / alerts)
- Shape: Rounded rectangle, 14pt corner radius (or full-width 12pt in sheets)
- Background:
#007AFF - Text:
#FFFFFF, SF Pro 17pt weight 600 - Padding: 13pt vertical, 26pt horizontal
- Pressed:
#0062CC+ opacity 0.85
Tinted Button (secondary)
- Background:
#007AFF@ 16% opacity (rgba(0,122,255,0.16)) - Text:
#007AFF, SF Pro 15pt weight 600 - Corner radius: 14pt
- Used for "Tapback", in-thread quick actions
Text Button (nav / toolbar)
- Background: transparent
- Text:
#007AFF, SF Pro 17pt weight 400 ("Edit", "Cancel", "Done") - Pressed: opacity 0.3
+ Attachment Button
- Size: 30pt circle, background
#E9E9EBlight /#2C2C2Edark - Icon:
plus16pt,#8E8E93/secondaryLabel - Tap expands the iMessage app/attachment tray
Message Bubble (the core atom)
The bubble is iMessage's fundamental unit.
Outgoing iMessage Bubble
- Background:
#007AFF - Text:
#FFFFFF, SF Pro 17pt w400 - Padding: 8pt vertical, 14pt horizontal
- Corner radius: 19pt, with bottom-right corner at 6pt (tail) when last in a group
- Alignment: trailing (right), max width ~78% of thread
- Shadow: none
Outgoing SMS Bubble — identical geometry, background #34C759.
Incoming Bubble
- Background:
#E9E9EBlight /#26262Adark - Text:
#000000light /#FFFFFFdark, SF Pro 17pt w400 - Corner radius: 19pt, bottom-left corner at 6pt (tail) when last in a group
- Alignment: leading (left)
Grouping rules
- Same sender consecutive: 3pt vertical gap, only the last bubble in the run shows the tail
- Sender change: 9pt vertical gap, new bubble shows the tail
- Day/time separator: centered 12pt caption with
secondaryLabel, 10pt top / 6pt bottom margin
Bubble States
- Sending: bubble at 50% opacity until server ack
- Failed: red
exclamationmark.circle.fill(#FF3B30) to the left of the bubble; tap to retry - With tapback: reaction chip overlaps the top corner nearest the bubble's owner (-16pt y offset)
- Edited (iOS 16+): "Edited" in 11pt
tertiaryLabelbelow the bubble - With effect: bubble animates in (Slam = scale 1.3→1, Loud = scale + shake, Gentle = scale 0.5→1)
Tapback Reaction Strip
- Floating capsule, background
#FFFFFFw/rgba(0,0,0,0.12) 0 6px 20pxshadow (light) /#2C2C2E(dark) - Corner radius: 24pt (capsule)
- Six 28pt glyphs: ❤️ Heart, 👍 Thumbs Up, 👎 Thumbs Down, 😂 Ha-Ha, ‼️ Emphasize, ❓ Question
- Appears on long-press (~500ms) anchored above the pressed bubble with a scale-up + spring
- Selected reaction docks as a 16pt chip overlapping the bubble's top-near corner; chip bg
#FFFFFF/#2C2C2Ewith subtle border
Typing Indicator
- Incoming-shaped bubble (gray, leading, tail) containing three 7pt circles
- Circle color:
tertiaryLabel(#3C3C434D/#EBEBF54D) - Animation: each dot scales 0.6 → 1.0 → 0.6 with a 0.2s stagger, ~1.4s loop, ease-in-out
- Appears at the bottom of the thread when the other party is composing
Delivery Receipt
- Right-aligned, under the last outgoing bubble
- Text: "Delivered" or "Read 9:41 AM" — SF Pro 13pt w600
secondaryLabel - 2pt top margin from bubble; collapses when superseded by a newer outgoing message
- "Read" appears only if the recipient has read receipts enabled
Navigation
Chat Nav Bar
- Height: 44pt + safe area, hairline
separatorbottom border - Leading: back chevron (
chevron.left17pt#007AFF) + unread count badge - Center: circular contact avatar (34pt) stacked above contact name (SF Pro 13pt w600) +
chevron.down9pt disclosure (opens contact card) - Trailing: FaceTime icon (
video22pt#007AFF) - Material:
.ultraThinMaterialblur when content scrolls under it
Conversation List (Messages home)
- Large title "Messages" (34pt w700), search bar below, "Edit" / compose (
square.and.pencil) in nav - Each row: 60pt tall — leading 50pt circular avatar, title (contact, 17pt w600), preview (15pt
secondaryLabel, 2-line truncated), trailing timestamp (13ptsecondaryLabel) + unread blue dot (10pt#007AFF) - Swipe actions: Pin (orange), Mute (purple/indigo), Delete (red)
Input Fields
Compose Bar
- Height: 36pt field + 8/16pt padding, blur-backed (
.ultraThinMaterial) - Leading:
+30pt circular attachment button - Center: pill text field — 18pt corner radius, 1pt
#C6C6C8/#38383Aborder, transparent fill, placeholder "iMessage" / "Text Message" intertiaryLabel - Trailing: 30pt circular send button (arrow-up), color = bubble color, disabled gray when empty
- Grows up to ~5 lines then scrolls internally
Search Bar (list screen)
- Height: 36pt, background
#E9E9EB/#1C1C1E, 10pt corner radius - Leading
magnifyingglass15pttertiaryLabel, placeholder "Search"
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max ~290pt; compact nav (no Dynamic Island) |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above nav bar |
| iPhone 15/16 Pro Max | 430pt | Wider bubbles (~335pt), larger avatars |
| iPad (portrait) | 768pt | Split view: list (~320pt) + thread; thread content max ~680pt centered |
| iPad (landscape) | 1024pt+ | Persistent list + thread; effects render in the thread pane |
Dynamic Type
- Message body, contact headline, list preview: full scale (xSmall → AX5)
- Timestamps, "Delivered/Read", tab/toolbar labels, typing dots: FIXED
- Bubble grows to fit text at the chosen size; max-width % stays constant
Orientation
- Thread supports rotation; bubbles reflow to the new width keeping the ~78% cap
- iPad keeps split view in both orientations; effects play in the thread column
Touch Targets
- Send /
+buttons: 30pt glyph, 44pt hit area - Bubble: full bubble is the long-press target for tapback (min 44pt tall effective)
- Tapback glyphs: 28pt glyph, 44pt hit
- Nav back / FaceTime: 44pt hit
- List row: full-row tap, 60pt tall
Safe Area Handling
- Top: nav bar respects safe area + Dynamic Island
- Bottom: input bar respects home indicator; thread scrolls above the keyboard
- Keyboard: thread content insets animate with the keyboard; input bar rides above it
- Sides: 14pt bubble gutters; full-bleed only for edge attachments
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-imessage {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #0070eb;
--link-hover-color: #0058b8;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #007aff;
--button-text-color: #000000;
--button-hover-bg: #0062cc;
--button-border: none;
--button-border-radius: 19px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 19px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/messaging/imessage/DESIGN.md· 26.1 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.