Typografi

Sju roller. Størrelsen følger nivået, ikke hvor viktig noe føles.

• Alle seksjonstitler er H2 og like store. Bare sitater er større.
• Mono brukes bare i 11 px: etiketter, nummerering (01, 02) og status.
• Nummerering står som etikett rett over tittelen, aldri som stort tall.
• Overskrifter brytes før linjen blir lang: H2 maks 13 em bred (ca. 700 px), ingress maks 600 px.
• Seksjonshode i fast rekkefølge: etikett, H2, ingress, knapper. Innholdet (bilder, kort, vindu) kommer etter knappene, aldri foran.
• Variant: 500 som høyeste vekt gir samme tyngde som ordmerket. Sitater beholder 700.

Farger

Én farge per side. Skrift, grønn og linjer er de samme overalt.

Linjer

Én strek. Toppen av en tabell eller et grid er like tynn som linjene mellom radene.

Avstand

Alle mål går opp i 8. Det som hører sammen står tett, grupper står tydelig fra hverandre.

• Seksjon: 150 px over og under på desktop, 96 px på mobil. Ingen seksjon slutter uten bunnluft.
• Overskrift til ingress 24. Ingress til innhold 64.
• Kolonner i grid: 32 px inn fra hver hårlinje.

Knapper

Hovedhandling har hjørnet fra r-en i logoen. Den andre er pille, som de runde etikettene.

• Aldri to like knapper ved siden av hverandre.
• Knapp og tekstlenker står på samme optiske midtlinje, 24 px mellom.
• Ingen piler i knapper.
• Knapper inne i vinduer er vanlige og firkantede, se Vinduer.

Etiketter

Kuttet for tema, rund for kategori. Brukes over overskrifter og som filter.

Tall

Ett nøkkeltall ser likt ut overalt: i tallfelt, i kort og i bilder.

• Tall 64/1, vekt 600, grønn. Enheten er 0,45 em i samme farge.
• Etikett over i mono, forklaring under i brødtekst.

Måler og avkrysning

Én måler for all fremdrift og sammenligning. Haken er bygget av piksler, som logosymbolet.

Vinduer

Alt som viser data står i ett vindu. Tre bredder, samme ramme. Menyen bruker samme panel.

• Bredder: 360, 640 og 880 px. På mobil full bredde.
• I bilde: vinduet ligger helt inne i bildet, sentrert, med minst 32 px bilde rundt. Bildet vokser heller enn at vinduet stikker ut.
• Vinduet viser maks tre rader. Resten ligger bak «Vis alle».
• Kort med vindu i samme rad er like høye.
• Knapper i vinduet er firkantede med 3 px radius.

Toppen

Midtstilt med bilde under, eller tekst og bilde i to kolonner.

Tre i bredden

Samme rutenett med eller uten bilde. Velg variant etter innholdet.

• Tre like kolonner med samme mellomrom. Kortene i en rad er like høye.
• Tall i bilde: kortet står 16 px fra nedre venstre hjørne, alltid samme sted.
• Tittel og tekst under bildet er H3 og brødtekst.

Maskin med steg

En maskin står fast mens stegene ved siden av blar forbi. Samme blokk med datamaskin eller Gameboy.

• Én maskin per side. Stegene er nummerert med mono-etikett (01, 02) over tittelen.
• Maskinen står midt på siden og midt i skjermhøyden, samme størrelse (maks 560 px). Stegteksten står til venstre og veksler ikke side.

Data i vindu

Leveranser, tabeller og rangeringer står i vinduet.

Tegnet grid

Alt som står i rader og kolonner bruker samme tegnede grid: tynne linjer, ingen bokser, siktet ved hover.

• Én strek: toppen og radene har samme hårlinje.
• Kolonnene har 32 px luft fra hver linje. Første kolonne starter i kanten.
• Siktecursoren dimmer de andre cellene ved hover.

Sitat

Den eneste teksten som er større enn H2. Midtstilt, med navn under.

Skjema

Boksen har logohjørner. Overskriften i skjemaet er H3.