Designprofil

Her finner du Utdanningsdirektoratets designprofil og retningslinjer for hvordan profilen skal brukes. Logo, typografi, farger og bilder skal brukes slik vi beskriver her. 

All bruk av Utdanningsdirektoratets designprofil skal avklares med vår Stab for kommunikasjon. Kontakt oss på media@udir.no.

Logo

Vi har to ulike logoer, en hvor navnet skrives fullt ut og en med forkortelsen Udir.

  • Det skal alltid være god kontrast mellom logo og bakgrunn.
  • Logoens utseende, proporsjoner og farger skal ikke endres.
  • Logotypografien skal ikke brukes uten logosymbolet.

Logoen må ha tilstrekkelig rom rundt seg. Andre objekter skal plasseres utenfor klaringen som vist under.

Logoen kommer i tre språk, bokmål, engelsk og samisk. 

Ulike logoer for Utdanningsdirektoratet 

For digitale flater skal det være en klaring tilsvarende en halv U. Logoen skal minimum være 34 piksler høy. Bredden vil variere ut fra hvilket språk logoen er skrevet på.

Eksempel på logoklaring (jpg)

Logosymbolet er en U. Logosymbolet er ikke egen logo og skal kun brukes unntaksvis når det er helt tydelig at det er Utdanningsdirektoratet som er avsender. Logosymbolet brukes som ikon på faner i nettløsninger (favicon)​.

Logosymbol grønn bakgrunn (png)

Logosymbol hvit bakgrunn (png)

Fargepalett

Udir-grønn er en tydelig farge og den mest karakteristiske profilfargen. Den synes like godt på svart og hvit bakgrunn. Den bør ikke brukes i store mengder og er forbeholdt detaljer hvor den utgjør en kontrast.

Den sekundære fargepaletten består av nøytrale farger som harmoniserer med merkevarefargen uten å stjele oppmerksomheten. De lyse fargene er nedtonet og kan fint brukes på flater og detaljer uten at det dominerer uttrykket. Fargekontraster må være sterke nok til å gi god lesbarhet. Alle farger kan brukes i prosenter.

  • For trykksaker bruk CMYK
  • For skjerm brukes RGB

Udirs hovedfarger er grønn, eggeskall, fersken, lys azur, stålblå og skifer. For nettjenester fins hovedfargene også i lysere og mørkere nyanser til bruk i kombinasjon med tekst, grafikk og diagrammer. I tillegg fins det støttefarger for nettjenester.

Bilde av fargene som er beskrevet i teksten rett under på siden.

 Grønn

  • Fargekode for hovedfargen er #7DBF9D (RGB: 125, 191, 157) (CMYK: 55, 3, 47, 0).
  • Fargekoder for nyanser er #DEF2E7, #B9E1CC og #447266

Grønne sirkler som viser fargene beskrevet i teksten på siden

Eggeskall

  • Fargekode for hovedfargen er #F2E8DA (RGB: 242, 232, 218) (CMYK: 6, 9, 16, 0)
  • Fargekoder for nyanser er #DBC7AC, #BFA687 og #7F6D56

Sirker som viser fargenyanser av eggeskall beskrevet i teksten på siden

 Fersken

  • Fargekode for hovedfargen er #EED0C3 (RGB: 238, 208, 196) (CMYK: 6, 22, 21, 0)
  • Fargekoder for nyanser er #F8E7E0, #DDAA95 og #9D5038

Sirker som viser fargenyanser av fersken og fargekoder som beskrevet i teksten på siden

Lys azur

  • Fargekode for hovedfargen lys azur er #E2E3F1 (RGB: 226, 228, 241) (CMYK: 13, 9, 2, 0)
  • Fargekoder for nyanser er #C7C9E3, #999CBF og #666883

Sirker som viser fargenyanser av lys azur og fargekoder som beskrevet i teksten på siden

 Stålblå

  • Fargekoden for hovedfargen stålblå er #BAC6D8 (RGB: 186, 198, 216) (CMYK: 31, 17, 9, 1)
  • Fargekoder for nyanser er #DCE5F3, #8B9CB5 og #4E6689

Sirker som viser fargenyanser av stålblå og fargekoder som beskrevet i teksten på siden

Skifer

  • Fargekoden for hovedfargen skifer er #6D889D (RGB: 109, 136, 157) (CMYK: 56, 32, 22, 18)
  • Fargekoder for nyanser er #D9E5F1, #B7CCDC og #2F4960

Sirker som viser fargenyanser av skifer og fargekoder som beskrevet i teksten på siden

Støttefarger

For nettjenster har vi støttefargene mørkeblå og mørkegrå. 

Mørkeblå #00468E skal brukes når man holder musepekeren over knapper og lenker.

Bilde som viser mørkeblå med fargekode som beskrevet i teksten på siden 

Mørkegrå #303030 brukes for eksempel på tekst, dekorlinjer, knapper og bakgrunner. Fargekoder for nyanser av grå er #F4F4F4 og #EAEAEA. Det er mulig å utvide gråskalaen ved behov. Hvit har fargekoden #FFFFFF.

 

Bilde som viser mørkegrå med nyanser og fargekode som beskrevet i teksten på siden

Typografi

Vi bruker et enkelt typografisk hierarki med få nivåer. Unngå mange ulike tekststørrelser i samme flate. En linjeavstand på 1,2 ganger tekstens punktstørrelse utnytter plassen effektivt. Vi bruker tekstspalter for å unngå linjebredder over 13 cm i håndholdte trykksaker.

Roboto – Udirs hovedfont for web og trykksaker

Roboto er en moderne, geometrisk og karaktersterk font med høy lesbarhet. Roboto er godt egnet for mengdetekst i liten størrelse, både på skjerm og trykk. Proporsjonene tillater en lav linjehøyde som gjør skriften plasseffektiv og gir rom for luft.
Last ned fonten Roboto her

Montserrat

Montserrat er en funksjonell og dekorativ font som er godt egnet til overskrifter. Denne fonten kan brukes til overskrifter.
Last ned fonten Montserrat her

Font som er lett å lese for yngre barn

Mulish er en barnevennlig font som er bygd opp av enkle geometriske grunnformer.
Last ned fonten Mulish her

Til excel og store dokumenter med tall brukes roboto eller calibri.

Bildebruk

Vi har et bibliotek med bilder. Disse kan du kun bruke som illustrasjonsbilder når Utdanningsdirektoratet er avsender. Det er ikke mulig for andre enn Utdanningsdirektoratet å bruke bildene våre.

Bildene kjennetegnes ved at de har en positiv tone som viser frem barn, elever og ansatte i barnehage og skole. Vær bevisst på hvilken kontekst du bruker bildene i.

Nettjenester

Vi har laget prinsipper for hvordan toppfelt og bunnfelt skal være på nettjenester fra Udir for å ivareta designprofilen.

Udir.no

Det er kun udir.no som har logo plassert øverst til venstre i toppfeltet.

Andre nettjenester fra Udir

Nettjenestens navn skal være plassert øverst til venstre i toppfeltet med en klaring på 40 piksler fra venstre. Fonten på tjenestens navn skal være Montserrat medium 24 piksler i fargen mørkegrå #303030. Høyden på toppfeltet skal være 80 piksler på desktop og 40 piksler på mobil.

Klikk på tjenestens navn, skal føre brukeren tilbake til forsiden av tjenesten. 

Eksempel på toppfelt (jpg)

Ved behov for søkefelt, skal dette plasseres øverst til høyre på det hvite feltet med en klaring på 40 piksler fra høyre kant. Søk-knappen skal være i fargen mørkegrå #303030.

Ved behov for menyvalg i det hvite feltet, skal disse være med Montserrat medium 14 piksler i fargen mørkegrå #303030. Mellom menyvalgene skal det være en horisontal strek. 

Ved behov for sort menyfelt, skal feltet være 50 piksler høyt. Menyvalgene skal være hvit tekst #FFFFFF Montserrat medium 16 piksler. Når du holder musepeker over skal menyvalgene ha uendret font, men skifte til fargen grønn #B9E1CC. Mellom menyvalgene skal det være en horisontal strek. 

Eksempel på toppfelt med søk og menyvalg (jpg)

Udir.no

Bunnfeltet skal være mørkegrå #303030 med hvit tekst #FFFFFF. Lenker skal ha hvit understreking.

Andre nettjenester fra Udir

Bunnfeltet skal være mørkegrå #303030 med hvit tekst #FFFFFF. Lenker skal ha hvit understreking.

Bunnfeltet skal ha Utdanningsdirektoratets logo nederst til venstre med en klaring på 40 piksler. Klikk på logoen skal føre til forsiden av udir.no.

Bunnfeltet skal ha teksten "[...Tjenestenavn...] er levert av Utdanningsdirektoratet" midtstilt i Montserrat Semibold 14/23 piksler. Menypunkter i bunnfeltet skal være i Montserrat Regular 14/23 piksler og minimum omfatte:
  • Om [....Tjenestenavn...]
  • Kontakt
  • Personvernerklæring

Klikk på menypunktene skal føre til egne sider på nettjenesten. Det skal være grønne vertikale streker mellom menypunktene. 

Eksempel på bunnfelt (jpg)

Det er valgfritt om tjenesten vil ha en knapp med lenke til udir.no i bunnfeltet. Knappen skal i så fall være grønn og plassert til høyre.

Eksempel på bunnfelt med knapp til udir.no (jpg)

På mobil skal klarering over og under logo være 40 piksler. Klarering over menyfeltet skal være 30 piksler. 

Eksempel på bunnfelt mobil (jpg)

Bunnfeltet skal ha en pop-up hvor brukerne kan lese mer om og godta informasjonskapsler tjenesten bruker.

Nettjenester basert på standardverktøy og nettjenester Udir eier sammen med andre skal følge designprofilen så langt det er mulig. Kontakt media@udir.no for å få råd.

Universell utforming

Alle trykksaker og nettløsninger skal være universelt utformet. Les om kravene til universell utforming på uutilsynets nettsider.

Fant du det du lette etter?

0/250
0/250

Tusen takk for hjelpen!