smådager · underartikkel 01
Design Figma Typografi

Designmanual og identitet

Fargevalg, typografi og logoprosessen bak smådager. Hvordan vi gikk fra en blank Figma-fil til en identitet som skal kjennes varm, moderne og menneskelig.

Utgangspunktet

Smådager skal ikke se ut som en kommunal tjeneste. Det er det første og viktigste designkravet. Norske kommunale digitale tjenester er nesten alltid enten for formelle, for rotete eller begge deler på én gang.

Smådager skal se ut som noe en forelder laget fordi hun trengte det selv. Det betyr at designet må balansere mellom det profesjonelle og det personlige, uten å falle ned i noen av de to grøftene.

Fargepalett

Paletten er bygget rundt en rolig, mellomstor blå som primærfarge, med gult som eneste aksent. Gult brukes utelukkende på to steder: CTA-knapper og gratis-merking på aktiviteter. Det gjør at øyet raskt lærer hva gult betyr på siden.

Dyp Blå (Tekst)
#2A5F89
Primær · nav · overskrifter
Sennepsgul (Aksent)
#FDB721
CTA-knapper · gratis-merking
Lys Blå (Bakgrunn)
#E3F1FA
Sidebakgrunn · kortbakgrunn
Mellomblå (UI)
#A8D1EF
UI-elementer · kanter · hover
Hvit
#FFFFFF
Kortbakgrunn · kontrast
Sennepsgul (Gratis)
#FFF5D6
Gratis-badge bakgrunn
Gul er en sårbar farge. For lite og den forsvinner. For mye og den roper. Her brukes den kun der den faktisk betyr noe — aldri bare som dekorasjon.

Typografi

Smådager bruker to fonter: Nunito 800 til overskrifter og logo, og Outfit 300–500 til brødtekst og UI-elementer.

Nunito er rund og varm uten å bli barnslig — den runde geometrien i bokstavene gir en vennlig, åpen kvalitet som passer tjenestens tone. Outfit er moderne og lett, og fungerer godt i alle størrelser fra 11px til 20px.

smådager Nunito 800 · 32px · logo
Babysang på biblioteket Nunito 700 · 24px · overskrift
Torsdager kl. 10:00 · 0–18 måneder · Gratis Outfit 400 · 15px · brødtekst
Lohavn · Musikk · Bibliotek Outfit 300 · 12px · metadata

Logo

Logoen er ordmerket "smådager" i Nunito 800 med én bevisst endring: d-en er farget gul. Det er en referanse til en barnevogn — d-en som bokstav har et langt strekk (håndtaket) og en rund bue (vognkroppen). Det er subtilt nok til at ikke alle ser det med en gang, men tydelig nok til at det er minneverdig.

Ikonet er under utvikling som en selvstendig versjon av d-en, egnet til favicon og app-ikon.

smådager
smådager
smådager
smådager
Det viktigste med logodesignet er at det er en beslutning, ikke en tilfeldighet. Den gule d-en er enten noe du ser og lurer på, eller noe du ser og forstår. Begge reaksjoner er riktige.

Hva gjenstår

Ikonet er planlagt men ikke ferdig. Designmanualen i Figma dekker farger, typografi og komponentbibliotek, men animasjoner og microinteraksjoner er ikke dokumentert ennå. Det kommer etter at MVP er satt i produksjon.