Design System.
This site started from a set of Memphis/Bauhaus-inspired comps — colors, type, shapes, a handful of component mockups. What's below isn't a copy of those comps: every swatch, button, and pattern renders through the actual component or CSS token running on the live site, so this page can't quietly drift out of sync with reality. Two living subpages branch off from it too — see below.
Note: tokens/typography.css's own--text-* custom properties (xs through 6xl) aren't wired into Tailwind's utility generator — they live on plain :root, outside any @theme block. The scale actually driving every text-* class above is the override in src/styles/tokens.css's@theme block.
ui/badge.tsx is built and styled but not used anywhere yet — every tag/pill on the live site today is the hand-written<span> pattern shown above it.
Every ArticleTeaserCard variant (featured, compact, vertical, overlay) at real size with real content lives at/design/cards. ui/card.tsx(a plain Card/CardHeader/CardContent primitive set) is also built but, like Badge, not used anywhere yet — every card grid on the live site is hand-rolled markup instead.
Real-pixel-size social/profile banners (LinkedIn — left-, right-, and center-aligned content variants, GitHub social preview, email header, square social crops) with a high-resolution PNG download for each, live at /design/banners.
CrosshairMark andDiagonalBar are unused in real compositions (HeroArt hand-rolls its own +/slash-marks instead) — see components/README.md for why (wrong shape / hardcoded angle, not a bug).
Kept as a reference implementation — the homepage replaced this withGitHubContributionGraph.astro, and/lab dropped it outright.