design.md

Preview

# x.com Design System

> Inspected by UI Archive — https://ui-archive.com/x.com
> Last updated: 2026-05-01

## Typography

| Token | Font Family | Size |
|-------|-------------|------|
| --font-size-twitterchirp-15px-400 | TwitterChirp, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 15px |
| --font-size-twitterchirp-11px-400 | TwitterChirp, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 11px |
| --font-size-twitterchirp-13px-400 | TwitterChirp, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 13px |
| --font-size-twitterchirp-17px-500 | TwitterChirp, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 17px |
| --font-size-twitterchirpextendedheavy-64px-700 | TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 64px |
| --font-size-twitterchirpextendedheavy-31px-700 | TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif | 31px |

## Spacing

| Token | Value |
|-------|-------|
| --spacing-2px | 2px |
| --spacing-4px | 4px |
| --spacing-8px | 8px |
| --spacing-12px | 12px |
| --spacing-16px | 16px |
| --spacing-20px | 20px |
| --spacing-24px | 24px |
| --spacing-32px | 32px |
| --spacing-40px | 40px |
| --spacing-48px | 48px |
…

All Tokens