/PLAYGROUND
Component playground
Everything this site is built from, live and pokeable — the same components that render inside posts, plus the design tokens behind them. Nothing here is a mock; turn the knobs.
01 Color tokens
Semantic variables, so dark mode only swaps values. Flip the theme toggle in the header and watch them follow. Click a swatch to copy its variable.
The timeline view keeps its own fixed sticker palette (deliberately not theme-aware):
02 Type
Five faces, each with one job. Type in any specimen to try your own text.
The quick brown fox jumps over the lazy dog.
WRITING ARCHIVE
X: 042.00 // AI_01
STICKER TITLES
YEAR_2026
03 Callout
The aside used in posts for notes and tangents. Both fields are live.
04 Chart
The dependency-free interactive area chart from the WWDC post, rendered as a React island.
Imaginary metric, by month
05 Figure & diagram
<Figure> frames any embed — toggle bare to drop the frame.
And the hand-drawn schematic from the WWDC post — a one-off SVG component, shown as-is:
06 Timeline sticker
The card from the Writing page's timeline view. Posts pick these up automatically — or pin a
shape with cardShape in their frontmatter.