0→1 · Design system · AI-assisted · Storybook · WCAG 2.2 AA
To comply with my non-disclosure agreement, I’ve omitted confidential information. The data featured here is my own and does not reflect Cloudticity’s views.
The problem
The Cloudticity platform had no shared UI foundation.
As the sole product designer at Cloudticity, I built a design system from scratch to support two product silos: Oxygen and Nitrogen. A scalable foundation was critical for complex, data-heavy workflows.
The platform had been built primarily by backend engineers, without a formal design system. Patterns varied significantly across features, leading to inconsistencies, duplicated work, and a fragmented user experience.
Key challenges
UI patterns varied across product areas, creating an inconsistent experience
Teams rebuilt similar components repeatedly, slowing down development
There was no shared language between design and engineering
Scaling new features introduced more inconsistency over time
My role
As the sole product designer, I led the system end-to-end, defining its foundations, building reusable components, and applying it across the product. I worked closely with product and engineering so the system was practical, scalable, and consistently implemented.
Audited the existing product to identify inconsistencies
Defined foundations: tokens, typography, color, and spacing
Designed reusable components and patterns, integrated into Storybook
Applied the system across real product workflows with engineering
Approach
Building a scalable design foundation
01|Auditing inconsistencies and defining structure
I started by auditing the existing product to identify inconsistencies in UI patterns, components, and interactions across product areas.
Patterns varied from one product area to the next.The audit mapped inconsistent components and interactions across the legacy platform.
02|Establishing foundations and tokens
I defined a system of design tokens covering typography, color, spacing, and layout. Accessibility was built into the foundations, so color contrast, typography, and components met WCAG 2.2 AA from the start.
Typography, color, spacing, and layout tokens
Theming handled through variable modes
Contrast and type scale checked against WCAG 2.2 AA
Tokens and contrast, defined before components.Core and semantic tokens map to light and dark values, and color pairings were checked against WCAG 2.2 AA with Stark.
03|Building accessible, reusable components
I designed a library of reusable components to standardize patterns and reduce duplication across the platform. Reusable React components with Tailwind CSS were integrated into Storybook to support shared documentation, testing, and consistent implementation between design and engineering.
From standardized atoms to fully documented components.Each component carries its variants, properties, and usage notes, so design and engineering work from the same source.
04|Consolidating and refining with AI
As the system evolved, I consolidated overlapping components and standardized patterns. I used AI to stress-test components, explore edge cases, and validate behavior across use cases, which kept the system robust as the product grew.
Property
Rule
State
Interactive states only: default, hover, selected, disabled
Status
Reserved for data and domain values: compliant, suppressed, in progress
Mode
Removed from components, handled by variable modes instead
Naming
Standardized as Component / context / variant
01Light mode
02Dark mode
Mode handled by variables, not components.The same Events screen renders in light and dark from one set of components and semantic tokens.
05|Applying the system and driving adoption
The system was applied across multiple product areas, supporting complex, data-heavy workflows. I worked closely with product and engineering to integrate it into real workflows, so it was adopted and used consistently.
01Events
02Compliance
03Governance
One system, built to scale.The entire platform runs on the same components, tables, and filtering patterns. New sections come together from existing parts instead of new UI.
Outcome
A scalable foundation for every product area
The design system improved consistency, efficiency, and collaboration across teams. Events, Compliance, and Governance now share one set of tokens, components, and patterns, documented in Storybook.
Design and engineering work from the same source, so new features come together faster, with fewer iterations between product and development.
Impact
2 silosOxygen and Nitrogen, built on one system
WCAG 2.2 AAAccessibility built into the foundations
Standardized UI patterns across previously fragmented product areas
Reduced duplication in design and engineering workflows
Faster development of new features using reusable components
Improved design-to-development consistency through shared Storybook documentation
Testimonial
Aleks created our entire design system from the ground up, significantly improving both the aesthetic and usability of our cloud infrastructure monitoring app. Her collaboration and communication skills were essential for designing complex, technical UIs required in cloud infrastructure space. The clear standards she established reduced design iterations between product and development which dramatically sped up our workflow.”
Reflections
This project highlighted the importance of establishing structure early when working on complex, evolving products. Building a design system from scratch reinforced how foundational systems thinking is — not just for consistency, but for enabling teams to move faster and scale effectively.
It also shaped how I approach complex products, focusing first on structure and systems before layering in visual and interaction detail, while ensuring design decisions can scale consistently across implementation and development workflows.
