MIUDESIGNMIUDESIGN
NOEN

Skalerbart designsystemBygget HIs første delte designsystem — ett fundament for web og mobil, lys og mørk.

Oppdragsgiver

Havforskningsinstituttet

Det fantes ikke noe delt designsystem — produktteam bygde UI hver for seg på web og mobil.

Havforskningsinstituttet

Skalerbart designsystem

Bygget HIs første delte designsystem — ett fundament for web og mobil, lys og mørk.

30+
Components
600+
Design Tokens
6
Breakpoints
2
Color Modes

Systemet i korte trekk

Drag to compare dark and light themes

Button

PrimarySecondaryOutlineAccentGhostDestructive

Input

Badge

ActivePendingDraftReviewCompleteError

Dropdown

Norwegian seas
Barents Sea
  • Barents Sea
  • Norwegian Sea
  • North Sea

Toggle

On
Off
Disabled
Loading

Typography

Aa4XL — Display
AaLG — Heading
AaBase — Body
AaSM — Caption

Color

Primary
Secondary
Accent
Neutral
Surface

Table

#NameStatusDepth
001AlphaActive842 m
002BetaPending1,240 m

Chart

Button

PrimarySecondaryOutlineAccentGhostDestructive

Input

Badge

ActivePendingDraftReviewCompleteError

Dropdown

Norwegian seas
Barents Sea
  • Barents Sea
  • Norwegian Sea
  • North Sea

Toggle

On
Off
Disabled
Loading

Typography

Aa4XL — Display
AaLG — Heading
AaBase — Body
AaSM — Caption

Color

Primary
Secondary
Accent
Neutral
Surface

Table

#NameStatusDepth
001AlphaActive842 m
002BetaPending1,240 m

Chart

Designprinsipper

Token-først

Alle verdier refererer til et navngitt token — ingen rå hex eller hardkodede px.

Tilgjengelig

WCAG AA-kontrast bygget inn på token-nivå.

Skalerbart

Tokens og komponenter kan utvides uten å bryte eksisterende bruk.

Konsekvent

Ett mønster per bruksområde, dokumentert med tydelig begrunnelse.

Verdi for oppdragsgiver

Ledet HIs første delte designsystem — ett Figma-fundament slik at team slutter å bygge samme UI fra scratch.

  1. Fra ingen system til ett visuelt språk på tvers av HI-produkter — mindre drift mellom team.

  2. Gjenbrukbare komponenter og forskningsmønstre — raskere fra brief til skjerm.

  3. WCAG AA i token-laget for lys og mørk — universell utforming som standard.

Fra ingen system til et delt fundament