The X iOS app, dissected. Pure black canvas. Hairline borders at #2F3336. One legacy blue for follow buttons and links — and not a single other accent in sight.
X on iOS is the most restrained app on your phone. Black canvas, white ink, hairline borders. Color appears only where it changes state — and it's always the same legacy Twitter blue.
Tweet rows separated only by 1px #2F3336 hairlines. Avatar 40pt left-rail. Action row at the bottom — comment / repost / heart / view count / share / bookmark — laid out for thumb economics.
Banner image 90pt tall. Avatar 80pt drops 32pt into the body. Follow button white pill, top-right. Tab strip Posts · Replies · Highlights · Media · Likes.
Full-screen sheet. White Post pill stays disabled until you type. 280-char ring fills in legacy Twitter blue, then turns yellow at 260, red over 280.
Tap the bookmark icon and the row becomes a save sheet — Add to Bookmarks, Add to Folder, Share External. The action committed counts up at the bottom of every tweet as a "view count" of bookmarks.
Bookmark icon goes solid blue when saved. Long-press on tweet reveals the same sheet plus translate, copy link, and Grok this post.
icon: 18 → 22pt
saved: #1D9BF0
sheet: 14px radius
Tap the repost icon and a bottom sheet asks: pure repost, or quote with comment. Repost broadcasts as-is. Quote opens the compose sheet with the source post embedded as a card.
Once reposted, the icon goes green #00BA7C until undone. Long-press the repost button to bypass the sheet and go straight to quote.
sheet: bottom 14px
reposted: #00BA7C
haptic: medium on confirm
Verification on X is a tiered system. Blue = X Premium subscriber. Gold = verified organization. Gray = government/multilateral. Each badge renders at the same 14pt scale next to the display name.
The badge is a checkmark inside a starburst — never just a check. The starburst makes it instantly distinguishable from a generic "verified" icon.
blue: #1D9BF0
gold: #FFD700
gray: #71767B
size: 14pt
Every token X's iOS app reaches for — black canvas, hairline ladder, one blue. The discipline IS the design.
Pure black, four shades of near-black for surface elevation, legacy Twitter Blue for everything interactive. The action-row uses three semantic colors — like pink, repost green, view blue — and that's the whole spectrum.
Chirp is the production face, substituted here with Inter. Display names 15/700. Handles 15/400 muted. Body 15/400. Numbers tabular for engagement counts.
| Token | Sample | Size | Weight | Notes |
|---|---|---|---|---|
| --display-name | Jiang Shu | 15 / 0.94rem | 700 | profile + tweet |
| --handle | @jiang.shu | 15 / 0.94rem | 400 | muted |
| --tweet-body | the only design rule that matters. | 15 / 0.94rem | 400 | line 1.4 |
| --link | linear.app | 15 / 0.94rem | 400 | accent |
| --profile-name | Jiang Shu | 20 / 1.25rem | 800 | profile header |
| --engagement | 24.1K | 13 / 0.81rem | 500 (tnum) | action row |
| --time | · 2h | 13 / 0.81rem | 400 | relative |
| --tab-label | For You | 15 / 0.94rem | 700 | active state |
| --ad-tag | Ad | 13 / 0.81rem | 500 | tweet eyebrow |
Media at 16px. Buttons full pill. Avatars circle. Cards rarely have radius — most boundaries are hairlines, not corners.
Anchors that survive across iPhone 12 mini through iPhone 16 Pro Max.