Esri · Calcite Design systems
Calcite Design System
Rebuilding the foundations for a growing product portfolio.
- Role
- Design System Designer
- Product
- Calcite Design System
- Contribution
- Components, tokens and theming
- Team
- Design team reduced from 7 to 3
The overview
Esri’s Calcite library needed to support a growing product portfolio. Inflexible components, limited theming and gaps between design and code made the system harder to use and maintain.
The goal
Rebuild the library around reusable foundations, clear guidance and adaptable themes.
My contribution
I helped rebuild the UI kit, championed Figma component properties and led the introduction of design tokens. I also helped align the design library with its implementation in code.
Start with the designers using it.
Interviews across business units, competitor analysis and component usability tests exposed friction in finding, understanding and using the library. Clearer ownership, documentation and handoff mattered as much as the components themselves.
Rebuild for reuse.
Working with the remaining design team, I helped reconstruct the foundations and core components. Figma component properties made variations easier to configure, giving designers flexibility without creating disconnected copies.
Connect decisions through tokens.
I introduced design tokens for shared colours, typography and spacing using the Design Tokens for Figma plugin. A year later, we migrated the tokens to native Figma Variables, keeping the system connected to developer workflows.
Make the system adaptable.
The rebuilt library supported more flexible themes while retaining a shared component structure. Documentation and clearer handoff helped the smaller team maintain consistency and keep the system moving.
Where it landed.
Calcite gained a more maintainable UI foundation, more flexible theming and clearer design-to-code alignment. The project reinforced the value of research and shared standards when a team has fewer people to carry the work forward.
