Front-end designsystem

Altinns designsystem, som er bygget med Pattern Lab, fungerer som et hjem for våre UI-komponenter og deres tilhørende front-end kode. Designsystemet er i bruk av infoportal, portal og altinn digitalisering.

Siden vi er flere ulike team som jobber med ulike løsninger (men med samme brukergrensesnitt), trenger vi et felles sted for frontend. Dette er for å sikre at vi kun lager komponentene èn gang og at de fremtrer konsistent i brukergrensesnittet selv om de er implementert i ulike løsninger.

Illustrasjon av ulike team som jobber med ulike bakenforliggendesystem, men frontend-koden må gå via et felles designsystem

Pattern Lab

For å bygge designsystemet har vi brukt «Pattern Lab», som er et verktøy for å lage atomiske designsystem. Pattern Lab fungerer som et arbeidsverktøy der frontend-utviklere lager alle UI-komponentene i HTML, CSS og Javasript. Komponentene kan settes sammen til sider, og deretter til en klikkbar prototype som kan brukertestes. Pattern Lab sørger for enkel prototyping og overlevering av CSS, javascript og HTML-kode til backend-utviklere.

Pattern Lab brukes i hovedsak til to formål:

  • Pattern Lab skal være et hjem for alle UI-komponenter med deres styling og retningslinjer. CSS og javascript for komponentene skal kun eksistere og vedlikeholdes her.
  • Pattern Lab skal fungere som prototypeverktøy. Alle maler skal i de fleste tilfeller prototypes og brukertestes før implementering.
  • Kom i gang

    Her finner du veiledning for hvordan du bruker designsystemet i andre løsninger, og hvordan du jobber med videreutvikling av nye komponenter i designsystemet.

  • Frontend retningslinjer

    For å få en felles forståelse av "best practice" for frontend-utvikling i Altinn har vi samlet noen regler for Javascript og CSS, samt utilities-klassene vi opererer med

  • CSS Utilities

    I utgangspunktet skal kun de fargene som er presentert her brukes. Hvis nye farger blir implementert skal dette gås opp med ansvarlig designer.

  • Font og tekststørrelser

    All tekst på Altinn er satt med fonten ‘DIN’ i fire ulike varianter: Light, Regular, Medium og Bold.

  • Grid og layout

    Altinn’s responsive brukergrensesnitt er basert på en 12-kolonners grid layout, samt et sett definerte avstander som tar utgangspunkt i 12px som base.

  • Ikonbruk

    Ikonene er satt sammen til en font ved hjelp av verktøyet "FortAwesome".

  • Universell utforming

    God tilgjengelighet kan hjelpe mennesker med funksjonshemninger å oppfatte innholdet vårt på en meningsfull måte. Det er flere ting vi kan gjøre, men det første og viktigste er å skrive semantisk god HTML.

  • Nettleserstøtte

    Altinn støtter de nettleserne og operativsystemene som er mest anvendt av våre brukere. Vi tester ikke utdaterte eller ikke-supporterte versjoner av nettlesere.