Case study ยท Design systems
Web and iOS shared no visual language, so I built the first unified design system for construction management software.
A library of design tokens, components, and Storybook documentation for Component Assembly Systems, built for web and iOS.
- Role
- Lead product designer
- Timeline
- 2024 to present
- Platform
- Web and iOS
- Status
- In active use, documented in Storybook
- FirstUnified design system across web and iOS
- 25%Faster development cycles, from the project summary
- StorybookDocumentation for design and components
Step 1 · Context
Construction management software across web and iOS needed one visual language and one set of reusable parts.
I built the design system for Component Assembly Systems’ construction management platform. It spans web and iOS, with a unified visual language, reusable components, and documentation that speeds up development.
Step 2 · Design tokens
Tokens came first, so every component inherits color, type, spacing, and icons from one source.
Spacing and sizing
--cas-spacer-xxs: 0.25rem; /* 4px */
--cas-spacer-xs: 0.5rem; /* 8px */
--cas-spacer-sm: 0.75rem; /* 12px */
--cas-spacer: 1rem; /* 16px */
--cas-spacer-md: 1rem; /* 16px */
--cas-spacer-lg: 1.25rem; /* 20px */
--cas-spacer-xl: 1.5rem; /* 24px */
--cas-spacer-xxl: 2rem; /* 32px */
--cas-spacer-xxxl: 3rem; /* 48px */Step 3 · Final design
Buttons, cards, tables, and form controls, specified so they are ready for production.
All design and component documentation lives in Storybook.
Step 4 · Impact
The first unified design system gave engineering a foundation for faster, more consistent features.
- Established the first unified design system across web and iOS
- Reduced design-to-development handoff time with production-ready component specifications
- Created a foundation for rapid feature development and a consistent user experience
- Documented design tokens and usage guidelines for the engineering team