X Twitter Design System — Colours, Type and a Ready Prompt

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

6type steps

2radius steps

8pxspacing base

X Twitter, in one page

X's iOS app is a newsroom collapsed into a phone screen. The default canvas is pure black (#000000) — a deliberate choice that pairs OLED battery savings with the stark, reportage-style aesthetic X has cultivated since the 2023 rebrand from Twitter. Every post sits on a full-bleed black sheet divided by hairline rules in cool neutral gray (#2F3336), and the UI chrome is monochrome except for one surviving accent: the legacy Twitter Blue (#1D9BF0) used for links, mentions, the verified checkmark on legacy accounts, and the "Reply" action color. The feeling is dense, serious, and real-time — closer to a Bloomberg terminal than a social app.

The post is the unit of everything. A tweet (or "post") fills the viewport edge-to-edge at 16pt horizontal insets, anchored by a 32pt circular avatar on the leading side and a trailing ... overflow. Below the text: a horizontal action row of five interactions — reply, repost, like, views, share — each a thin-line icon in neutral gray that animates to its role color on tap (reply to blue, repost to green #00BA7C, like to red/pink #F91880). The animation choreography on these taps is X's most recognizable micro-interaction: a subtle scale bounce on the icon, a haptic tick, and the count number ticking up beside it. Nothing else in the app has this level of polish — the rest is utilitarian.

Typography is Chirp (proprietary, 2021, commissioned by Twitter from Swiss Typefaces & Grilli Type), a grotesque sans with a deliberately awkward italic and sharp terminals tuned for tight-line reading at 15pt. Body type sits at 15pt weight 400 on a 20pt line height — a conversational density that fits 3-5 posts per viewport on a standard iPhone. Headlines (display names, trending titles, hero moments) step up to 17-20pt weight 700. There is no display-size type anywhere in the core app; the biggest moment is the user-profile header name at 20pt. Everything else is UI-first, information-first, and flat. A dim mode canvas #15202B (a desaturated navy) offers an alternative for users who want dark-without-contrast, and a high-contrast light mode on #FFFFFF is available but the app's gravity is black.

Key Characteristics:

Pure-black OLED canvas (#000000) with dim-mode #15202B and light-mode #FFFFFF alternates
Twitter Blue (#1D9BF0) as the structural accent — links, replies, active tab indicator, verified badges
Repost green (#00BA7C) and like pink (#F91880) as the only other accent colors — one per social action
Chirp font (2021) — grotesque sans with idiosyncratic italic, weights 400/500/600/700
Hairline dividers (#2F3336 dark / #EFF3F4 light) — not rules, not cards, just 1pt separators
Dense, info-heavy layout — 3-5 posts per viewport, minimal whitespace between
32pt circular avatars anchoring every post row
Animated action row with per-action color transitions (blue/green/pink) + haptic ticks
X logo replaces the bird — edge-to-edge glyph, monochrome white/black depending on theme
Trending sidebar / "For You" algorithmic feed / "Following" chronological feed split at the top
Community Notes under posts — a gray bordered card with collapsible context

Do's and don'ts

Do

Use pure black #000000 as the default dark canvas — X is committed to true-black OLED
Reserve Twitter Blue #1D9BF0 for links, replies, verified marks, and the active tab underline
Use role-specific colors on action icons: blue (reply/bookmark), green (repost), pink (like)
Keep post rows flat with 1pt hairlines — no shadows, no cards, no elevation between posts
Use the Chirp font at weights 400 and 700 only (with 500 for select labels) — no lights, no extra-bolds
Keep the tab bar icon-only (no labels) — it's the recognizable X pattern
Use 32pt circular avatars leading every post — this is the anchoring element
Animate action icons with per-action color + scale + count tick — pair with .impact(.light) haptic
Treat the X glyph as monochrome — white on dark, black on light, never tinted
Use the FAB Post button inverted from canvas (white on black, black on white) — the deliberate contrast is the brand

Don't

Don't use shadows to separate posts — hairlines are the brand-correct separator
Don't colorize post body text — body text is always primary neutral
Don't add more accent colors beyond blue / green / pink — they map 1:1 to reply / repost / like
Don't use uppercase on button labels — "Post", "Follow", "Subscribe" are in sentence case
Don't use thin font weights — Chirp starts at 400 and tops out at 700
Don't color the X logo — it's monochrome, always
Don't use cards — posts are full-bleed with hairlines, containers are rare
Don't default to light mode — the app opens dark for new users
Don't hide the FAB Post button — the floating compose circle is persistent on feed screens
Don't animate slowly — X's motion is tight, 200-400ms, no hero transitions

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 X Twitter design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Twitter Blue: #1d9bf0
- Blue Pressed: #1a8cd8
- X White: #ffffff
- X Black: #000000
- Canvas Black: #000000
- Surface 1: #16181c
- Surface 2: #1e2024
- Divider: #2f3336
- Dim Canvas: #15202b
- Dim Surface 1: #192734

Type:
- families: Chirp, Fallback Stack, Chirp Display, Chirp UI
- scale: 11, 13, 14, 15, 17, 20
- weights: 400, 700

Shape:
- radius: 16, 18
- elevation: Shadow: `rgba(0,0,0,0.4) 0 4px 12px` (dark mode has no shadow effect, so subtle)

Spacing: 8, 10, 12

Rules:
- Use pure black `#000000` as the default dark canvas — X is committed to true-black OLED
- Reserve Twitter Blue `#1D9BF0` for links, replies, verified marks, and the active tab underline
- Use role-specific colors on action icons: blue (reply/bookmark), green (repost), pink (like)
- Keep post rows flat with 1pt hairlines — no shadows, no cards, no elevation between posts
- Use the Chirp font at weights 400 and 700 only (with 500 for select labels) — no lights, no extra-bolds
- Keep the tab bar icon-only (no labels) — it's the recognizable X pattern

Avoid:
- Don't use shadows to separate posts — hairlines are the brand-correct separator
- Don't colorize post body text — body text is always primary neutral
- Don't add more accent colors beyond blue / green / pink — they map 1:1 to reply / repost / like
- Don't use uppercase on button labels — "Post", "Follow", "Subscribe" are in sentence case
- Don't use thin font weights — Chirp starts at 400 and tops out at 700
- Don't color the X logo — it's monochrome, always

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary

Twitter Blue (#1D9BF0): Legacy accent — links, @mentions, hashtags, active tab icon, reply action, verified (legacy) checkmark. Still present across the UI despite the X rebrand.
Blue Pressed (#1A8CD8): Pressed state on blue CTAs and link taps.
X White (#FFFFFF): Primary "X" logotype on dark canvas; primary CTA background on dark mode (the "Post" button is white-on-black, a deliberate inversion from the old blue bird button).
X Black (#000000): Primary canvas (dark); "Post" button text on dark mode; logotype on light canvas.

Canvas & Surfaces (Dark / Default)

Canvas Black (#000000): Primary OLED canvas.
Surface 1 (#16181C): Card surfaces, sheet backgrounds, compose modal.
Surface 2 (#1E2024): Higher elevation — DM bubbles (received), settings list rows.
Divider (#2F3336): The signature 1pt hairline between posts, list rows, nav sections.
Dim Canvas (#15202B): Dim-mode alternative canvas (navy-tinted dark, not true black).
Dim Surface 1 (#192734): Cards on dim mode.
Dim Divider (#38444D): Dividers on dim mode.

Canvas & Surfaces (Light)

Light Canvas (#FFFFFF): Primary light canvas.
Light Surface 1 (#F7F9F9): Card surfaces, filter chip fills, search bar fill.
Light Surface 2 (#EFF3F4): Higher elevation — compose modal background, selected row.
Light Divider (#EFF3F4): Hairlines in light mode.

Text

Text Primary Dark (#E7E9EA): Body text on dark canvas — not pure white, slightly warm off-white for readability.
Text Primary Light (#0F1419): Body text on light canvas.
Text Secondary Dark (#71767B): @handles, timestamps, metadata on dark.
Text Secondary Light (#536471): @handles, timestamps on light.
Text Tertiary (#71767B): Disabled labels, very low-emphasis copy (shared across modes at lower contrast).

Social Action Colors

Each of the five post-action icons has its own activated color. The colors only appear when the action is toggled on — default state is always #71767B (secondary gray).

Reply Blue (#1D9BF0): Same as Twitter Blue.
Repost Green (#00BA7C): Active repost (retweet) state and the "Reposted by…" banner.
Like Pink (#F91880): Active like / heart-fill state. Not red — a saturated magenta-pink.
Views Gray (#71767B): Views icon stays neutral (it's not an action, it's a count).
Bookmark Blue (#1D9BF0): Bookmark active state — same blue as reply.

Semantic

Verified Gold (#EAB308): Government-official account badge.
Verified Gray (#829AAB): Business verification badge.
Error Red (#F4212E): Post failed, connection lost, destructive confirmations.
Community Notes Surface (#16181C dark / #F7F9F9 light): The bordered context-note card under misleading posts.

Type scaleRead the full spec

Font Family

Primary: Chirp (proprietary, 2021, by Swiss Typefaces & Grilli Type for Twitter) — grotesque sans with distinctive italic, shipped in UI and Display optical sizes.
Fallback Stack: TwitterChirp, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
CJK / Non-Latin: X falls back to system fonts for Chinese/Japanese/Korean/Arabic/Hebrew — iOS SF system fonts carry non-Latin scripts; Chirp is Latin-plus-extended only.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Screen Title (Large)	Chirp Display	20pt	700	1.2	-0.2pt	"Home", "Notifications", profile name on header
Section Header	Chirp Display	17pt	700	1.25	-0.1pt	"What's happening", "Trends for you"
Display Name	Chirp Display	15pt	700	1.3	0pt	Post author's display name in post row
Post Body	Chirp UI	15pt	400	1.33	0pt	The tweet text itself — the core unit
Quoted Post	Chirp UI	14pt	400	1.3	0pt	Quote-tweet embed body
@Handle / Timestamp	Chirp UI	15pt	400	1.3	0pt	`@username · 2h` next to display name — color `#71767B`
Action Count	Chirp UI	13pt	400	1.2	0pt	The number next to reply/repost/like icons
Trending Topic	Chirp Display	15pt	700	1.25	0pt	Trending sidebar topic title
Trending Meta	Chirp UI	13pt	400	1.2	0pt	"Trending in Technology · 24.5K posts"
Primary Button	Chirp UI	15pt	700	1.0	0pt	"Post", "Follow", "Subscribe"
Tab Label	n/a	—	—	—	—	Tabs are icon-only on X (no labels)
DM Body	Chirp UI	15pt	400	1.3	0pt	Direct message bubble text
DM Timestamp	Chirp UI	11pt	400	1.2	0pt	Above each DM cluster, in gray
Link / @Mention	Chirp UI	inherits	400	inherits	0pt	Blue `#1D9BF0` inline inside post body

Principles

Two optical variants: Chirp ships UI (tight, optimized for 13-16pt) and Display (more open, for 17pt+). The app switches at the 17pt threshold.
Italic is idiosyncratic: Chirp's italic has distinctive angular lowercase a and g — use italic only when semantically italic (book titles, emphasis in quoted text), never as a design accent.
Weight concentrated at 400 / 500 / 700: Regular for body, medium for certain labels, bold for names and titles. No thin, no black.
Dynamic Type on body: Post body, DM body, and quoted text all scale with user preference. Display name and timestamp cap at 17pt to preserve post-row layout.
Color on text is structural: Blue for links/mentions, secondary gray for handles/timestamps, primary off-white for body. Never colorize body text for decoration.

Components and layoutRead the full spec

Buttons

Primary "Post" CTA (The Floating Action Button)

Shape: Circle, diameter 56pt, floated bottom-right 16pt from edge, 16pt from tab bar
Background dark mode: #FFFFFF (white) — intentional inversion
Background light mode: #0F1419 (near-black)
Icon: feather / pen SF-symbol-like glyph, 24pt, color inverts to match contrast
Shadow: rgba(0,0,0,0.4) 0 4px 12px (dark mode has no shadow effect, so subtle)
Pressed: scale 0.95 + soft haptic
Appears on Home, Search, Notifications; hidden on Messages and Profile

Primary "Post" Button (In-Compose)

Shape: Pill, 500pt corner radius
Background: #EFF3F4 (dark) / #0F1419 (light)
Text: Chirp 15pt w700, #0F1419 dark / #FFFFFF light
Padding: 8pt vertical, 20pt horizontal
Disabled (no text entered): opacity 0.5
Pressed: opacity 0.9

Primary Follow / Subscribe Pill

Shape: Pill, 500pt corner radius
Not-following state: #EFF3F4 fill (dark) or #0F1419 fill (light), contrasting text, "Follow" label
Following state: transparent fill, #536471 1pt border, "Following" label, secondary text color
Pressed on "Following": opens an action sheet with Unfollow option
Padding: 8pt vertical, 16pt horizontal, minimum width 80pt
Font: Chirp 14pt w700

Action Icons (Reply, Repost, Like, Views, Share)

Size: 18.75pt (the precise size X uses) glyph; 44pt hit area
Default: #71767B outlined
Active Reply: #1D9BF0 outlined (touched, opens composer)
Active Repost: #00BA7C filled arrows icon
Active Like: #F91880 filled heart
Active Bookmark: #1D9BF0 filled bookmark
Tap animation: icon scales 0.85 → 1.1 → 1.0 spring + count ticks up with a micro slide-up transition, 200ms, paired with .impact(.light) haptic
Like tap: bursts 6 small pink particles from the heart center on transition to active

Text Button ("Show more replies", "Show this thread")

Font: Chirp 15pt w400, #1D9BF0
No underline, 44pt hit area
Sits inline after post body when conversation continues

Cards & Containers

Post Row (The Tweet)

Full-width, black background, divided by 1pt #2F3336 hairline at the bottom
Leading: 32pt circular avatar, 16pt offset from left edge
Trailing of avatar-row: display name (Chirp 15pt w700) + @handle + · + timestamp + ... overflow (20pt glyph, trailing-aligned)
Body: post text Chirp 15pt w400 #E7E9EA, full-width minus leading avatar + 12pt gutter
Media (optional): 16:9 or 1:1 rounded (16pt radius) image/video below text, edge-to-edge within the gutter
Action row: 5 icons evenly distributed — reply, repost, like, views, bookmark — plus trailing share arrow at the far right; icons and counts paired inline
Padding: 12pt top, 12pt bottom (divider sits exactly on the bottom edge)
Tap post: opens thread detail; tap avatar: opens author profile

Quoted Post Embed

Appears inside a parent post when quote-tweeting
Background: same as parent (transparent)
Border: 1pt #2F3336 dark / #CFD9DE light
Corner radius: 16pt
Padding: 12pt all sides
Contains: mini author row (24pt avatar + name + @handle + timestamp in 14pt) + quoted post body in 14pt

Community Note Card

Appears under misleading posts when a Note has been rated helpful
Background: same as canvas (transparent)
Border: 1pt #2F3336
Corner radius: 16pt
Header: "Readers added context they thought people might want to know" in 13pt w700 #71767B
Body: note text in 15pt w400 #E7E9EA
Footer: "Do you find this helpful?" with thumbs-up / thumbs-down tap options

Trending Topic Row

1pt hairline divider above
Left: category label "Trending in Technology" in 13pt w400 #71767B
Center: trending topic in 15pt w700 #E7E9EA
Right: "24.5K posts" in 13pt w400 #71767B
Trailing ... overflow 16pt
Tap: opens search results for that trend

DM Bubble

Sent bubble: #1D9BF0 background, white text
Received bubble: #2F3336 dark / #EFF3F4 light background, primary text color
Corner radius: 18pt (rounder than posts — DMs feel conversational)
Max width: 75% of screen
Padding: 10pt vertical, 14pt horizontal
Tail: no tail — just the rounded rect

Navigation

Bottom Tab Bar

Height: 49pt + safe area (iOS default)
Background: rgba(0,0,0,0.85) with .regularMaterial blur on dark mode, rgba(255,255,255,0.85) light
Tabs (5): Home (house), Search (magnifyingglass), Communities (person.3), Notifications (bell), Messages (envelope)
Icons only — no labels, this is X's signature
Icon size: 26pt
Active color: #E7E9EA dark / #0F1419 light (a stark contrast, not blue)
Inactive: #71767B
Active icon: filled variant; inactive: outlined

Top Nav (Home / Profile)

Height: 44pt + safe area
Leading: profile avatar 32pt circular — tap opens side drawer with account switcher, Premium, Lists, etc.
Center: X logo (monochrome) 22pt glyph
Trailing: Grok sparkles icon (28pt) or settings gear
Background on scroll: rgba(0,0,0,0.7) with blur

Feed Filter Bar ("For You" / "Following")

Sits below top nav, 48pt tall
Two tappable labels: "For you" and "Following" — font Chirp 15pt w700
Active tab: primary text color with a 40pt-wide × 4pt-tall #1D9BF0 underline, 500pt corner radius
Inactive tab: #71767B
Swipe between the two feeds changes the active indicator

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	30pt avatars; post body column narrows to ~280pt
iPhone 13/14/15	390pt	Standard 32pt avatars; post body column ~306pt
iPhone 15/16 Pro	393pt	Dynamic Island accommodated in nav — X logo slides slightly
iPhone 15/16 Pro Max	430pt	32pt avatars; post body column ~346pt; media scales up
iPad	768pt+	Split view — 3-column (nav rail	feed	trending sidebar); trending sidebar becomes visible

Dynamic Type

Post body, quoted post body, DM body: full scale
Display name, @handle, timestamp: cap at xxLarge
Action counts: fixed 13pt (layout-sensitive)
Tab icons: fixed (icon-only bar)
Compose placeholder: scales with prompt size

Orientation

Home / Search / Notifications / Messages / Profile: portrait-locked
Media lightbox (photo / video viewer): rotates freely
Video playback (fullscreen): rotates freely
Spaces (audio): portrait-locked

Touch Targets

Action icons: 18.75pt glyph, 44pt effective hit
FAB Post button: 56pt
Avatar tap: 32pt glyph, 44pt hit
... overflow: 20pt glyph, 44pt hit
Tab icons: 26pt glyph, 49pt hit (full tab bar height)
Follow pill: min 32pt tall, 80pt wide

Safe Area Handling

Top: top nav respects safe area + Dynamic Island; logo shifts around the island
Bottom: FAB Post floats above tab bar (16pt gap), both respect home indicator
Sides: 16pt insets on all content; bleed-to-edge only for fullscreen media

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-x-twitter {--page-bg: #000000;
  --page-bg-gradient: none;
  --text-color: #969696;
  --heading-color: #969696;
  --link-color: #00ba7c;
  --link-hover-color: #00875a;
  --border-color: #1b1b1b;
  --card-bg: #000000;
  --card-shadow: 0 1px 2px rgba(150,150,150,0.06);
  --card-hover-shadow: 0 6px 18px rgba(150,150,150,0.12);
  --header-bg: #141414;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #000000;
  --footer-text-color: #767676;
  --button-bg: #00ba7c;
  --button-text-color: #000000;
  --button-hover-bg: #00875a;
  --button-border: none;
  --button-border-radius: 18px;
  --button-secondary-bg: #090909;
  --button-secondary-text-color: #969696;
  --button-secondary-hover-bg: #121212;
  --button-secondary-border: 1px solid #1b1b1b;
  --prompt-bg: #080808;
  --prompt-text-color: #969696;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 18px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

grok 79.0%
plenty of fish 77.2%
cybozu 76.1%
happn 74.3%
dominos 73.1%

Where this came from

Source document: ios/design-md/social/x-twitter/DESIGN.md · 27.3 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.