Typografi
Designsystemet har et sett med typografi-tokens som dekker alle tekststiler. Tokensene er responsive og tilpasser seg automatisk mellom desktop og mobil.
Skrifttype
Alle tekststiler bruker GT America som skriftfamilie.
Skriftvekter
| Token | Verdi | Bruksområde |
|---|---|---|
font-weight.light | Light | Dekorativ tekst |
font-weight.regular | Regular | Brødtekst og overskrifter |
font-weight.medium | Medium | Fremhevet tekst |
font-weight.expanded | Expanded Medium | Knapper og handlinger |
Tekststiler
Designsystemet definerer syv semantiske tekststiler som kombinerer skriftstørrelse, vekt og linjehøyde:
| Eksempel | Token | Beskrivelse |
|---|---|---|
| Aa | heading.display | Stort visuelt overskrift-element |
| Aa | heading.headline | Hovedoverskrift |
| Aa | heading.subtitle | Undertittel |
| Aa | heading.overline | Overlinetekst |
| Aa | leading | Ingress / fremhevet tekst |
| Aa | body | Brødtekst |
| Aa | action | Knapper og handlinger |
Størrelser per breakpoint
Tekststørrelsene endrer seg mellom mobil og desktop:
| Token | CSS-variabel (font-size) | Desktop | Mobil |
|---|---|---|---|
| heading.display | --typography-heading-display-font-size | 56px | 40px |
| heading.headline | --typography-heading-headline-font-size | 48px | 32px |
| heading.subtitle | --typography-heading-subtitle-font-size | 24px | 20px |
| heading.overline | --typography-heading-overline-font-size | 20px | 16px |
| leading | --typography-leading-font-size | 32px | 24px |
| body | --typography-body-font-size | 20px | 16px |
| action | --typography-action-font-size | 16px | 12px |
Linjehøyder
| Token | Verdi | Bruksområde |
|---|---|---|
line-height.sm | 130% | Kompakt tekst |
line-height.md | 150% | Standard (brukes av alle tekststiler) |
line-height.lg | 170% | Luftig tekst |
Bruk i CSS
.display-heading {
font-family: var(--typography-heading-display-font-family);
font-size: var(--typography-heading-display-font-size);
font-weight: var(--typography-heading-display-font-weight);
}
.body-text {
font-family: var(--typography-body-font-family);
font-size: var(--typography-body-font-size);
font-weight: var(--typography-body-font-weight);
}Bruk i TypeScript
import { tokens } from "@kilden/design-tokens";
const displayFontSize = tokens.typography.heading.display["font-size"];
// → "var(--typography-heading-display-font-size)"