Typography
Type scales, font families, and text styles built on Inter and IBM Plex Mono.
Display Scale
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Text Scale
Leucine Design System
Leucine Design System
Leucine Design System
Leucine Design System
Leucine Design System
Font Families
Primary sans-serif for all UI text
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()_+-=[];:'",./<>?
Monospace for code, tokens, and technical values
import { Button } from "@/ui/button"
export function Example() {
const [count, setCount] = useState(0)
return (
<Button onClick={() => setCount(c => c + 1)}>
Clicked {count} times
</Button>
)
}Regular 400: The quick brown fox
Medium 500: The quick brown fox
Usage Guidelines
| Role | Token | Size | Weight | Example |
|---|---|---|---|---|
| Page title | display-sm | 30px | 700 | Sample text |
| Section heading | text-xl | 20px | 600 | Sample text |
| Body | text-md | 16px | 400 | Sample text |
| Caption | text-xs | 12px | 400 | Sample text |
| Label | text-sm | 14px | 500 | Sample text |
| Code | text-sm | 14px | 400 | const x = 42 |