Hopp til innhold

Nerdesign · grunnlag

Grunnlag

Farger som roller, typografi, rom og layout

Alt under er lest direkte fra det bygde stilarket i temaet du ser nå. Bytt tema øverst på siden for å se de andre verdiene – kontrastverdiene regnes ut på nytt.

Farger

Fargene er definert i to lag. Primitivene er materialene – krem, jord, tegl – med lyshetstrinn. Rollene er det komponentene bruker. Rollene har én verdi for lyst og én for mørkt; primitivene er de samme i begge.

Flater og streker

Tekst

Aksent og fokus

Status

Statusfarger kommer alltid sammen med et ord eller et symbol – aldri farge alene. De brukes ikke som seriefarger.

Seriefarger

Åtte farger i fast rekkefølge. Serie 1 er alltid første serie i en graf; en niende serie slås sammen til «Annet». Rekkefølgen er optimert slik at naboer skilles også med svekket fargesyn. På mørk flate er de samme åtte fargetonene trappet opp i lyshet.

Sekvensiell og divergerende

Én tone fra lys til mørk for mengder (varmekart). To poler med nøytral midt for avvik (mer/mindre enn i fjor).

Typografi

Tekst settes i Iowan Old Style, med Palatino og Georgia som reserve – systemfonter, ingen filer å laste. Overskrifter har vekt 500, ikke fet. Undertitler og bildetekster er kursive. Tall i dashboards settes i JetBrains Mono med tabulære siffer.

--nd-size-displayKursoversikt
--nd-size-2xlVaskerom
--nd-size-xl · h2Kurser i hovedhuset
--nd-size-lg · h3Teknisk rom
--nd-size-mdSjøvær på Jeløya gir økt forbruk i fjøset – særlig når varmepumpa går for fullt i februar.
--nd-size-smBildetekst og fotnoter er kursive og dempet.
.nd-kickerHelgerød gård · Hovedhuset
.nd-capsTabellhoder og etiketter
.nd-numeric3,8 kW · 1 234,5 kWh · 27,4 °C

Rom

En spacing-skala i åtte steg. Komponentene bruker den; du bruker den når du legger til noe eget.

--nd-space-1
--nd-space-2
--nd-space-3
--nd-space-4
--nd-space-5
--nd-space-6
--nd-space-7
--nd-space-8

Layout

Ikke et rutenett-rammeverk, men seks primitiver som dekker det som faktisk går igjen.

KlasseGjør
.nd-pageSidebredde 960 px, sentrert. --narrow 720 px, --wide 1280 px.
.nd-measureLesebredde 42 em – for ingress og løpende tekst.
.nd-gridKort-rutenett som fyller seg selv. Sett --nd-min for minste kortbredde.
.nd-two-colTo kolonner, én på smal skjerm.
.nd-keyfactsNøkkelfakta som <dl> i et rutenett der streken skinner gjennom. --2, --4.
.nd-sheetEt fysisk ark: kort på skjerm, én side på papir. --a5, --fixed.
.nd-label-sheet / .nd-labelEtikettark med faste mm-mål via --nd-label-w/h/cols.
.nd-paperAlltid papirhvitt, også i mørkt tema. Innebygd i --fixed-ark og etikettark.
Kort 1
Kort 2
Kort 3
Kort 4