Color Palette
Background Colors
Blue Tint
rgba(29,155,240,.1)
Accent & Fill Colors
Shadow Blue
rgba(101,119,134,.2)
Typography
Primary Font · TwitterChirp
TwitterChirp
What's happening? Share your thoughts with the world.
Regular · 400
Medium · 500
Bold · 700
Extra Bold · 800
System Fallback · ui-sans-serif / -apple-system
System UI
System font stack used when TwitterChirp is unavailable
Regular · 400
Bold · 700
Trending in your area
Display / Heading · 20px · Extra Bold (800) · line-height: 24px
@username · Display name · Notifications
Body Bold · 15px · Bold (700) · line-height: 20px
Just posted something interesting. Check it out and let me know what you think about it in the replies.
Body Default · 15px · Regular (400) · line-height: 20px
Reply · Repost · Like · Bookmark · Share
Body Small · 14px · Regular (400) · line-height: 20px
2 hours ago · 4.2K views · from New Delhi, India
Caption · 13px · Regular (400) · line-height: 20px
2 · ♥ · TRENDING
Micro · 11px · Medium (500) · line-height: 12px
Letter Spacing
No letter spacing tokens were detected in the X design system. X relies on default browser letter-spacing throughout, with no custom tracking values defined. Typography distinction is achieved through font weight and size variation rather than tracking adjustments.
Spacing
Spacing Scale
11 tokens — 2px → 266.5px
Borders
Border Radii
Note: Two compound radius tokens were also detected — 0px 0px 16px 16px (bottom pill) and 16px 16px 0px 0px (top pill) — used for sheet-style cards and bottom-anchored modals.
Border Widths
The 1px hairline is dominant across the entire interface — dividers, cards, inputs, and navigation. The 2px thin is used sparingly for active indicator lines (tab underlines).
Shadows / Elevation
Shadow Tokens
3 tokens — blue-gray tinted shadow system
sm
×4
rgba(0,0,0,.03) 2px inset — subtle inner shadow on input fields
md
×2
Blue-gray 15px diffuse + 3px crisp — dropdowns, popovers
lg
×1
Blue-gray 8px diffuse + 3px soft — modals, overlays
Z-Index
| Layer | Value | Usage |
|---|
| Below | -1 | Background decorations, hidden layers |
| Base | 1 | Default content layer |
| Raised | 2 | Slightly elevated elements, cards |
| Elevated | 3 | Sticky headers, navigation rails |
| Top | 4 | Overlays, tooltips, dialogs |
X uses a minimal 5-layer z-index stack (−1 to 4) compared to most other apps. This reflects a lean stacking context — only essential layering is defined at the token level.
Breakpoints
📱
XS · Minimum
370px
Compact phone (iPhone SE)
📲
LG · Tablet
600px
Tablet breakpoint
💻
BP-8 · Desktop
987px
3-column layout threshold
🖥️
BP-10 · Wide
1024px
Laptop / wide layout
🖥️
BP-12 · HD
1280px
1280px wide display
📺
BP-13 · Max
1536px
Maximum layout width
13 breakpoints from 370px to 1536px, densely clustered at the mobile end (370, 388, 407px) — reflecting X's mobile-first, highly responsive grid. Pairs like 767/768px and 987/988px provide precise floor/ceiling boundary handling.
Opacity
Opacity Tokens
1 token — 50%
Only a single opacity token (50%) was detected. X uses RGBA color values extensively rather than separate opacity tokens for transparency effects — transparency is baked into the color values directly.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Black | Dark Gray 2 | 1.13:1 | Fail |
| Black | White | 21:1 | AAA |
| Black | Blue (#1D9BF0) | 7:1 | AAA |
| Dark Gray | Dark Gray 2 | 1:1 | Fail |
| Dark Gray | White | 18.5:1 | AAA |
| Dark Gray | Blue (#1D9BF0) | 6.16:1 | AA |
| Blue (#536471) | Dark Gray 2 | 3.02:1 | AA Large |
| Blue (#536471) | White | 6.12:1 | AA |
| Blue (#536471) | Blue (#1D9BF0) | 2.04:1 | Fail |
| Blue 3 (#829AAB) | Dark Gray 2 | 6.31:1 | AA |
| Blue 3 (#829AAB) | White | 2.93:1 | Fail |
| Light Cyan | Dark Gray 2 | 12.9:1 | AAA |
| Light Cyan | White | 1.44:1 | Fail |
| Light Cyan | Blue (#1D9BF0) | 2.09:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Dark Gray 2--color-dark-gray-2#0F1419
White--color-white#FFFFFF
Blue (Brand)--color-blue-2#1D9BF0
Blue Tint--color-blue-6rgba(29,155,240,.1)
Black--color-black#000000
Dark Gray--color-dark-gray#0F141A
Blue Muted--color-blue#536471
Blue 3--color-blue-3#829AAB
Light Cyan--color-light-cyan#CFD9DE
Border Light--color-light-gray#E4EAEC
Border Subtle--color-light-gray-2#EFF3F4
Orange--color-orange#D18800
Primary Font--font-family-2TwitterChirp
Base Font--font-family-baseui-sans-serif
System Font--font-family-3-apple-system
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Extra Bold--font-weight-extrabold800
Micro--font-size-2xs11px
Caption--font-size-xs13px
Body Small--font-size-sm14px
Body--font-size-base15px
Heading--font-size-lg20px
No letter spacing tokens detected——
Space 20--space-20266.5px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
full (Pill)--radius-full9999px
Bottom Sheet--radius-sm0px 0px 16px 16px
Top Sheet--radius-2xl16px 16px 0px 0px
Instant--duration-instant150ms
Fast--duration-fast170ms
Normal--duration-normal200ms
Slow--duration-slow300ms
Slower--duration-slower350ms
Ease Out--easing-ease-outease-out
Below--z-1-1
Base--z-21
Raised--z-32
Elevated--z-43
Top--z-54
Design System Preview · X / Twitter (Dark) · Generated 18/04/2026 · 17 color tokens · 5 font-size · 3 font-family · 4 font-weight · 5 line-height · 0 letter-spacing · 11 spacing · 6 radius · 2 border-width · 3 shadow · 5 duration · 1 easing · 5 z-index · 13 breakpoints · 1 opacity