Merkevare
Visuell profil
Dette er designsystemet vårt: én palett, to fonter og et sett med regler vi holder oss til. Alle verdiene er målt fra den faktiske nettsiden, ikke funnet på i etterkant.
Logo
Ordmerket
To ord i to farger, med et punktum til slutt. Punktumet er en del av merket og skal ikke fjernes.
Standard
STUDIO i blekk, FOSSELIEN og punktumet i skogsgrønn. Brukes på krem og andre lyse flater.
Lys
Ensfarget. Brukes på skogsgrønn. Standardvarianten der gir nesten ingen kontrast mellom FOSSELIEN og bakgrunnen.
Ikon og appikon
Brukes der ordmerket blir uleselig: favicon, avatar og hjemskjerm.
Merke
App 192
App 512
Favicon 32
Farger
Krem, skog og gull
Krem er grunnen, skogsgrønn er strukturen, og gull er handling. Gull er aldri dekor: har du to gull-knapper ved siden av hverandre, har du egentlig ingen.
bg
#f7f2e3
Varm krem. Sidens grunn.
text
#262626
All tekst.
forest.500
#0e4644
Struktur og mørke flater.
gold.500
#f1b32e
Primærhandling og fokusring.
creamCard
#ece7d9
Kort og hevede flater.
gold.200
#fceac0
Lys gull. Gradienter.
ctaLight
#ebebeb
Tertiærknapp.
negative
#a8471f
Utgift, avslått, forfalt.
Skogsskalaen
Nyansene brukes til gradienter og illustrasjon. I mørkt tema bytter paletten roller i stedet for å bli erstattet: skogsgrønn blir grunn, krem blir tekst.
900
800
700
500
400
300
Ingen teal- eller blåtoner. Alle tekstkombinasjoner er regnet ut mot WCAG AA: brødtekst ligger på 13,5:1, krem på skogsgrønn på 9,5:1, og tekst på gull på 8,1:1.
Typografi
Poppins bærer, Inter jobber
Poppins brukes kun til overskrifter og tall som skal treffe. Inter gjør alt annet. Blander man dem, forsvinner forskjellen, og da er det ingen grunn til å ha to.
Hero
Poppins 700 · 72 px
La det skje
H1
Poppins 700 · 48 px
Design og drift
H2
Poppins 700 · 36 px
Tydelige priser
H3
Poppins 700 · 24 px
Er dette deg?
Brødtekst
Inter 400 · 16 px
Aldri bredere enn 65 tegn.
Liten
Inter 400 · 14 px
Den mest brukte graden i kodebasen.
Versaler under 14 px trenger sperring på 0,2em, ellers blir de en grå kloss. Brødtekst settes aldri bredere enn 65 tegn.
Komponenter
Delene systemet er bygget av
Hver komponent har én jobb, og reglene rundt den er skrevet ned fordi de har kostet noe å finne ut av.
Knapper
Høyden er 48 px som standard, 44 px er minste treffflate på berøring, og 56 px brukes til primærhandlingen i en hero.
Status
Både flate og strek bærer informasjon, ikke bare ordet. Da kan status leses i et blikk nedover en liste.
UtkastSendtAkseptertAvslåttArkivert
Prisblokk
Møt kunden med enhetsprisen, ikke årssummen. «40 kr per deltaker» leses som rimelig, «kr 22 000» leses som dyrt, selv om det er samme pris.
Pris
40 kr / per deltaker
Beregnet på 550 deltakere blir det 22 000 kroner for året. Faktureres etter arrangementet basert på faktisk deltakertall.
Sekskant med hake
Markøren foran punktene i lister. Sekskanten er avflatet på topp og bunn, ikke spiss, og den formen gjentas i merkevaren.
Liten bedrift, store ambisjoner
Profesjonelt uten at det koster som et stort byrå.
Personlig, ikke generisk
Noe som ser ut som din bedrift, ikke en mal.
Kort
Dybden kommer fra farge, ikke fra skygge. Legger man skygge på alt, forsvinner forskjellen mellom det som ligger oppå og det som ikke gjør det.
Standard
Kremflate med hårstrek.
Flatt
Kun strek, ingen fyll.
Invertert
Stopper blikket.
Bevegelse
Tilstand, ikke koreografi
Nesten alt ligger mellom 120 og 300 millisekunder, og bare transform og opacity animeres. Alt kan slås av med prefers-reduced-motion.
cubic-bezier(0.23, 1, 0.32, 1)
Systemets kurve. Rask ut, mykt inn. Brukes på alt som reagerer på berøring. Trykk på knappen for å kjenne den.
120 ms
Trykk
200 ms
Hover og farge
300 ms
Standard
500 ms
Innhold ved scroll
Rom og radius
Skala basert på fire
Radius vokser med flaten. Jo større flate, desto rundere hjørne, ellers ser den skarp ut.
tight8pxEtikett og felt, ikon og tekst
inside16pxInnad i en gruppe
between32pxMellom grupper
section96pxMellom seksjoner
felt 12px
knapp 14px
kort 20px
seksjon 24px
hero 28px
Prinsipper
Reglene vi holder oss til
Ikke smakssaker. Hver av dem har kostet tid å finne ut av, og de er skrevet ned så de ikke må oppdages på nytt.
Én palett, ikke to
Mørkt tema bytter roller i stedet for farger. Skogsgrønn blir grunn, krem blir tekst. Derfor må hver farge hentes fra samme sett som flaten bak den.
Gull betyr handling
Aldri dekor. Én gull-knapp per skjermbilde, ellers peker ingenting noe sted.
Ingen sidescroll i en boks
En tabell som scroller sidelengs på mobil skjuler den siste kolonnen uten å si fra, som regel nettopp den man skulle sammenligne med. Tabeller blir kort under 768 px.
Bevegelse kan slås av
Alt som animeres respekterer prefers-reduced-motion. Fokusringen vises kun for tastaturbrukere, så musopplevelsen er uendret.
Tall trenger enhet
Et stort tall uten enhet leses som en kostnad. Med enhet leses det som en pris.
Etiketten må være sann
Et nøkkeltall med feil etikett er ikke en designdetalj, det er en faktafeil i et kundedokument.
Om systemet
Verdiene her er lest ut av den faktiske koden, ikke bestemt i etterkant. Der bruken var spredt, er den strammet inn til det som dominerte. Trenger noe en verdi systemet ikke har, er det som regel verdt å stoppe opp: enten avslører det et hull, eller så avslører det en dårlig idé.
