Design System
At Reframe, I designed and built a new design system from the ground up—creating a centralized, scalable foundation that accelerated product development and improved consistency across web and mobile. I crafted core components with accessibility and cross-platform needs in mind, and introduced tooling that streamlined collaboration between design and engineering. The system reduced the time to build and ship features and made onboarding smoother for new team members.
The component library is intentionally lean, with 32 components organized into four categories: Controls & Actions, Navigation, Layout & Organization, and Presentation.
A sample of our base color library
A sample of our semantic color library
The foundation layer includes 12 color-set primitives, a robust semantic color system, a primary type scale, and standardized elevation styles.
Along with establishing the color system, I incorporated theming in an effort to future-proof the design and allow us to support system-level dark mode to bring additional accessibility features to our users. Our dark mode theme goes beyond accessibility and user comfort—it’s a thoughtful extension of the Reframe brand. Deep, rich tones not only support easier evening reading and visual comfort, but also anchor the theme in our brand’s identity.
A sampling of some screens in both light mode and dark mode