TTUI – Design system

Building a design system that maintains visual and functional consistency across multiple projects.

UI library

Design tokens

Documentation

Brand identity

In this article:

My role in this project

Our small and agile frontend team was made of one designer (myself) and three developers. In this project, I was responsible for defining and implementing the design system, ensuring a cohesive and scalable visual language across the product.

Beyond design, I actively collaborated with developers in implementation sessions, bridging the gap between design and code. Leveraging my frontend development skills, I contribute directly to the codebase using VS Code Icon Visual Studio as my code editor—integrating new UI elements, refining interactions, and ensuring design fidelity. Additionally, I manage releases via Github Icon GitHub, enabling a seamless and efficient design-to-development workflow.

Key benefits

Design rules elements and components.

I defined the foundational elements of the design system — including typography scales, color tokens, spacing units, grid structures, and component behavior standards using Figma IconFigma. I crafted a comprehensive set of design assets, ranging from UI components and reusable patterns to responsive layout templates

Tokens and codebase.

I translated each design rule into code tokens within our development environment, ensuring consistency and scalability across the UI. Working closely with developers with Visual Studio Icon Visual Studio, we implemented design elements and components directly in React, contributing to the creation of a robust, reusable design library.

Scaling library.

As a team, we maintain the design system as a living documentation on GitHub Icon GitHub — continuously evolving it by introducing new components, extending the token library, and refining existing patterns to reflect product needs and design maturity.

Documentation.

One of the key objectives of the design system is to streamline the developer workflow by providing ready-to-use, documented components and tokens directly within Storybook Icon Storybook — enabling seamless copy-paste integration and reducing implementation overhead.

Design system in use.

By adopting the design system across multiple projects, we’ve significantly accelerated our development cycles while maintaining a consistent and cohesive user experience. The shared visual language and reusable components reduce design and implementation time, and ensure brand alignment across all products — allowing us to scale design with confidence and efficiency.

Visit thethingsindustries.com

Thank you for reading

More details available on request: pierre.philouze@gmail.com