Foundations
Typography
DS0's type system uses a modular scale with Inter as the default sans-serif family.
Font Families
DS0 uses two font families:
| Family | Stack | Usage |
|---|---|---|
| Sans | Inter, ui-sans-serif, system-ui, -apple-system, ... | UI text, headings, body |
| Mono | JetBrains Mono, ui-monospace, SFMono-Regular, ... | Code, data, technical |
Type Scale
xsThe quick brown fox jumps over the lazy dog12px
smThe quick brown fox jumps over the lazy dog14px
baseThe quick brown fox jumps over the lazy dog16px
lgThe quick brown fox jumps over the lazy dog18px
xlThe quick brown fox jumps over the lazy dog20px
2xlThe quick brown fox jumps over the lazy dog24px
3xlThe quick brown fox jumps over the lazy dog30px
4xlThe quick brown fox jumps over the lazy dog36px
5xlThe quick brown fox jumps over the lazy dog48px
6xlThe quick brown fox jumps over the lazy dog60px
Font Weights
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text, descriptions |
| Medium | 500 | Labels, subtle emphasis |
| Semibold | 600 | Headings, buttons |
| Bold | 700 | Strong emphasis, titles |
Line Heights
| Name | Value | Usage |
|---|---|---|
| none | 1 | Single-line text, badges |
| tight | 1.25 | Headings |
| snug | 1.375 | Subheadings |
| normal | 1.5 | Body text |
| relaxed | 1.625 | Long-form reading |
| loose | 2 | Spacious layouts |
Usage
// Use the Heading component for semantic headings
<Heading as="h1" size="4xl">Page Title</Heading>
<Heading as="h2" size="2xl">Section</Heading>
// Use the Text component for body content
<Text size="base">Regular body text</Text>
<Text size="sm" className="text-muted-foreground">Caption text</Text>
// Monospace for code
<Code>npm install @ds0/tokens</Code>