Skalerbart designsystemBygget et enhetlig designsystem for Havforskningsinstituttets digitale produkter på tvers av 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 arbeidet med HI-designsystemet — et delt Figma-fundament slik at produktteam kan bygge konsekvent på tvers av web og mobil.
Ett delt visuelt språk på tvers av HIs web- og mobilprodukter — farge, typografi, avstand og komponentomfang med lyse og mørke tema.
Et gjenbrukbart Figma-komponentbibliotek — varianter, egenskaper og Auto Layout strukturert slik at team deler de samme byggeklossene på tvers av produkter.
- VarianterTilstander og tema, ikke dupliserte rammer
- EgenskaperBytt alternativer, behold strukturen
- Auto LayoutBygget for å skalere, ikke tegne på nytt
- Variables og tokensEtt token-sett, to tema
Dokumenterte mønstre for forskningsarbeidsflyter — datatunge tabeller, skjemaer og navigasjon — klare for team å ta i bruk uten å redesigne det grunnleggende.
Strukturerte komponenter som skalerer
Flere HI-produkter trengte ett grensesnittspråk — men team bygget de samme komponentene på nytt på ulike måter. Systemet måtte skalere gjennom gjenbruk, ikke engangskomponenter.
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
IMR Design System
A comprehensive, token-driven design system built for the Institute of Marine Research — enabling consistent, accessible, and scalable interfaces across all research platforms.
- 30+
- Components
- 600+
- Design Tokens
- 6
- Breakpoints
- 2
- Color Modes
System at a Glance
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
Design Principles
Token-first
Every value references a named token — no raw hex or hardcoded px.
Accessible
WCAG AA contrast ratios enforced at the token level.
Scalable
Tokens and components extend without breaking existing usage.
Consistent
One pattern per use case, documented with clear rationale.