The process of building a comprehensive design system from the ground up, enabling designers and engineers to work better together.
Design systems serve as the backbone of exceptional products, preventing the chaos of inconsistent experiences that frustrate users and burden development teams. At Spekit, I spearheaded the design system from initial concept through ongoing maintenance, transforming how our product delivered value to customers.
This foundational work ignited my passion for design systems and their power to align cross-functional teams. I've seen firsthand how thoughtful component libraries and clear guidelines strengthen collaboration between designers and engineers, creating more efficient workflows and better outcomes.
Implementing Spekit's design system delivered transformative results across the organization. By establishing consistent design standards, we refactored legacy components and streamlined our codebase while creating a cohesive user experience.
Over three years, I led the creation of 50+ reusable components that became the foundation for all product development, achieving 100% adoption across the engineering team and significantly accelerating our development velocity.
A simple audit revealed over 70 distinct button instances.
When I joined Spekit, the absence of a design system created significant challenges across the organization. Without consistent design standards, the product suffered from fragmented user experiences, while engineers faced inefficiencies from rebuilding similar components and lacking clear implementation guidelines. This inconsistency ultimately impacted both our development velocity and user satisfaction.
Successful design systems require strategic tool selection that amplifies efficiency and impact. The right tools are fundamental to building design systems that scale effortlessly, meet accessibility standards, and deliver intuitive user experiences.
Base library of accessible react components customized to the needs of Spekit's design system.
Front-end design system management tool for developers to design, build, and organize components and their documentation.
Interface design tool that enables designers to create, organize, and maintain reusable UI components, variables, and guidelines for seamless design-to-development workflows.
Open-source set of neutral-style system symbols crafted with readability, consistency, and pixel perfection in mind.
Establishing a cohesive color palette is fundamental to creating a recognizable brand identity and intuitive user experience. At Spekit, I developed a strategic color system that combined carefully curated palettes with intentional color duos to create visual consistency across features and components.
Color palettes
Color variables use solid color values, such as #00000 or #FFCD29. They help organize our brand color palette and make it easier to associate color values to the corresponding color token code syntax used in the design system.
primary.25
#F7F5FD
var(--spekit-colors-primary-25)
primary.50
#ECECFC
var(--spekit-colors-primary-50)
primary.100
#E0D8FA
var(--spekit-colors-primary-100)
primary.200
#D1C5F7
var(--spekit-colors-primary-200)
primary.300
#A28BF0
var(--spekit-colors-primary-300)
primary.400
#7452E8
var(--spekit-colors-primary-400)
primary.500
#653FE6
var(--spekit-colors-primary-500)
primary.700
#5032B8
var(--spekit-colors-primary-700)
primary.800
#3C258A
var(--spekit-colors-primary-800)
primary.900
#321F72
var(--spekit-colors-primary-900)
Color duos
Colors duos consist of two color values (25 and 500) that are used to establish visual recognition for core Spekit features without needing to create an entire palette.
royal.25
#F5F9FF
var(--spekit-colors-royal-25)
royal.500
#0B6Cff
var(--spekit-colors-Royal-500)
Standardized spacing creates visual harmony across interfaces and components. A defined set of spacing tokens eliminates guesswork and accelerates design and development workflows.
For product icons that convey important interactions (edit, share, delete, etc), we used the Remix Icon library. Remix offers both fill and line versions of each icon, but we consistently used the line style in almost all cases.
I organized icons into logical sections for intuitive discovery. Using individual icon components paired with a base IconWrapper enabled dynamic sizing without duplicating components across different size variants.
Consistent typography forms the foundation of brand identity. I implemented Open Sans as our primary typeface and created Figma typography variables controlling all text properties—enabling design consistency and seamless design-to-code translation via Dev Mode.
Form components are foundational interface elements that demand exceptional usability. Intuitive form design reduces user effort and increases completion rates by eliminating ambiguity in user interactions.
A simplified button hierarchy helps users instantly recognize each button's purpose. We established four core variants—primary, secondary, tertiary, and danger—to create clear visual priority while maintaining intuitive interactions.
Modular parent components serve as the foundation for all form elements, allowing text inputs, dropdowns, toggles, and checkboxes to inherit consistent styling and behavior while maintaining individual functionality.
Text fields
Dropdowns
Modular components thrive on simplicity. Even complex components like tables can be deconstructed into flexible building blocks that adapt easily to specific use cases.
We prioritized WCAG AA compliance across all development work, implementing accessibility standards for new features and retrofitting legacy components during updates.
Ensured WCAG AA compliance with a 4.5:1 color contrast between text and background colors.
Ensured elements had descriptive aria-labels built into the code so that they could be read by assistive technology such as a screen reader.
Ensured that users could navigate sequentially through content via their keyboard.
Ensured that all interactive elements had a visible focus state when selected via keyboard and met 3:1 contrast requirements.
Design systems are long-term investments that demand patience, meticulous attention to detail, and deep insight into user behavior patterns. Years of building and maintaining design systems have taught me that strategic foresight is essential—always anticipate future needs and build with intentional scalability from the start.
Built with purpose and intention.
Have an opportunity for me? Get in touch so we can create something great together.
