Shared design system

One source of truth for every team's UI.

visit poseidon.hydrogenpay.com ↗

role: Senior Frontend Engineer · contributor and adoption lead
period: 2023 – present
stack: ReactTypeScriptNextraAzureDesign tokens

X-ray · under the hood

›design tokens → components → docs site (Nextra)
›data tables · dashboard layouts · sidebar · filters · dropdowns
›one library every team picks components from
›hosted in a private npm registry on Azure
›adoption scheduled into each product team's sprint
›used by up to 10 teams, almost everyone adopted it
›page build time −25%

← drag to peek under the hood →

Illustration, not a screenshot. Drag the handle to see what's under the hood.

the challenge

Hydrogen's products are built by multiple teams, and each team manages its own code independently. The result was visible disparities in the UI as you moved across projects, even though you reached them all through the back-office platform. The company needed a single source of truth that every team could pick its components from.

what it does

Data-heavy tables
The table every team uses for dense, data-heavy screens.
Dashboard layouts and sidebar
The shared page frame: dashboard layout and navigation sidebar.
Filters and dropdowns
Filter components and dropdowns that look and behave the same in every product.
Every component an app needs
A complete set of components, so teams pick them up instead of rebuilding them.
Design tokens
Colours, spacing and type defined once and shared everywhere.
A documentation site
Every component is documented on a docs site built with Nextra, where each page is a Markdown file, so teams can see how it works before they use it.
Installed from a private registry
The library is hosted in a private package registry on Azure. Engineers install it with a personal access token that lives in their own npm settings, never in the project.

what I did

Contributed to building the design system, the single source of truth for components across Hydrogen's products.
Unified design tokens and standardised components across products.
Documented components on a Nextra docs site, so teams can find and adopt them.
Helped set up the private package registry on Azure that hosts the library, and got it installing in each project's CI pipeline.
Worked with product teams to schedule the migration into their sprints, since every team had its own roadmap and sprint dates.
Led adoption across Hydrogen's fintech products: up to 10 teams used the design system, and almost everybody adopted it.

impact

Used by up to 10 teams, with almost everybody adopting it.
Page build time down 25%.
One source of truth for UI components across Hydrogen's fintech products.
Teams that work independently now share the same components and design tokens.

Shared design system

## the challenge

## what it does

Data-heavy tables

Dashboard layouts and sidebar

Filters and dropdowns

Every component an app needs

Design tokens

A documentation site

Installed from a private registry

## what I did

## impact

## see also

the challenge

what it does

what I did

impact

see also