Skalerbart designsystemEt enhetlig designsystem for HIs digitale produkter — lyse og mørke tema.
Havforskningsinstituttet
utvikler digitale verktøy for marin forskning og feltoperasjoner. HI-designsystemet gir produktteam et felles fundament bygget på strukturert Figma-komponentarkitektur — varianter, egenskaper, Auto Layout og Variables — på tvers av web og mobil.
Verdi for oppdragsgiver
Ledet HIs delte designsystem — ett Figma-fundament slik at team slutter å bygge samme UI på nytt på web og mobil.
Ett visuelt språk på tvers av HI-produkter — mindre drift mellom team.
Gjenbrukbare komponenter og forskningsmønstre — raskere fra brief til skjerm.
WCAG AA i token-laget for lys og mørk — universell utforming som standard.
Fra engangsrammer til et delt system
Team bygget samme UI på ulike måter. Målet: et fundament de kunne ta i bruk uten å miste tempo eller tilgjengelighet.
Flere HI-produkter trengte ett felles grensesnittspråk på tvers av web og mobil
Utfordring
Systemrespons
Slik ble systemet bygget
- 1Fundamenter og tokens
- 2Variables og temastyring
- 3Komponentarkitektur
- 4Mønstre og dokumentasjon
- 5Teamadopsjon
Havforskningsinstituttet
Skalerbart designsystem
Et enhetlig designsystem for HIs digitale produkter — lyse og mørke tema.
- 30+
- Components
- 600+
- Design Tokens
- 6
- Breakpoints
- 2
- Color Modes
Systemet i korte trekk
Drag to compare dark and light themes
Button
Input
Badge
Dropdown
Toggle
Typography
Color
Table
| # | Name | Status | Depth |
|---|---|---|---|
| 001 | Alpha | Active | 842 m |
| 002 | Beta | Pending | 1,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.