iOS Design Spec

# Everything you want
is happening right now.

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.

View Design Tokens Explore Surfaces
9:41
JS
Jiang Shu
@jiang.shu
Designer in Shenzhen. Building things that explain themselves. Co-conspirator on the side.
Shenzhen
Joined Mar 2014
jiangshu.dev
847 Following
12.4K Followers
Posts
Replies
Highlights
Media
Likes
Profile
9:41
J
For You
Following
M
marie
@marie·2h
the only design rule that matters is: does this earn its position on the screen.
142
8.4K
24.1K
412K
D
Ad
Linear
@linear
Built for the way modern software teams actually plan. linear.app
C
cosmo@cosmo·4h
paris in may is just better than paris in any other month, fight me
22
312
1.8K
88K
For You
9:41
Cancel
Drafts
Everyone can reply
J
The best thing about a black canvas is that it doesn't have an opinion about your post. The post does the talking.
+
Compose
iOS Surface Anatomy

## Three surfaces. One pure black canvas.

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.

### Timeline

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.

### Profile

Banner image 90pt tall. Avatar 80pt drops 32pt into the body. Follow button white pill, top-right. Tab strip `Posts · Replies · Highlights · Media · Likes`.

### Compose

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.

Bookmarks

### The save gesture that's faster than a screenshot.

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`
Save to bookmarks
All Bookmarks
Design tokens
New folder
Repost
Share this post immediately
Quote
Add a comment of your own
Repost vs Quote

### Two amplifications, one button.

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`
Verified Hierarchy

### Blue checks, gold checks, gray checks.

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`
J
Jiang Shu
Premium subscriber
L
Linear
Verified organization
G
Government Dept.
Gray check · official
Design System Reference

## The whole vocabulary, in one place.

Every token X's iOS app reaches for — black canvas, hairline ladder, one blue. The discipline IS the design.

View Source ↗

### Color

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.

Primary Brand
Pure Black
#000000
White Ink
#ffffff
Twitter Blue
#1D9BF0
Blue Hover
#1A8CD8
Gold Verified
#FFD700
Surface (elevation ladder)
Surface 1
#16181C
Surface 2
#1D1F23
Surface 3
#202327
Border
#2F3336
Canvas Soft
#0a0a0a
Text
Ink
#ffffff
Ink Soft
#E7E9EA
Ink Mid
#D7DBDC
Muted
#71767B
Dim
#5A5E62
Action Row Semantics
Reply
#1D9BF0
Repost
#00BA7C
Like
#F91880
Bookmark
#1D9BF0
Idle
#71767B

### Typography

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

### Radius

Media at 16px. Buttons full pill. Avatars circle. Cards rarely have radius — most boundaries are hairlines, not corners.

Min
2px
Hover
4px
Input
8px
Card
12px
Sheet
14px
Media
16px
Pill
∞
Avatar
50%

### iOS Spec Strip

Anchors that survive across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar
49pt
Five tabs. Icons outline by default, filled on active.
Avatar
40pt
36pt in DM list. 80pt on profile, -32pt into body.
Tweet padding
12 × 16pt
Hairline divider only — no card, no shadow.
Banner
200pt
3:1 aspect. Avatar floats over the bottom edge.
Action icons
18pt
Stroke 1.6pt. Heart fills on like with bounce.
FAB compose
56pt
Bottom-right, 16pt inset. #1D9BF0 fill.
Hairline
1pt
#2F3336. Replaces card chrome on the timeline.
Status bar
50pt
Time + battery; logo centered below in tl-head.

### Components

Pills, hairlines, action icons. The atom is the tweet row — Profile, Compose, and DM all wrap variants of it.

##### Buttons

Follow Following Cancel

##### Inputs & Tags

Ad Verified Org

##### Tweet Row

M
marie @marie · 2h
the only design rule that matters
142
8.4K
24K
View source ↗