Design system
Vol. I · For Geelmuyden Kiese · siste utgave 23. mai
§ 01 — FoundationManifestet.
The newsroom is the product.
Perspect er et verktøy en analytiker lever i åtte timer per dag. Designspråket er redaksjonelt, ikke forbrukervendt. Papir og blekk. En serif til nyhetene, en sans til chrome, mono som ryggrad for datoer og scores. Én tilbakeholden aksent, brukt kun når noe krever en hånd.
Leser
ByråanalytikerGeelmuyden Kiese · seniorrådgiver · 8 t/dag
Flate
PapirHvitt. Det eneste lerretet. Ingen kort. Ingen paneler.
Stemme
Tre familierSource Serif 4 · Inter · JetBrains Mono
Signal
Brent sienaÉn aksent. Brukt én gang per fold, når påkrevd.
§ 02 — TypographySource Serif 4 · Inter · JetBrains Mono
Tre stemmer, klare roller.
Serifen bærer nyhetene — hver overskrift, saktittel, dek, sitat. Sansen håndterer chrome — etiketter, billedtekster, kontroller. Mono er ryggraden — datoer, scores, ID-er, eyebrow. Hver familie har én jobb.
Display
Komitébehandling 27. mai
serif · 600 · 72 / 0.95
Hed
Borettslagsloven § 4 kan true OBOS-modellen
serif · 600 · 42 / 1.05
Dek
Ap og Høyre fremmer felles forslag om endring i borettslagsloven; svekker fortrinnsretten for eksisterende medlemmer.
serif · 400 italic · 22 / 1.4
Story
NRK Brennpunkt forbereder dokumentar om OBOS-priser
serif · 500 · 19 / 1.3
Body
Pressemelding fra OBOS sentralt. Saken er fortsatt i utvikling.
serif · 400 · 16 / 1.6
Byline
Av Ola Nordmann — politisk analyse
sans · 600 · 11 caps
Eyebrow
Krever styrebehandling
mono · 600 · 11 caps
Mono
15.05 · 91 / 100 · Prop. 82 L (2025–2026)
mono · 500 · 13
Score
91
mono · 700 · 16
§ 03 — ColourPapir, blekk, og én aksent.
Hvitt papir. Nær-svart blekk. Brent siena når noe krever en hånd.
Det er det. Ingen gradienter. Ingen overflater. Kategoridotter — maks 6 piksler — bærer all metadata-farge.
Signal
Brent siena. Brukt for handlingsknapper, aktive tilstander og lenker som flytter arbeidet videre. Eskalasjon (dypere rød) er reservert for kritiske frister.
PaperLerretet. Aldri tonet.
#FFFFFF
SignalBurnt sienna · brukt sparsomt.
#B14619
EscalationReservert for krit. frister.
#8E2316
GoodSparsom — gevinst eller fall i risiko.
#2E6A4A
Ink
Fire-stegs blekkstige. Headlines og hovedtekst i ink-1; metadata og chrome faller mot ink-3. Aldri kald-grå.
Ink 1Headlines, scores
#14110E
Ink 2Dek, body, intro
#3A332C
Ink 3Eyebrow, metadata
#7A736B
Ink 4Separator, slett
#B7B0A6
Kategoridotter — metadata, ≤ 6 px
Stortinget
#6B4A91Regjering#2E6A4AMedia#B5701CBrreg#2A5E94Doffin#3C5DAAIndustry#44629E§ 04 — RulesTre vekter gjør all struktur.
Hårlinjer gjør jobben paneler ellers ville gjort.
Vi tegner ingen kort. Strukturen kommer fra tre linjevekter — en strek over en seksjonshead, en hårlinje under en sak, og den nesten-usynlige under et felt i en atom.
Strong
Seksjonsskille
Brukt over en h2/sec-head. Markerer brudd mellom redaksjonelle hovedseksjoner.
Normal
Sak-skille
Under hver story-row eller client-row. Holder en redaksjonell rytme uten å rope.
Faint
Felt-skille
Inne i sidecar-rows, type-rows, og atom-grupper. Nesten usynlig — bare nok til å skille.
§ 05 — ComponentsByggeklosser som finnes i kode.
Komponentene er ikke et galleri — de er i bruk.
Alt under er det samme som rendrer Oversikt og Porteføljen. Hvis du ser et component-mønster her, finner du det på samme måte i appen.
Section headbruk over hver bolk
Med action03 åpne · sortert
Se alle →Forhøyet3 av 4 kunder har aktive kritiske saker denne uken.oppd. 2 t
KritiskKomitébehandling om 7 dager. Politiske kontakter ikke aktivert.oppd. 14 min
Story row
§ 07 — Spacing4 px-base, ni stopp.
Plass er stillhet.
En rolig rytme av luft, festet til 4-piksler-grid. Færre stopp, mer mening per stopp.
4
8
12
16
24
32
48
64
96
Intra-atomMellom etikett og verdi i en stat.
4 / 8
Atom gapMellom atoms i en row eller sidecar item.
12 / 16
Inline rowPadding i story-row, sidecar-row, type-row.
14 / 24
Section breathMellom h2/eye og første row i en seksjon.
32 / 40
Section resetMellom store seksjoner i samme dokument.
64 / 88
§ 08 — VoiceFem regler — desk-style.
Hvordan vi snakker.
Hvis to designvalg slåss, vinner det som hører til en redaktør, ikke en plattform.
- Skriv som en redaktør.Korte setninger. Aktive verb. Hvert ord betaler husleie.
- Vis hvor noe kommer fra.Kilden er aldri valgfri. Stortinget. NRK. Brreg. Med tid og lenke.
- Spar aksenten.Brent siena én gang per fold. Mer enn det, og den slutter å bety noe.
- Ingen overskrift uten en setning.Hvis vi ikke kan forklare hvorfor saken betyr noe, hører den ikke hjemme på forsiden.
- Tall som tall.JetBrains Mono. Faste bredder. Scores aligner aldri optisk hvis sifrene wobbler.