Every prototype on this site is built from one component language: the real x.com lights-out system, measured and reproduced to the pixel. This page is the reference. The tokens, the type scale, the timeline anatomy with an inspect mode, every card type rendered live, and the rules that make something feel like X instead of a copy of X.
Tokens · color
Lights-out is not a dark theme, it is pure black with one blue. Everything else is a gray with a job. The discipline is what makes the accent colors (like, repost, error) land as loudly as they do.
Tokens · type
Chirp everywhere, falling back through the system stack. Hierarchy comes from weight, not color or size inflation: body and metadata are both 15px, the name is simply bolder than the handle. Counts always use tabular numerals so nothing shifts when they tick.
Tokens · metrics
| Metric | Value | Where |
|---|---|---|
| Columns | 275 / 600 / 350 | nav rail, timeline, right rail, centered at 1265px |
| Post padding | 12px 16px | every timeline cell |
| Avatar | 40px post · 48px profile hover · 32px compact | always a perfect circle, radius 9999 |
| Avatar to body gap | 12px | the post grid |
| Body type | 15px / 20px | post text, names, handles |
| Action icons | 18.75px glyph in a 34.75px hover circle | reply, repost, like, views, bookmark, share |
| Card radius | 16px | media, quote, link, chart cards, rail modules |
| Pill radius | 9999px | buttons, chips, avatars, tab underline |
| Divider | 1px #2f3336 | the only border weight on the page |
| Tab underline | 56 x 4px, radius 9999, X blue | For you / Following |
| Count formatting | 982 · 1.8K · 45K · 2.4M | one decimal under 10K, none above, tabular |
| Timestamps | 41s · 12m · 7h · Jun 21 | relative under 24h, then month day |
The timeline · exact and annotated
The 600px column, rebuilt to the measurement: sticky blurred header, 53px tabs with the 4px blue underline, the composer, and the post cell. Toggle Inspect to overlay the real numbers. The action row is fully live: hover it for the exact per-action colors, click the heart and the bookmark.
The cards · every type, live
Every content container X ships in the timeline and the right rail, each rendered from the same tokens with its spec underneath. This is the component inventory the prototypes draw from.
The rules
Lights-out means #000, not near-black. Blue is the only decorative color; everything else is a gray doing a job, so like-pink and repost-green read as events.
Name and handle are the same 15px; the name is just 700. Hierarchy through weight keeps density without noise.
Exactly one border treatment: 1px #2f3336. No shadows in the timeline, no second border weight, ever.
Two radii: 16px for content containers, full-round for anything a finger taps. A third radius is how clones give themselves away.
Actions are gray until touched, then answer in their own color: reply blue, repost green, like pink, each with its 10% tint circle.
Tabular numerals on every count, so a like tick moves a heart, not a layout. Formatting is 1.8K and 2.4M, one decimal only under 10K.
The UI is monochrome so avatars, media, and charts carry all the saturation. That is why the feed feels alive while the frame feels calm.
Anything sticky (the header, the tabs) sits on rgba(0,0,0,0.85) with a 12px backdrop blur. Depth through blur, never through shadow.