Scalable Design SystemBuilding a unified design system for the Institute of Marine Research's digital products across light and dark themes.
Institute of Marine Research
The Institute of Marine Research develops digital tools for marine research and field operations. The IMR design system gives product teams a shared foundation built on structured Figma component architecture — variants, properties, Auto Layout, and Variables — across web and mobile.
Value for client
Led HI’s shared design system — one Figma foundation so teams stop rebuilding the same UI across web and mobile.
One visual language across HI products — less drift between teams.
Reusable components and research patterns — faster from brief to screen.
WCAG AA in the token layer for light and dark — accessibility by default.
From one-off frames to a shared system
Teams were rebuilding the same UI differently. The goal: a foundation they could adopt without losing speed or accessibility.
Multiple IMR products needed one shared interface language across web and mobile
Challenge
System response
How the system was built
- 1Foundations & tokens
- 2Variables & theming
- 3Component architecture
- 4Patterns & documentation
- 5Team adoption
Institute of Marine Research
Scalable Design System
Building a unified design system for the Institute of Marine Research's digital products across light and dark themes.
- 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.