Artsdatabanken designsystem

Artsdatabankens designsystem er en verktøykasse med digitale innholdstyper som brukes til å bygge digitale tjenester. Samt et regelsett og mønstre for hvordan bruke de ulike komponentene.

En innholdstype er eksempelvis titler, paragrafer, knapper og lenker.

Designsystemet er laget for å støtte både lys og mørk modus slik at brukergrensesnitt kan tilpasses brukerens preferanser.

Varianter av ulike innholdstyper slik at det fungerer både på løsninger hvor man kan bruke mye plass, men også der man må vær mer kompakt.

Det er også i henhold til de kravene Artsdatabanken er pålagt når deg gjelder universell utforming, slik at vi ikke ekskluderer brukere med permanente eller midlertidige funksjonsnedsettelser.

---

Teknisk beskrivelse for utviklere

Artsdatabanken designsystem er et sett med gjenbrukbare Web Components og design tokens. Det kan brukes kun som et komponentbibliotek i Angular- eller Reactprosjekter, eller i sin enkleste form som en sentral felles referanse for CSS.

Hva er inkludert?

• Web Components (<adb-button>, <adb-accordion>, osv.) — fungerer i Angular, React og Drupal uten wrappers
• Design tokens — farger, spacing og typografi som CSS-variabler
• Mørk modus — innebygd støtte via prefers-color-scheme eller [data-theme="dark"]
• Ikonbibliotek (<adb-icon>) — optimiserte SVG-ikoner som arver farge via currentColor
• Universell utforming — WCAG 2.1 AA som minimum

Hurtigstart

npm install @artsdatabanken/components

<script type="module">
  import '@artsdatabanken/components';
</script>

<adb-button variant="primary">Klikk meg</adb-button>

Komponenter

PrimærFareSekundærTertiær