Design System
Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.
Articles
Article reading experience. Each article sets its own accent color based on category — everything inside (prose links, blockquotes, code blocks, tags) adapts.
Prose
Molecule
Article content wrapper. Links, blockquotes, code blocks, and hr all use --accent-color from the article's category. The chromatic layer at work inside long-form content.
Headings
Heading 2
Heading 3
Heading 4
Text & Links
Regular paragraph with bold text and a link to something. Line-height is set to 1.7 for readability.
Lists
- Unordered item one
- Unordered item two
- Ordered item one
- Ordered item two
Blockquote
A blockquote with accent-colored left border and card surface background.
Code
Inline code uses card-surface-raised background.
const bus = new EventTarget();
bus.dispatchEvent(new Event("complete"));Usage
<Prose><slot /></Prose> ArticleCard
Molecule
Article listing card. Same composition as Experience Card (Spotlight → Card → CardContent → CardDescription) wrapped in a link.
Preview
<ArticleCard title="…" subtitle="…" date=Tue Mar 24 2026 17:02:01 GMT+0000 (Coordinated Universal Time) tags=tag href="/articles/slug" /> Structure
<a> Link wrapper Spotlight Hover glow effect Card Shared card shell (.text-sm) CardContent Title + body layout slot="title" Date + h3 with hover arrow CardDescription Subtitle text (shared styles) TagRow Tag list Props
| Prop | Type | Description |
|---|---|---|
| title | string | Article title |
| subtitle | string? | Short subtitle |
| date | Date | Publication date |
| tags | string[] | Tag labels |
| href | string | Link to the article |