Design System
Typography
Headings
| Level | Example | Usage |
|---|---|---|
| H1 | Heading Level 1 | Page title |
| H2 | Heading Level 2 | Section heading |
| H3 | Heading Level 3 | Subsection heading |
| H4 | Heading Level 4 | Minor heading |
| H5 | Heading Level 5 | Detail heading |
| H6 | Heading Level 6 | Small heading |
Text Styles
| Style | Example | Usage |
|---|---|---|
| Body Text | This is a regular body paragraph using DM Sans. | Default paragraph text |
| Bold | bold text | Emphasis and importance |
| Italic | italic text | Alternative voice or citation |
| Code | inline code | Code references |
| Highlight | highlighted text | Draw attention |
Links
Links are underlined and use the accent color. Here is a default link.
Colors
Background
Text
Muted
Accent
Block Elements
Blockquote
Good design is like a good book. It doesn't insist on itself. It trusts the reader to find what they need and get out of the way.
Code Block
function greet() {
return "Hello, world";
}Lists
- First item in the list
- Second item with additional detail
- Third item
- Design is about intention
- Typography is the foundation
- Whitespace is a material
- Simplicity serves clarity
Figure with Caption
[Image placeholder]
Components
Post Cards
Building a Design System from Scratch
May 16, 2026
Typography on the Web
May 10, 2026
Minimal Design Principles
May 1, 2026
This style guide is for development reference and documents the design tokens and component patterns used throughout the site.