<div class="documentation design">
  <h1 id="designsystem">Designsystem</h1>
  <p>
    VTFKs designsystem består av et sett regler som hjelper med standardisering
    av de digitale løsningene.
  </p>
  <h2 id="avstander">Avstander</h2>
  <p>Designsystemet er bygd opp med avstandsregler basert på 4px.</p>
  <p>
    Følgende verdier skal gjenbrukes så langt det lar seg gjøre mellom
    elementer, vertikalt og horisontalt.
  </p>
  <img
    src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/spacing.png?raw=true"
    alt=""
  />

  <h3 id="vertikal-rytme">Vertikal rytme</h3>
  <p>
    Ved bruk av avstandsregler oppnås en vertikal rytme som harmonerer med
    tekst- og linjestørrelser i typografi-komponentene.
  </p>
  <img
    src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/vertikal-rytme.png?raw=true"
    alt=""
  />

  <h2 id="farger">Farger</h2>
  <p>Designsystemet består av følgende primær- og sekundærfarger.</p>
  <h3 id="primærfarger">Primærfarger</h3>
  <img
    src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/farger-primar.png?raw=true"
    alt=""
  />

  <h3 id="sekundærfarger-støttefarger">Sekundærfarger (støttefarger)</h3>
  <img
    src="https://github.com/vtfk/component-library/blob/main/src/documentation/content/design/farger-sekundar.png?raw=true"
    alt=""
  />

  <p>
    <a
      href="https://komponenter.vtfk.no/?path=/story/dokumentasjon--introduksjon"
    >
      &lt; Tilbake til introduksjonen
    </a>
  </p>
</div>