AArticle Design Language
Single-column system for article-heavy pages: dense but readable text, compact controls, and restrained accents for navigation, actions, and status.
Based on Jack's design and Neil's design.
Color Palette
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph of body text. It demonstrates the default font, size, line-height, and color used throughout the site.
Bold text - Italic text - Strikethrough text - inline code
Iosevka Aile (sans-serif)
Regular (400) - The quick brown fox jumps over the lazy dog.
Bold (700) - The quick brown fox jumps over the lazy dog.
Italic - The quick brown fox jumps over the lazy dog.
Iosevka (monospace)
Regular (400) - The quick brown fox jumps over the lazy dog.
Bold (700) - The quick brown fox jumps over the lazy dog.
Italic - The quick brown fox jumps over the lazy dog.
Lora (serif)
Regular (400) - The quick brown fox jumps over the lazy dog.
Bold (700) - The quick brown fox jumps over the lazy dog.
Italic - The quick brown fox jumps over the lazy dog.
Buttons
Component Reference
| Component | Description |
|---|---|
| Hero title | Single, high-contrast entrypoint heading. |
| Meta row | Date, read time, and topic chips. |
| Callout card | Accent-backed emphasis block. |
| Code block | Monospace section with subtle surface shift. |
| Inline note | Compact annotation inside article flow. |
States
Notifications
Spacing Scale
Modus Operandi Reference Swatches
Dense swatch view for contrast checks using shared CSS variables.