Chat Platform Specifications
Every measurement our mockup generators use, published as one readable matrix. Values are device-independent points unless marked as device pixels. Free to cite or reuse under our terms.
| Parameter | iMessage (iOS 18) | WhatsApp-style | Messenger-style | Google Messages (Android) |
|---|---|---|---|---|
| Canvas (device px @3×) | 1206 × 2622 | 1080 × 2400 | 1080 × 2400 | 1080 × 2400 |
| Logical size (pt) | 402 × 874 | 360 × 800 | 360 × 800 | 360 × 800 |
| Safe top (pt) | 62 | 32 | 32 | 24 |
| Status bar height (pt) | 62 | 24 | 24 | 24 |
| Status bar | ios-island · signal, wifi, battery | android · signal, wifi, battery | ramless · signal, wifi, battery | android · dual-sim, signal, wifi, battery |
| Island / cutout (pt) | 125.3 × 36.7 @ top 14 | — | — | — |
| Calibration | A — iPhone 17 Pro simulator, iOS 26.4 (2026-10-22) | B — document values, pending device pass | B — document values, pending device pass | B — document values, pending device pass |
| Header height (pt) | 44 | 56 | 56 | 64 |
| Bubble max width | 72% | 75% | 70% | 75% |
| Bubble padding x / y (pt) | 16 / 10 | 18 / 12 | 18 / 12 | 20 / 12 |
| Bubble radius (pt) | 18 | 7.5 | 18 | 20 |
| Bubble tail | round | point | round | round |
| Text size / line height (pt) | 17 / 22 | 14.2 / 19 | 15 / 20 | 16 / 21 |
| Receipts | word: Sent / Delivered / Read | double tick | none | word: Sending / Sent / Delivered / Read |
| Composer placeholder | iMessage | Message | Aa | Text message |
| Timestamp position | below | inside | inside | inside |
| Outgoing / incoming bubbles (light) | #0B93F6 / #E9E9EB | #DCF8C6 / #FFFFFF | #0084FF / #F0F0F0 | #D3E3FD / #F1F3F4 |
| Outgoing / incoming bubbles (dark) | #0B93F6 / #26252A | #005C4B / #202C33 | #0084FF / #3A3B3C | #3D4F6B / #2D2F31 |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 | 0 / 0.35 / 0.6 | 0 / 0.35 / 0.6 | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 | 1 / 0.95 / 0.9 | 1 / 0.95 / 0.9 | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
iMessage (iOS 18)
Blue outgoing bubbles, a Dynamic Island status bar and an iOS 14–18 version matrix.
- OS range
- iOS 14 – 18
- Dark-mode notes
- Wallpaper dim 0.35, bubble alpha 0.95, status bar ink #FFFFFF.
| Parameter | iMessage (iOS 18) |
|---|---|
| Canvas (device px @3×) | 1206 × 2622 |
| Logical size (pt) | 402 × 874 |
| Safe top (pt) | 62 |
| Status bar height (pt) | 62 |
| Status bar | ios-island · signal, wifi, battery |
| Island / cutout (pt) | 125.3 × 36.7 @ top 14 |
| Calibration | A — iPhone 17 Pro simulator, iOS 26.4 (2026-10-22) |
| Header height (pt) | 44 |
| Bubble max width | 72% |
| Bubble padding x / y (pt) | 16 / 10 |
| Bubble radius (pt) | 18 |
| Bubble tail | round |
| Text size / line height (pt) | 17 / 22 |
| Receipts | word: Sent / Delivered / Read |
| Composer placeholder | iMessage |
| Timestamp position | below |
| Outgoing / incoming bubbles (light) | #0B93F6 / #E9E9EB |
| Outgoing / incoming bubbles (dark) | #0B93F6 / #26252A |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
WhatsApp-style
Green outgoing bubbles, double ticks, wallpapers, lock screens and DM layouts.
- OS range
- Android 13 – 15 / iOS 15 – 18
- Dark-mode notes
- Wallpaper dim 0.35, bubble alpha 0.95, status bar ink #FFFFFF.
| Parameter | WhatsApp-style |
|---|---|
| Canvas (device px @3×) | 1080 × 2400 |
| Logical size (pt) | 360 × 800 |
| Safe top (pt) | 32 |
| Status bar height (pt) | 24 |
| Status bar | android · signal, wifi, battery |
| Island / cutout (pt) | — |
| Calibration | B — document values, pending device pass |
| Header height (pt) | 56 |
| Bubble max width | 75% |
| Bubble padding x / y (pt) | 18 / 12 |
| Bubble radius (pt) | 7.5 |
| Bubble tail | point |
| Text size / line height (pt) | 14.2 / 19 |
| Receipts | double tick |
| Composer placeholder | Message |
| Timestamp position | inside |
| Outgoing / incoming bubbles (light) | #DCF8C6 / #FFFFFF |
| Outgoing / incoming bubbles (dark) | #005C4B / #202C33 |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
Messenger-style
Blue gradient bubbles with rounded geometry for DM and notification layouts.
- OS range
- iOS 15 – 18 / Android 13 – 15
- Dark-mode notes
- Wallpaper dim 0.35, bubble alpha 0.95, status bar ink #FFFFFF.
| Parameter | Messenger-style |
|---|---|
| Canvas (device px @3×) | 1080 × 2400 |
| Logical size (pt) | 360 × 800 |
| Safe top (pt) | 32 |
| Status bar height (pt) | 24 |
| Status bar | ramless · signal, wifi, battery |
| Island / cutout (pt) | — |
| Calibration | B — document values, pending device pass |
| Header height (pt) | 56 |
| Bubble max width | 70% |
| Bubble padding x / y (pt) | 18 / 12 |
| Bubble radius (pt) | 18 |
| Bubble tail | round |
| Text size / line height (pt) | 15 / 20 |
| Receipts | none |
| Composer placeholder | Aa |
| Timestamp position | inside |
| Outgoing / incoming bubbles (light) | #0084FF / #F0F0F0 |
| Outgoing / incoming bubbles (dark) | #0084FF / #3A3B3C |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
Google Messages (Android)
Material-style bubbles with RCS read receipts and dual-SIM status icons.
- OS range
- Android 13 – 15
- Dark-mode notes
- Wallpaper dim 0.35, bubble alpha 0.95, status bar ink #FFFFFF.
| Parameter | Google Messages (Android) |
|---|---|
| Canvas (device px @3×) | 1080 × 2400 |
| Logical size (pt) | 360 × 800 |
| Safe top (pt) | 24 |
| Status bar height (pt) | 24 |
| Status bar | android · dual-sim, signal, wifi, battery |
| Island / cutout (pt) | — |
| Calibration | B — document values, pending device pass |
| Header height (pt) | 64 |
| Bubble max width | 75% |
| Bubble padding x / y (pt) | 20 / 12 |
| Bubble radius (pt) | 20 |
| Bubble tail | round |
| Text size / line height (pt) | 16 / 21 |
| Receipts | word: Sending / Sent / Delivered / Read |
| Composer placeholder | Text message |
| Timestamp position | inside |
| Outgoing / incoming bubbles (light) | #D3E3FD / #F1F3F4 |
| Outgoing / incoming bubbles (dark) | #3D4F6B / #2D2F31 |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
Download
The same matrix as machine-readable JSON, generated from the renderer's own data at build time: specs.json. Free to cite or reuse under our terms.
Change log
— initial publication of starting values; calibration against device screenshots is pending.