# Designsystem

VTFKs designsystem består av et sett regler som hjelper med standardisering av de digitale løsningene.

## Avstander

Designsystemet er bygd opp med avstandsregler basert på 4px.

Følgende verdier skal gjenbrukes så langt det lar seg gjøre mellom elementer, vertikalt og horisontalt.

<img src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/spacing.png?raw=true" alt="" />

### Vertikal rytme

Ved bruk av avstandsregler oppnås en vertikal rytme som harmonerer med tekst- og linjestørrelser i typografi-komponentene.

<img src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/vertikal-rytme.png?raw=true" alt="" />

## Farger

Designsystemet består av følgende primær- og sekundærfarger.

### Primærfarger

<img src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/farger-primar.png?raw=true" alt="" />

### Sekundærfarger (støttefarger)

<img src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/farger-sekundar.png?raw=true" alt="" />

[< Tilbake til introduksjonen](https://komponenter.vtfk.no/?path=/story/dokumentasjon--introduksjon)