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 the IMR design system — a shared Figma foundation so product teams build consistently across web and mobile.
One shared visual language across IMR web and mobile products — colour, typography, spacing, and component scope with light and dark themes.
A reusable Figma component library — variants, properties, and Auto Layout structured so teams share the same building blocks across products.
- VariantsStates and themes, not duplicate frames
- PropertiesSwap options, keep structure intact
- Auto LayoutBuilt to resize, not redraw
- Variables & tokensOne token set, two themes
Documented patterns for research workflows — data-heavy tables, forms, and navigation — ready for teams to adopt without redesigning the basics.
Structuring components that scale
Multiple IMR products needed one interface language — but teams were rebuilding the same components differently. The system had to scale through reuse, not one-off frames.
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
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.