Architecting scale:
From static UI kits to a living ecosystem

Architecting scale:
From static UI kits to a living ecosystem

Operationalizing consistency across web and mobile through a three-tier token architecture and sustainable governance.

A bento-style isometric composition of the Aviary Design System UI library. It showcases a diverse range of modular components including high-fidelity buttons, semantic alert banners (Critical, Warning, Info), form inputs, segmented tabs, and navigation menus. The visual style is clean and modern, demonstrating a cohesive brand identity across various UI states and variants.

Context

Context

Fullscript 2024-2026

Fullscript 2024-2026

Role

Role

Systems Designer (Product)

Systems Designer (Product)

Status

Status

Launched Sept 2025 (BETA)

Launched Sept 2025 (BETA)

Context

As Fullscript expanded, I played a key role in the evolution of Aviary, a multi-platform design system. I led a strategic audit of the existing library to consolidate components and streamline our scope for a multi-platform environment. By architecting the token structure and documenting its application, I helped create a scalable framework that synchronized design and engineering workflows across web and mobile.

Challenges

Platform Expansion

A mid-project pivot to native iOS required a flexible architecture that could serve both web and mobile teams from a single source of truth.

Legacy Cleanup

The codebase was filled with custom components. I partnered with Engineering to audit these patterns, consolidating or eliminating them to ensure a clean foundation.


High-Velocity Delivery

To meet the September 2025 launch date, I organized weekly rapid-feedback sprints to identify and prioritize the most critical components for launch.

Scaling with intent

I moved the organization away from hard-coded values and toward a multi-tier token structure, ensuring the system remained a living ecosystem rather than a static library.

Foundation to component

A technical diagram illustrating Aviary’s three-tier design token architecture applied to an 'Add to Cart' button. The diagram tracks the inheritance flow from Global tokens (hex codes and raw values) to Semantic tokens (purpose-based logic like 'colour/shade/light/700'), and finally to Component-specific tokens. It highlights specific mappings for padding, corner radius, height, and typography to demonstrate 1:1 parity between design and code.

Scaling with Intent

I moved the team away from hard-coded values toward a multi-tier token structure, ensuring the system remained a living ecosystem rather than a static library.

This architecture allows a single brand update to instantly update over 50 components. This automation removes manual maintenance and ensures that design and code never drift apart.

"Building a system is only half the battle; the real work lies in the stress-testing and governance that ensures it survives its first 1,000 users."

Thomas Le

Product Designer

Accessibility & theming

Cross-platform logic

We automated accessibility by building semantic logic to handle light and dark modes. This removed "colour guessing" and ensured every component meets contrast standards by default.

We automated accessibility by building semantic logic to handle light and dark modes. This removed "colour guessing" and ensured every component meets contrast standards by default.

To solve for platform parity, I partnered with native engineers to align our documentation and build approaches that accounted for platform-specific patterns. This created a single source of truth that cut development guesswork significantly and resulted in 4x faster handoff during high-stakes prototyping cycles.

Conclusion

This project was about more than just building a library. It was about creating a sustainable model for unified product development. By stress-testing every component state and focusing on accessible, reusable building blocks, I provided a foundation that allows the company to scale without sacrificing quality or speed.

70%

Core flow adoption

Remaining 30% prioritized for legacy technical debt and specialized edge cases.

95%

Design token coverage

5% intentional flexibility reserved for high-innovation experimental patterns.

4x

Faster handoff

Validated through accelerated prototyping cycles during strategy onsites.

"As a design system owner, Thomas contributed meaningfully to how the system evolved over time and played a vital part in rebuilding our system components to create engineering parity."

Brittany Clark

Sr. Product Designer | Fullscript | LinkedIn Recommendations

FAQs

How did you manage adoption across the organization?

What did the contribution model look like?

What was your biggest takeaway from this project?

Let's turn good ideas into great products.

I am a product designer focused on building scalable systems and end-to-end user experiences that drive business growth.

Let's turn good ideas into great products.

I am a product designer focused on building scalable systems and end-to-end user experiences that drive business growth.