iOS Design Spec

# Words first.
Everything else, hairline-quiet.

The Threads iOS app, dissected. Pure black canvas. Zero accent color. The conversation does the talking; the interface vanishes into the gutter.

View Design Tokens Explore Surfaces
9:41
Activity
All
Follows
Replies
Mentions
Quotes
Reposts
marie_kn liked your thread
"Golden hour over the Tagus 🌅"
2h
joao_s replied:
"That second photo is unreal"
5h
akira.l reposted your thread
8h
nikodi started following you
1d
pedrofx and 12 others liked your reply
2d
Activity
9:41
For you
Following
marie_kn
2h
When the golden hour hits at exactly the right second 🌅
joao_s 5h
That second photo is unreal. What time exactly?
For you
9:41
Jiang Shu
jiang.shu instagram.com/jiang.shu
Writer · designer. Building things that respect the reader's time. Lisbon → Tokyo.
8,402 followers · instagram.com/jiang.shu
Edit profile
Share profile
Threads
Replies
Media
Reposts
jiang.shu 2h
When the golden hour hits at exactly the right second 🌅
jiang.shu 1d
A small ritual: phone face-down, kettle on, no music for the first hour.
Profile
iOS Surface Anatomy

## Three surfaces. Hairline between each idea.

Threads's app prizes typographic restraint above all. There are no card shadows, no rounded backgrounds for posts, no accent colors saying "look here." Just text, a hairline below it, and the next thought.

### For you

Two-tab strip (For you · Following) with white-underline active state. Posts sit edge-to-edge on the black canvas, separated only by a 1px hairline at `#1f1f1f`. No card chrome, no shadows.

### Activity

Eight filter chips (All / Follows / Replies / Mentions / Quotes / Reposts / Verified / Likes) — outline by default, white-fill on active. Rows show a tiny colored badge in the avatar's bottom-right corner indicating event type.

### Profile

Name big 24/800, handle 13/500 muted, Instagram-handle pill (the only "card" on the page). Bio + follower count + mutual-follower avatars. Edit/Share buttons are outlined — never filled.

Multi-part thread

### A pole that connects one idea to the next.

When a user posts a thread of replies to themselves, Threads renders a 2px vertical pole between each avatar, anchoring child posts to their parent. The pole is the only "structural" graphic in the app — everything else is just type.

The pole color is the same hairline gray (`#252525`) used for post separators — it has to be visible but never demand attention.

`width: 2px` `color: #252525` `radius: 1px` `margin: 4px from avatar`
marie_kn
When the golden hour hits at exactly the right second 🌅
marie_kn
Took 47 shots to get that one.
marie_kn
The fish came out of nowhere honestly.
joao_s
5h
That second photo is unreal. The light wraps around the bird in a way you can't fake.
Quote card

### A second voice, framed in a hairline.

When a user quotes another post, the quoted content renders inside a 1px-bordered rounded rectangle — the ONLY card-like surface in the app's content stream. The card is 14px radius, sits flush with the body text, never carries a fill.

If the quoted author is verified, the blue check appears at the inline baseline. Original post timestamp is right-aligned in the card header.

`border: 1px #252525` `radius: 14px` `padding: 14px` `fill: transparent`
Activity filter chips

### Eight states, one row, no panic.

The Activity screen uses an outline-by-default, fill-on-active chip system — 8 chips that scroll horizontally without ever wrapping. Active chip swaps to white fill with black ink. Border color matches the canvas surface ladder.

The chips never use brand colors; the system stays purely monochrome so the activity content (avatars + body text) gets every drop of attention.

`idle: border #252525` `active: fill #fff` `radius: 9999px` `padding: 6 × 14`
All
Follows
Replies
Mentions
Quotes
Reposts
Verified
Likes
Design System Reference

## Black, white, hairline. And exactly two accent colors.

Every token Threads's iOS app reaches for — surface ladder, type ramp, radius scale, components. Inherited Meta-blue verified check and Instagram-red heart are the only chromatic notes — everything else is built from a five-stop gray ladder.

View Source ↗

### Color

A purely monochrome chassis. Inherited Meta-blue verified check and Instagram-red heart are the only chromatic notes in the entire app — everything else (typography, separators, chrome) is built from a five-stop gray ladder.

Canvas & Surface
Canvas
#000000
Canvas Soft
#0a0a0a
Surface 1
#101010
Surface 2
#1a1a1a
Surface 3
#262626
Ink
Ink
#ffffff
Ink Soft
#e5e5e5
Ink Muted
#a8a8a8
Ink Dim
#777777
Ink Faint
#4d4d4d
Border
Border
#252525
Hairline
#1f1f1f
Border Soft
#161616
Outline
#2a2a2a
Divider
#333333
The Only Two Accents
Verified
#0095F6
Like Heart
#ED4956
No others
— —
No others
— —
No others
— —

### Typography

Meta's homegrown Inter (literally — Threads uses Inter as the system font, no substitution needed). Display 22-24 for screen titles. Body 15/400 with comfortable line-height. Display name 15/600, handle 15/400 muted.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--prof-name | Jiang Shu | 24 / 1.5rem | 800 | -0.5px
--screen-title | Activity | 17 / 1.06rem | 700 | normal
--display-name | marie_kn | 15 / 0.94rem | 600 | normal
--handle | jiang.shu | 13 / 0.81rem | 500 | normal
--body | When the golden hour hits at exactly the right second 🌅 | 15 / 0.94rem | 400 | normal
--meta | 218 replies · 12.4K likes | 13 / 0.81rem | 400 | normal
--timestamp | 2h | 12 / 0.75rem | 400 | normal
--tab | For you

13 / 0.81rem 600 normal
--chip Replies 12 / 0.75rem 600 normal

### Radius

The card was not invented in this app. The only radius that matters lives in two places: media (12px) and the quote-card (14px). Everything else is either a circle (avatar, like burst) or a pill (chip, button) or a flat hairline.

Hairline
0px
Min
2px
Tag
6px
Button
8px
Media
12px
Quote
14px
Pill
9999px
Avatar
50%

### iOS Spec Strip

The constants that anchor the iOS implementation.

Post separator
1px
Hairline #1f1f1f. No padding bleed — sits flush with screen edges.
Avatar (feed)
34pt
36pt on Activity rows. 54pt on Profile. Always perfect circle.
Thread pole
2pt
Connects parent → child in self-replies. Color matches separator.
Action stroke
1.6pt
Heart, reply, repost, share — all outlined. Hearts fill on tap.
Quote card
14pt
The only card-like surface. 1pt border, no fill.
Filter chip
28pt
Height. Pill shape. Outline → white-fill on active.
Tab indicator
1pt
White underline, 30-70% of tab width, centered.
Animation
spring
0.5 response, 0.85 damping. Subtle — Threads is anti-bouncy.

### Components

A vocabulary that refuses ornament. Buttons are either white-on-black (primary) or outlined-on-black (secondary). No fills. No gradients.

##### Buttons

Join Threads Edit profile Share profile Cancel

##### Inputs

Liked Verified Replies

##### Post components

marie_kn
Magic hour over the Tagus 🌅
218 replies · 12.4K likes
View source ↗