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
24tokens
7type steps
3radius steps
2pxspacing base
Messenger, in one page
Messenger's iOS app is the most expressive mainstream messaging surface — playful, colorful, and built for reactions rather than restraint. Where a privacy-first messenger whispers, Messenger performs. The defining visual is the outgoing message bubble: not a flat color but a vivid diagonal gradient sweeping from electric blue (#0A7CFF) through violet (#9D4EDD) into pink (#FF5CA0). The gradient is anchored to the *conversation*, not the bubble — it flows continuously down a run of your messages as if they were drawn on one ribbon, so a thread looks like a stream of color rather than disconnected chips. Incoming messages stay neutral gray, keeping the visual energy on "you."
The canvas itself is calm white (#FFFFFF) in light mode and true black (#000000) in dark mode — Messenger uses pure black in dark mode (unlike privacy-minimal apps), which makes the gradient bubbles glow against it. Chrome is round and friendly: circular "chat head" avatars everywhere, pill search fields, fully-rounded bubbles (18pt). The signature interaction is the reactions popover — long-press any message and a floating row of six emoji (👍 ❤️ 😆 😮 😢 😡) springs up above the bubble with a bouncy scale animation; tapping one drops a small reaction badge onto the bubble's corner. The send affordance is a big friendly blue thumb/arrow that doubles as a one-tap "like" (the iconic thumbs-up) when the composer is empty.
Typography is Inter / SF at weights 400 / 600 / 700 — clean and legible, deferring to the color and motion for personality. Conversation names are 17pt semibold, message bodies 16pt regular, the active-now green dot and reaction badges carry meaning at small sizes. Bottom tabs are minimal (Chats / Marketplace / Stories). The overall feel is "a conversation that's fun to be in": rounded, gradient-lit, reaction-forward, and motion-rich — the opposite of utilitarian, intentionally so.
Key Characteristics:
- Gradient outgoing bubble — diagonal
#0A7CFF → #9D4EDD → #FF5CA0, anchored to the conversation and flowing down the whole run - Incoming bubbles stay neutral gray — energy stays on "you"
- White light canvas (
#FFFFFF) / true-black dark canvas (#000000) — black makes the gradient glow - Reactions popover — long-press → floating row of 6 emoji with a bouncy spring; tap drops a corner badge
- Circular chat-head avatars everywhere — friendly, round, ever-present
- Big-thumb send — a friendly blue circle that is a one-tap thumbs-up "like" when the composer is empty
- Active-now green dot — a
#31D158presence ring on avatars - Fully-rounded 18pt bubbles, pill search, round everything
- Inter / SF at 400/600/700 — type defers to color and motion
- Bottom tabs: Chats / Marketplace / Stories
Do's and don'ts
Do
- Render the outgoing bubble as a
#0A7CFF → #9D4EDD → #FF5CA0gradient anchored to the conversation, flowing down the whole run - Keep incoming bubbles flat neutral gray — energy stays on "you"
- Use white (
#FFFFFF) light canvas and TRUE black (#000000) dark canvas — black makes the gradient glow - Make the reactions popover bouncy: spring enter, staggered emoji pop, landing bounce
- Show a blue thumbs-up in the empty composer that one-tap sends a 👍 and morphs to send on text
- Put a
#31D158active-now dot on avatars — Messenger foregrounds presence - Use circular chat-head avatars everywhere; round all bubbles to 18pt
- Keep type clean (Inter 400/600/700) — color and motion carry the personality
Don't
- Don't make outgoing bubbles a flat single color — the conversation-anchored gradient is the brand
- Don't gradient the incoming bubbles — they stay flat gray
- Don't use soft-black in dark mode — Messenger uses pure
#000000so the gradient luminesces - Don't make the reactions popover stiff — it must bounce and stagger
- Don't show the filled send button when the composer is empty — it's a thumbs-up then
- Don't color body text for unread — go bold (700) + a small blue dot instead
- Don't add a second solid accent — blue is the UI accent; the gradient is bubble-only
- Don't use display-size type — the 28pt large title is the ceiling
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 Messenger design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Gradient Blue: #0a7cff
- Gradient Violet: #9d4edd
- Gradient Pink: #ff5ca0
- Blue Pressed: #0866d6
- Like Thumb: #0a7cff
- Canvas White: #ffffff
- Surface Gray: #f1f1f2
- Incoming Bubble: #f1f1f2
- Divider: #e4e6eb
- Text Primary: #050505
Type:
- families: Inter, Fallback Stack, Emoji, Weights
- scale: 10, 12, 13, 15, 16, 17, 28
- weights: 400, 600, 700
Shape:
- radius: 18, 20, 28
Spacing: 2, 9, 13
Rules:
- Render the outgoing bubble as a `#0A7CFF → #9D4EDD → #FF5CA0` gradient anchored to the conversation, flowing down the whole run
- Keep incoming bubbles flat neutral gray — energy stays on "you"
- Use white (`#FFFFFF`) light canvas and TRUE black (`#000000`) dark canvas — black makes the gradient glow
- Make the reactions popover bouncy: spring enter, staggered emoji pop, landing bounce
- Show a blue thumbs-up in the empty composer that one-tap sends a 👍 and morphs to send on text
- Put a `#31D158` active-now dot on avatars — Messenger foregrounds presence
Avoid:
- Don't make outgoing bubbles a flat single color — the conversation-anchored gradient is the brand
- Don't gradient the incoming bubbles — they stay flat gray
- Don't use soft-black in dark mode — Messenger uses pure `#000000` so the gradient luminesces
- Don't make the reactions popover stiff — it must bounce and stagger
- Don't show the filled send button when the composer is empty — it's a thumbs-up then
- Don't color body text for unread — go bold (700) + a small blue dot instead
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (the Gradient)
- Gradient Blue (
#0A7CFF): Start of the outgoing-bubble gradient, send button, links, primary actions, active tab. - Gradient Violet (
#9D4EDD): Mid-stop of the outgoing-bubble gradient. - Gradient Pink (
#FF5CA0): End-stop of the outgoing-bubble gradient. - Blue Pressed (
#0866D6): Pressed state for solid-blue controls (send, primary buttons). - Like Thumb (
#0A7CFF): The thumbs-up reaction + the empty-composer "like" button.
Canvas & Surface (Light)
- Canvas White (
#FFFFFF): Chat list, thread background, navigation. - Surface Gray (
#F1F1F2): Search field, grouped sections, composer field background. - Incoming Bubble (
#F1F1F2): Left-aligned received message bubble (light). - Divider (
#E4E6EB): Hairline dividers between list rows. - Text Primary (
#050505): Conversation names, incoming text, primary labels. - Text Secondary (
#65676B): Previews, timestamps, secondary labels. - Text Tertiary (
#8A8D91): Placeholders, disabled labels.
Canvas & Surface (Dark)
- Dark Canvas (
#000000): Chat list, thread background (true black — makes gradient glow). - Dark Surface (
#1C1C1D): Search field, grouped sections. - Dark Incoming Bubble (
#303030): Received message bubble (dark). - Dark Divider (
#3A3B3C): Hairline dividers in dark mode. - Dark Text Primary (
#E4E6EB): Conversation names, incoming text (dark). - Dark Text Secondary (
#B0B3B8): Previews, timestamps (dark).
Message-Specific
- Outgoing Text (
#FFFFFF): Text on the gradient bubble (both modes). - Outgoing Meta (
#FFFFFFCC): Time + delivery status inside an outgoing bubble (80% white). - Reaction Badge BG (
#FFFFFFlight /#000000dark): Pill behind the corner reaction emoji + count, with a hairline ring.
Semantic
- Active Now Green (
#31D158): Presence dot/ring on avatars (online indicator). - Typing Dots (
#65676B): The animated "…" typing indicator in a gray bubble. - Unread Blue (
#0A7CFF): Unread conversation dot + bold name. - Error Red (
#FA383E): Failed-to-send, destructive actions. - Success Green (
#31A24C): "Sent", confirmation toasts.
Type scaleRead the full spec
Font Family
- Primary:
Inter(matches Messenger's clean grotesque tone; SF Pro is the native fallback) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Emoji: system color emoji (Apple Color Emoji) — reactions are real emoji glyphs
- Weights: 400 (regular), 600 (semibold), 700 (bold)
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | Inter | 28pt | 700 | 1.2 | -0.3pt | "Chats" nav large title |
| Conversation Name | Inter | 17pt | 600 | 1.3 | 0pt | Row title in chat list (bold 700 if unread) |
| Thread Title | Inter | 16pt | 600 | 1.25 | 0pt | Contact/group name in chat header |
| Message Body | Inter | 16pt | 400 | 1.4 | 0pt | The bubble text — core reading size |
| Message Preview | Inter | 15pt | 400 | 1.3 | 0pt | Last-message snippet (semibold if unread) |
| Section Header | Inter | 13pt | 700 | 1.2 | 0.2pt | Grouped section labels |
| Timestamp (Row) | Inter | 13pt | 400 | 1.2 | 0pt | Time on a conversation row |
| Bubble Meta | Inter | 12pt | 400 | 1.2 | 0pt | Time + delivery inside/under a bubble |
| Reaction Count | Inter | 12pt | 600 | 1.0 | 0pt | Number beside a corner reaction emoji |
| Button (Primary) | Inter | 16pt | 600 | 1.0 | 0pt | Blue primary button labels |
| Button (Text) | Inter | 16pt | 600 | 1.0 | 0pt | Blue text actions |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Active Now | Inter | 12pt | 400 | 1.2 | 0pt | "Active now" / "Active 5m ago" |
| System Message | Inter | 13pt | 400 | 1.35 | 0pt | "You named the group …" centered note |
Principles
- Type defers to color and motion: the gradient + reactions carry personality, so text stays clean and quiet
- Unread is bold, not colored: an unread conversation goes weight 700, with a small blue dot — never colored text
- Message body at 16pt / line-height 1.4: comfortable and compact
- Emoji are first-class: reactions render as full-color system emoji at meaningful sizes (24pt in the popover)
- Dynamic Type respected on names and bodies; bubble meta, reaction counts, tab labels are layout-fixed
- Weights 400/600/700 only — no light, no display type
Components and layoutRead the full spec
Buttons
Big-Thumb Send (Signature)
- Shape: Circle, diameter 32pt (composer-trailing)
- Empty composer: a thumbs-up glyph
hand.thumbsup.fill20pt in#0A7CFF, no fill background (tap = send a 👍 "like") - With text: a filled
#0A7CFFcircle with a white paper-plane/arrow 16pt - Transition: glyph morphs thumbs-up → filled-send with a 180ms spring as text appears
- Pressed: scale 0.90,
#0866D6if filled, soft haptic - Long-press the empty-state thumb: scales the 👍 up for a "big like" (super-size reaction)
Primary Button ("Create", "Send Invite")
- Background:
#0A7CFF(solid blue — the gradient is reserved for bubbles) - Text:
#FFFFFF, Inter 16pt weight 600 - Padding: 13pt vertical, full-width (16pt horizontal inset)
- Corner radius: 20pt (pill-ish, friendly)
- Pressed:
#0866D6, scale 0.99
Text Button ("Edit", "Done")
- Inter 16pt weight 600, color
#0A7CFF - No background; 44pt hit area; pressed opacity 0.5
Reaction Pill (on a bubble)
- A small rounded pill anchored to the bubble's bottom corner
- Background:
#FFFFFF(light) /#000000(dark) with a 1pt#E4E6EB/#3A3B3Cring - Content: the emoji (16pt) + optional count (Inter 12pt w600
#65676B) - Multiple reactions stack horizontally; tap opens the reaction detail sheet
Icon Action (Camera, Photo, Mic, GIF, Call, Video, Info)
- Glyph 22pt, hit area 44pt
- Default:
#0A7CFF(Messenger tints action glyphs blue, not gray) - In-thread header call/video:
#0A7CFF
Cards & Containers
Conversation Row
- Height: 72pt
- Layout: 56pt circular avatar with optional green active-ring (leading) → name (17pt w600, 700 if unread) + last-message preview (15pt w400
#65676B, 1-line clamp) → trailing: timestamp (13pt) + unread blue dot - Active-now: a
#31D15814pt dot on the avatar's bottom-right with a 2pt canvas-color ring - Background: canvas; pressed
#F1F1F2(light) /#1C1C1D(dark) - Divider: hairline
#E4E6EBinset to text origin
Message Bubble — Outgoing (Gradient, Signature)
- Background: a diagonal linear gradient
#0A7CFF → #9D4EDD → #FF5CA0(≈135°) - Conversation-anchored: the gradient spans the full vertical extent of the visible thread, each bubble shows the slice of the ribbon at its position — a run of your messages reads as one continuous color flow
- Text:
#FFFFFF, Inter 16pt w400 - Padding: 9pt vertical, 14pt horizontal
- Corner radius: 18pt, with the tail-side corner tightened to 6pt on the last bubble of a same-sender run
- Meta: time + delivery (sent/delivered/seen avatar) below the bubble, 12pt
#FFFFFFCCor#65676B - Max width: 72% of thread width; right-aligned with 10pt trailing inset
Message Bubble — Incoming
- Background:
#F1F1F2(light) /#303030(dark) — flat, neutral - Text:
#050505(light) /#E4E6EB(dark), Inter 16pt w400 - Corner radius: 18pt, bottom-left tightened to 6pt on last of run
- Group sender avatar (28pt) shown once at the run's bottom-left
- Max width: 72%; left-aligned with 10pt leading inset
Reactions Popover (Signature)
- Triggered by long-press on any bubble
- A floating capsule above the bubble: 6 emoji (👍 ❤️ 😆 😮 😢 😡) at 30pt, 12pt gaps, plus a "+" to open the full picker
- Background:
#FFFFFF(light) /#1C1C1D(dark), corner radius 28pt (full pill), shadowrgba(0,0,0,0.18) 0 8px 28px - Enter: scales 0.7 → 1.0 with a spring (damping 0.6) + each emoji has a 20ms staggered pop
- On selection: chosen emoji animates down and lands as a corner reaction badge with a bounce
Typing Indicator
- A gray incoming-style bubble containing three
#65676Bdots that bounce in sequence (the "…") - Same radius/inset as an incoming bubble
Stories Tray
- Horizontal row at the top of Chats (or its own tab): circular avatars with a gradient ring for unseen Stories
- "Your story" tile with a blue "+" badge leading
Navigation
Bottom Tab Bar
- Height: 50pt + safe area
- Background:
#FFFFFF(light) /#000000(dark), top hairline#E4E6EB/#3A3B3C - Tabs: Chats, Marketplace, Stories
- Icon 26pt; active
#0A7CFF, inactive#65676B - Labels: Inter 10pt w600, always shown
- Chats: unread total badge
#FA383E(red) with white count
Chat List Top Bar
- Large title "Chats" (28pt w700), profile avatar (32pt circular) leading on scroll
- Trailing: new-message compose glyph (pencil) 22pt
#0A7CFF - Below title: pill search field —
#F1F1F2fill, 36pt, corner radius 18pt, placeholder "Search" - Optional Stories tray row beneath search
Thread Header
- Height: 44pt + safe area, canvas background, bottom hairline
- Leading: back chevron 24pt
#0A7CFF+ 36pt avatar (with active dot) + name (16pt w600) + "Active now" (12pt#65676B) - Trailing: audio-call + video-call glyphs, 22pt
#0A7CFF, 18pt gap - Tap name/avatar: opens conversation info
Input Fields
Composer
- A row of round action glyphs (camera / photo / mic / GIF) in
#0A7CFF, then the pill field - Pill:
#F1F1F2(light) /#1C1C1D(dark), min height 36pt, corner radius 18pt - Field: Inter 16pt w400, placeholder "Aa"
#8A8D91, grows to 5 lines then scrolls - Trailing: emoji glyph inside the pill; outside: the big-thumb send (👍 when empty)
- Focus: action glyphs collapse into a single chevron to give the field room (Messenger's signature collapse)
Search Field
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 64pt rows, bubble max 78%, popover emoji 26pt |
| iPhone 13/14/15 | 390pt | Standard — 72pt rows, popover emoji 30pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the header |
| iPhone 15/16 Pro Max | 430pt | Larger avatars (60pt), wider thread |
| iPad | 768pt+ | Master-detail split: list (left, 360pt) + thread (right) |
Dynamic Type
- Conversation names, message bodies, previews: full scale
- Message body caps at ~22pt; bubble grows with content
- Bubble meta, reaction counts, tab labels: layout-fixed (do not scale)
- Reactions popover emoji: fixed size (gesture-sensitive layout)
Orientation
- Chat list / thread: portrait + landscape (landscape widens the thread; gradient re-spans the new height)
- iPad: split view in both orientations
- Media viewer / video call: rotates freely
Touch Targets
- Big-thumb send: 32pt visual, 44pt effective hit
- Reactions popover emoji: 44pt effective hit each (even though rendered ~30pt)
- Conversation rows: full 72pt row tappable
- Tab items: 26pt icon, 49pt hit
Safe Area Handling
- Top: large title + search respect safe area / Dynamic Island
- Bottom: composer + tab bar respect home indicator; composer rises with the keyboard
- Sides: 10pt thread insets, 16pt list insets
- Reactions popover repositions to stay on-screen near edges
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-messenger {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #050505;
--heading-color: #050505;
--link-color: #0069e1;
--link-hover-color: #0051ae;
--border-color: #d2d2d2;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(5,5,5,0.06);
--card-hover-shadow: 0 6px 18px rgba(5,5,5,0.12);
--header-bg: #050505;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #5d5d5d;
--button-bg: #0a7cff;
--button-text-color: #000000;
--button-hover-bg: #0064d6;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #050505;
--button-secondary-hover-bg: #e1e1e1;
--button-secondary-border: 1px solid #d2d2d2;
--prompt-bg: #f3f3f3;
--prompt-text-color: #050505;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- kashiyama 81.1%
- spotify 78.4%
- signal 75.7%
- hasami porcelain 72.7%
- spotify 71.0%
Where this came from
- Source document
ios/design-md/messaging/messenger/DESIGN.md· 22.7 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.