Design System
Component Library
The building blocks of the blog — typography, color, and the custom MDX components used across every post. Everything responds to the theme toggle.
Colorssemantic tokens
- Background--background
- Background Subtle--background-subtle
- Foreground--foreground
- Text--text
- Text Muted--text-muted
- Text Faint--text-faint
- Border--border
- Border Strong--border-strong
- Primary--primary
- Primary Hover--primary-hover
Typography
Serif / DisplayThe quiet craft of writing
Serif / BodyReading-first prose set in Newsreader, 18px.
Sans / UIGeist — navigation, labels & chrome
Mono / Codeconst theme = "geist mono";
Buttons & Links
List Viewunordered & ordered
- Renders straight from markdown syntax.
- Custom diamond markers that rotate on hover.
- First, define the semantic tokens.
- Then register them with the theme.
- Finally, reference them in components.