X. Blue wire on white newsprint.
- Media
- Light theme
- 9 colors
- 2 typefaces
X is a newswire on white paper: a content-first real-time conversation surface where the UI dissolves into the background so text and media carry the experience. The design is ruthlessly minimal — a three-column grid (left nav, center feed, right rail), hairline borders instead of shadows, and one chromatic accent (X Blue) that appears only on things you can tap. Typography is the product: TwitterChirp's custom letterforms with the ss01 stylistic set create a distinctive voice across every weight. Buttons are infinite-radius pills, surfaces are flat whites, and density stays compact to maximize feed real estate. Every visual choice reinforces the idea that X is a public square, not a software product — the chrome is scaffolding, the content is the building.

X design system
Brand1
Follow buttons, link text, verified badges, active nav icons, bottom CTA accents — the only chromatic color in the system, used sparingly to mark anything interactive or trustworthy
Neutrals8
Primary text, button text, icon fills — the dominant readable foreground on light surfaces
Dark-mode surface fill (previews, code blocks, dim button state)
Secondary text, metadata, timestamps, muted icon fills, helper labels
Tertiary text and disabled-state foreground
1px border strokes separating cards, inputs, nav sections, and buttons
Inset shadow base for inputs and select surfaces — 3% opacity black on this tone
Hover states, secondary surface fills, subtle dividers, input backgrounds
Page background, card surfaces, modal surfaces, button text on chromatic fills
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on X Blue
6.17 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











