Typografi

Alle dei digitale løysingane våre nyttar Roboto som er god å lesa på skjerm. Typografi er beskriven i profilmanualen. For skjema gjeld følgjande:

  • Overskrift 48pt
  • Ingress 22pt
  • Skjematittel 36pt
  • Grupperingstittel 24pt
  • Tittel over input, radiobuttons eller checkbox, 16pt Bold
  • Brødtekst og hjelpetekst under blir sett til 16pt Regular

Farger

Profilhåndboken har hele politiets palett, for både trykte og digitale farger.

  • Digital palett er ei avgrensing, for å sikra einsarta bruk. Ho inneheld òg analoge fargeharmonium som funksjonelle fargar for å sikra merksemd for varslar.
  • Ansvarleg for brukaroppleving er òg ansvarleg for universell utforming av fargebruk. . Digtal palett inneheld derfor kontrastnivå for #000000 #ffffff og Pantone Black C / #2D2926.
  • Tekst blir sett i #2D2926, den digitale omsetjinga av Pantone Black C.
  • Call to action er #0072CE
  • Passivknapp har bord #5f5d5c, #ffffff bakgrunn og tekst #2D2926
  • Lenkeknapp #0072CE 16pt Medium text-decoration underline
  • På hover får knappar farge med 20% sort overlay ved mørke fargar eller 10% på lyse fargar
  • Border på skjemaelement blir sett til 2pt #5f5d5c
  • Merkevaregul / Dekorlinje er #FDDA25
  • Alle løysingar skal i utgangspunktet designast på #ffffff, men kan i tillegg innholde ein dark mode på #000000 (flater #2D2926) der dette er funksjonelt nødvendig. For dark mode er call to action #7FB8E6.

Grid

Politiet bruker eit 8x8 grid. Margins skal i hovudsak definerast under og til høgre på element, for føreseieleg flyt.

For skjema gir dette følgjande margin-bottom{}

  • Skjematittel 48pt 
  • Grupperingstittel 32pt
  • Tittel over radiobuttons / checkboxes 16pt
  • Tittel over input 8pt

Kort

Sider som i utgangspunktet grupperer innhald i kort, skal ha bakgrunn #f1f2f3 og kvita kort med bord radius 3pt / 0,3,6 skygga.

Kort i kort eller kort som oppstår i skjema har bakgrunnsfarge #EEF5FB og broder radius 3pt

Feil, varsler og informasjon


Tekniske feil og brukarfeil skal alltid ha ei forklaring (sså klarspråk) og eit forslag til kva som kan gjerast. Dette er feil som forhindrar vidare bruk av ei teneste før dei er løyste, og skal setjast på/med #DF2B36 eller på #F2A7AC. lengre meldingar kan setjast på #FEE6E7 med trygdlinjer i #DF2B36.

Varsel er informasjon som brukaren skal gjerast oppmerksam på, men som ikkje forhindrar bruk. Dei blir sette i #000000 på #EBB500, eller #F7E199. Lengre meldingar kan setjast på #FFF4CC med trygdlinjer #DF2B36.

Stadfestingar på brukarhandlingar, som bekrefta sending av skjema, validert ok, og så vidare blir sette med #26853C.

Informasjon til brukar som blir oppdatert under bruk, som er klikkbar og fører til handling, kan setjast i CTA #0072CE. Om det ikkje er klikkbart, skal positive oppdateringar setjast på #A8CEB1 som stadfesting, eller negative blir sett på #F7E199 som varsel.

Feil i skjema blir sett i #DF2B36 under elementet med feil. Om dette ikkje er synleg i viewport for brukar, skal òg ei kort forklaring setjast under elementet som utløyste validering (feks ein knapp).

 

 

Ikoner

For ikon som skal illustrera eit innhald, kan ikon-pakke lastast ned i profilhandboken. Dette er ikon som eignar seg for storleikar 50pt eller meir.

For funksjonelle systemikon nyttar vi Material Design Sharp (tidl. outline). Dette er ikon som passar med formspråket til politiet, er lett å kjenna igjen, og ein kan enkelt laga etatsspesifikke ikon ved å følgja same oppbygging Ikoner kan lastast ned i ulike formater og bibliotek eller ein kan laga etatsspesifikke ved å nytta material design prinsipper. For interne finst eksisterande i XD-bibliotek.*

  • Ikon skal bera meininga åleine og forenkla
  • For at eit ikon skal oppfattast best mogleg, skal det ha enkle geometriske
  • former og få detaljar. System-ikon er ikkje illustrasjon.
  • Ikon er ikkje pynt. Ikon skal bidra til betre interaksjon og forståing av brukarflate for brukar
  • Eit ikon skal gi tydelege assosiasjonar og meining til brukaren
  • Eit ikon skal bety det same / ha same meining ved bruk på tvers av løysingar.
  • Vêr konsekvent med ikonbruk og variant
  • Bruk ikon der dei gir betre forståing enn tekst (åleine)
  • Ikkje bruk eit ikon med etablert meining til ein fundamental annan funksjon
  • Gjennomfør brukartestar for å sikra at brukaren forstår ikona og at dei forenklar interaksjonen mellom løysinga og brukaren.

Team innlogga tenester jobbar for tida med å laga komponentar som alle dei digitale publikumstenestene til politiet kan bruka. Designsystemet og mønster skal følgjast for alle nettløysingar mot innbyggarar. Ta kontakt med politiet.no@politiet.no for informasjon om design av digitale løysingar.