← Prosjekter / smådager / Designmanual
/* smådager /*

Designmanual

Farger, typografi og de visuelle valgene som bygger opp smådager-universet. Og hvorfor jeg landet på dem.

Fargepalett

Fargene skal kommunisere varme, trygghet og litt lekhet. Ingen kalde eller kliniske farger. Pastelltoner som ikke skriker, men som likevel skiller seg fra alt som ser ut som en kommunal tjeneste.

Fersken
oklch(80% 0.09 30)
Lyseblå
oklch(88% 0.06 220)
Mykgrønn
oklch(88% 0.07 150)
Nesten svart
#1a1a1a
Bakgrunn
#f7f4f0
💡

Jeg bruker OKLCH i stedet for HEX fordi fargene da er perceptuelt jevne. To farger med samme luminans ser faktisk like lyse ut, uavhengig av fargetone. Det gjør det mye enklere å lage en balansert palett.

Typografi

Outfit for overskrifter fordi den er rund, vennlig og moderne uten å virke barnslig. DM Sans for brødtekst fordi den er ekstremt lesbar på skjerm, spesielt på mobil der de fleste vil bruke smådager.

Heading 1 · Outfit 700
Hva skal vi finne på i dag?
Outfit · Bold 700 · Stor og tydelig
Heading 2 · Outfit 600
Slutt på evig Facebook-leting.
Outfit · SemiBold 600
Body · DM Sans 400
Babysang, svømming, åpen barnehage og mye mer. Filtrert på barnets alder og din bydel.
DM Sans · Regular 400

Visuelt uttrykk

Soft UI. Det betyr store avrundede hjørner (minimum 24px), myk skygge i stedet for harde kanter, og glassmorfisme for å skape dybde uten å bli tung. Ingenting skal føles skarpt eller hardt.

Kort og komponenter stacker dynamisk. På mobil er alt én kolonne med god luft mellom elementene. Det er en app folk bruker med én hånd mens de holder en baby i den andre.

📱

Mobil er ikke et ettertanke her. Det er det primære. Alt designes for mobil først og skaleres opp til større skjermer.

Logo og identitet

Kommer snart.

Komponenter

Tre knappevarianter: primær (svart, pill-formet), magisk aksjon (ferskenfarget, for de viktige handlingene) og ghost (outline, for sekundære valg). Statuser vises som runde badges i passende farge. Søkefelt med stor radius og myk skygge.

Skjermbilder og kodeeksempler kommer snart.

← Tilbake smådager — Oversikt Neste → Claude API-integrasjonen