Building a shared product language from foundations and components through guidance that teams could use in practice.
ProjectDesign System Framework
ChallengeBring consistency to a growing set of products
My workFoundations · Components · Guidelines · Documentation
Foundations / Color roles and usageComponents / Variants and statesComponents / Progress and feedback
01 / Context
A system for shared decisions.
Without a dedicated UX setup, product teams had developed different ways of solving similar interface problems. Components varied between products, guidance was scattered, and implementation often depended on local interpretation.
My contribution spanned reusable components, visual foundations, usage rules and documentation. The system had to support existing products while giving future design and development a more consistent starting point.
The first release established the baseline. The second made the system more structured, discoverable and suitable for use across a larger organization.
Scope
Cross-product UI foundations and component system
Input
Existing product patterns, implementation needs and system gaps
Focus
Consistency, usability and developer handoff
02 / Evolution
Build the baseline. Then make it usable at scale.
V1 defined the language. V2 refined how people find, understand and apply it.
Version 01 / Foundation
Establish the system
Design principles, core visual rules, reusable components and decision guidance created a shared starting point for product work.
Principles and UX guidance 01
Colors, type, spacing and layout 02
Components and decision trees 03
Version 02 / Refinement
Make the system easier to apply
The library was reorganized for a broader organization, with clearer component pages and a searchable place to consume the guidance.
Usage rules and examples 01
Accessibility and micro interactions 02
Figma specs + ZeroHeight documentation 03
03 / Structure
One ecosystem, several layers.
The system connected the decisions that shape an interface with the assets and guidance needed to implement it.
01
Foundations
Color, typography, spacing and layout anatomy.
02
Components
Reusable patterns, variants and visible states.
03
Guidelines
When to use a pattern, with examples and decision support.
04
Documentation
Accessible references for design and development teams.
04 / Foundations
Rules that hold across screens.
The foundations define the visual vocabulary and the conditions for using it. Their value is in consistent decisions across different interfaces, not in the individual swatches or numbers alone.
ColorRoles, shades and semantic useTypographyHierarchy and usageSpacingShared scale
05 / Components
Specify the states people build.
The component library captures variants and states for recurring interactions. Buttons show action hierarchy; upload patterns cover progress, completion and failure. The V2 guidance adds clearer rules for choosing and applying them.
The wider library also covers feedback and control patterns such as alerts, pagination, segments and loaders.
ButtonsAction hierarchy and statesUploadProgress and recovery states
06 / Documentation
Make the right choice easier to find.
V2 brought guidance into a centralized, searchable ZeroHeight portal. Component pages gained clearer usage rules, examples and Do’s and Don’ts, alongside new accessibility and micro interaction sections.
Figma remained the collaborative source for editable design specs. ZeroHeight made the guidance easier to consume during implementation and onboarding.
FigmaDesign files, specs and reusable assets
ZeroHeightUsage rules and implementation reference
Product teamsShared decisions across product surfaces
Layout anatomy is one example of the detailed rules available to implementation teams.
07 / Result
A stronger base for product work.
The work turned individual UI decisions into a system teams could reference, extend and implement.
V1 established a common foundation. V2 made its rules clearer and easier to discover, with more complete guidance for accessibility, component use and motion.
The durable design decision was to treat documentation as part of the system itself: components become more useful when the reasoning behind them is available at the moment of use.
Project navigation
Previous project
Predictive Analytics
Making customer predictions clearer to interpret and act on.
