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>