Design System
A typography-focused design system optimized for readability. Built with Tailwind CSS 4.0 and CSS custom properties.
Colors
Background Colors
Primary
--bg-primary Secondary
--bg-secondary Tertiary
--bg-tertiary Text Colors
Primary Text
--text-primary Secondary Text
--text-secondary Tertiary Text
--text-tertiary Muted Text
--text-muted Accent Colors
Accent
--accent Accent Hover
--accent-hover Accent Muted
--accent-muted Semantic Colors
Success
--success Warning
--warning Error
--error Info
--info Typography
Font Families
Sans-serif (UI & Headings)
Inter — The quick brown fox jumps over the lazy dog
--font-sans Serif (Blog posts & long-form reading)
Source Serif 4 — The quick brown fox jumps over the lazy dog
--font-serif Monospace (Code)
JetBrains Mono — The quick brown fox jumps
--font-mono Type Scale
Based on a Major Third (1.25) ratio
--text-5xl Display --text-4xl Heading 1 --text-3xl Heading 2 --text-2xl Heading 3 --text-xl Heading 4 --text-lg Large text --text-base Body text (default) --text-sm Small text --text-xs Extra small text Headings
Heading Level 1
font-size: 2.441rem, font-weight: 700, letter-spacing: tight
Heading Level 2
font-size: 1.953rem, font-weight: 600, letter-spacing: tight
Heading Level 3
font-size: 1.563rem, font-weight: 600
Heading Level 4
font-size: 1.25rem, font-weight: 600
Prose Text
This is a paragraph of prose text using Source Serif 4, optimized for long-form reading like blog posts. The serif font provides a traditional, book-like reading experience with a relaxed line height of 1.625 for optimal readability.
Here's another paragraph showing how text flows naturally. Notice the comfortable spacing between paragraphs and the balanced text wrapping that prevents awkward line breaks. This design system prioritizes readability and elegance above all else.
Links
Links have a subtle underline treatment with a semi-transparent accent color that becomes solid on hover. This creates an elegant, unobtrusive appearance while maintaining clear affordance.
Inline Code
Inline code like const greeting = "Hello" uses the monospace
font with a subtle background to distinguish it from regular text.
Code Blocks
// Code block example
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet("World");
console.log(message);Spacing
Based on an 8px grid system
--space-1 0.25rem (4px)
--space-2 0.5rem (8px)
--space-3 0.75rem (12px)
--space-4 1rem (16px)
--space-5 1.25rem (20px)
--space-6 1.5rem (24px)
--space-8 2rem (32px)
--space-10 2.5rem (40px)
--space-12 3rem (48px)
--space-16 4rem (64px)
Content Widths
--content-prose: 38rem (optimal for reading)
--content-page: 48rem (default page width)
--content-wide: 56rem
Components
Tags
Buttons
Cards
Card (Filled)
A filled card with secondary background color and rounded corners.
.surface Card (Bordered)
A bordered card with primary background and subtle border.
.surface-bordered Navigation Links
Blockquotes
Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Lists
Unordered List
- First item in the list
- Second item with more content
- Third item to show spacing
Ordered List
- First numbered item
- Second numbered item
- Third numbered item
Tables
| Token | Value | Usage |
|---|---|---|
--radius-sm | 4px | Small elements, inline code |
--radius-md | 6px | Buttons, tags |
--radius-lg | 8px | Cards, surfaces |
--radius-xl | 12px | Large containers |
Horizontal Rule
Transitions
Fast
--transition-fast 100ms
Base
--transition-base 150ms
Medium
--transition-medium 200ms
Slow
--transition-slow 300ms
Dark Mode
All colors automatically adapt when the .dark class is applied
to the document. The design system uses CSS custom properties that are redefined
in dark mode, ensuring consistent theming throughout the application without
any JavaScript required for color switching.