Design system

Typografie

Type-principes

  • Vaste schaal, geen tussenwaarden — gebruik de groottes uit de tabel hieronder. Geen 14px, geen 15px „omdat het beter past”.
  • Eén grote titel per pagina — de page__title (22–24px / 700 / --ink-900). Alle subsecties op het paper gebruiken de uppercase info-block__label, niet H2/H3.
  • Section headers zijn UPPERCASE + 0.6px tracking — KLANT, DOCUMENT, OPMERKINGEN. 12px / 700 / --ink-900.
  • Geld altijd tabular-nums — zo blijven decimalen verticaal uitgelijnd in tabellen.

1 · Font

Eén font voor de hele app. DM Sans, vier weights — geen tweede typeface.

DM Sans

Eén font voor de hele app — body, titels, knoppen, tabellen, KPI's én sidebar-navigatie. Geen tweede font.

Offerte O2600512 — Acme Industries B.V.
400 Aa Bb 123500 Aa Bb 123600 Aa Bb 123700 Aa Bb 123

2 · Type-schaal

Vaste schaal voor elke rol. Voeg geen tussenwaarden toe — als iets niet past, kies de dichtstbijzijnde rij.

Page title
22–24px·weight 700·--ink-900
Offerte O2600512
Section header (uppercase)
12px · 0.6px tracking·weight 700·--ink-900
KLANT
Body text (default)
13px·weight 400–500·--ink-700
Standaard bodytekst — leesbaar zonder dat het de aandacht trekt.
Item name (items list)
12px·weight 700·--ink-700
Onderhoud installatie · pakket basis
Labels (Datum, Verkoper, dt)
12px·weight 400·--ink-500
Datum · Verkoper · Vervaldatum
Captions, footnotes
11px·weight 500·--ink-400
Betaaltermijn: 30 dagen
Big number (KPI)
30px·weight 700·--ink-900
€ 124.500
Grand total
17px·weight 700·--accent-blue
€ 12.495,00
Column headers (table & items)
11px · 0.3px tracking·weight 500–700·--ink-500
Omschrijving · Aantal · Prijs · Totaal
Status pill
13px·weight 500·--accent-magenta / --accent-green
Niet definitief
Number cells (geld)
12–13px · tabular-nums·weight —·—
1.234,50

3 · Section headers op het paper

Alle blokken op een detail- of drawer-paper (KLANT, DOCUMENT, OPMERKINGEN, …) gebruiken de uppercase info-block__label. Géén tweede H2/H3 binnen het paper — dat is een echte regressie die we al een keer gevangen hebben.

Offerte O2600512
KLANT
Acme Industries B.V.
Industrieweg 12 · 1234 AB Amsterdam
DOCUMENT
Datum: 28-05-2026 · Verkoper: J. de Vries
OPMERKINGEN
Levering in week 24. Plaatsing in overleg met de klant.

4 · Gebruik in code

De fontstacks zijn aan het body en .nav__item gekoppeld — meestal hoef je niets te doen. Voor maatwerk:

/* Page title */
.my-title { font-size: 24px; font-weight: 700; color: var(--ink-900); }

/* Section header (uppercase) */
.my-label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Geld — altijd tabular */
.my-money {
  font-size: 13px; color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

/* Grand total — enige plek waar geld blauw is */
.my-grand-total {
  font-size: 17px; font-weight: 700;
  color: var(--accent-blue);
  font-variant-numeric: tabular-nums;
}