Documentation
Typography
DS-GN's typography scale and font configuration.
DS-GN uses a modular typography scale with responsive sizing across breakpoints.
Font Families
| Token | Value | Usage |
|---|
--font-display | 'Bricolage Grotesque', Inter, sans-serif | Headings and display text |
--font-family-sans | 'Inter', system-ui, sans-serif | Body text, UI elements |
--font-family-mono | 'JetBrains Mono', ui-monospace, monospace | Code blocks, technical content |
Font Sizes
The type scale uses rem units for accessibility:
| Token | Size | Usage |
|---|
--font-size-xs | 0.75rem (12px) | Captions, labels |
--font-size-sm | 0.875rem (14px) | Small body text |
--font-size-md | 1rem (16px) | Default body text |
--font-size-lg | 1.125rem (18px) | Large body text |
--font-size-xl | 1.25rem (20px) | Lead text |
Heading Sizes
Heading sizes are responsive — they adjust per breakpoint using the <dsgn-heading> component:
| Level | Mobile | Tablet | Desktop |
|---|
| H1 | 2rem | 2.5rem | 3.5rem |
| H2 | 1.75rem | 2rem | 2.5rem |
| H3 | 1.5rem | 1.75rem | 2rem |
| H4 | 1.25rem | 1.5rem | 1.75rem |
| H5 | 1.125rem | 1.25rem | 1.5rem |
| H6 | 1rem | 1.125rem | 1.25rem |
Font Weights
| Token | Value | Usage |
|---|
--font-weight-regular | 400 | Body text |
--font-weight-medium | 500 | Emphasis |
--font-weight-semibold | 600 | Subheadings |
--font-weight-bold | 700 | Headings |
Usage
<dsgn-heading level="1">Page Title</dsgn-heading>
<dsgn-text size="lg">Lead paragraph with larger text.</dsgn-text>
<dsgn-text size="sm" weight="medium">Small emphasized text.</dsgn-text>