Helgerød gård · Jeløya

Nerdesign

Designsystem for dokumenter og dashboards

Gårdstunet på Helgerød gård en sommerkveld, med tente lykter og den røde sidebygningen — Helgerød gård, Jeløya.

Nerdesign er én CSS-fil med tokens og komponenter, et ECharts-tema og noen små JS-hjelpere. Det brukes til utskriftsvennlige dokumenter og smarthus-dashboards, i lyst og mørkt tema, og oppfyller WCAG 2.2 AA.

Slik fungerer det

Farger er definert som roller (--nd-bg, --nd-surface, --nd-line, --nd-text, --nd-accent). Komponentene bruker bare rollene.
Lyst og mørkt tema er to verdisett for de samme rollene. Skjermen følger systeminnstillingen eller en bryter. Utskrift bruker alltid de lyse verdiene.
Tekst settes i systemets serif (Iowan Old Style / Palatino / Georgia). Tall i dashboards settes i JetBrains Mono med tabulære siffer.
Hvert fargepar er kontrastsjekket mot WCAG AA i begge temaer. Seriefargene er testet for fargesyn. Hver graf har en datatabell.
Ingen byggsteg for den som bruker det: kopier filene inn i prosjektet, eller lim CSS-en inn i et énfils-dokument.

Innhold

Grunnlag: Farger, typografi, layout
Komponenter: Dokument og dashboard
Kom i gang: Filer og oppsett
Tilgjengelighet: Kontrast, tastatur, print

Navn og lisens

Laget for Helgerød gård på Jeløya. Prefikset på alle klasser og tokens er nd-. Koden er MIT-lisensiert; JetBrains Mono og PhotoSwipe følger sine egne åpne lisenser.