Design System at a GovTech AI Startup

Daupler

Outcome: 4,000+ component variants and 700+ styles shipped across the product.

Overview

Daupler is a GovTech AI startup that helps utility companies and local governments manage infrastructure incidents in real time. As the sole product designer, I built the design system from the ground up — establishing component standards, design tokens, and the infrastructure to keep design and code in sync as the product scaled.

Syncing Design with Code

4,000+ Component Variants & 700+ Styles

I created 761 tokens for colors, shadows, spacing, sizing, and more using the Figma plugin Tokens Studio for Figma. The tokens were applied to Figma components so that all component properties were controlled by tokens. The tokens were then synced through GitLab to coded components visible in Storybook — creating a single source of truth between design and engineering.

Colors

Text

Shadows

Molecules and Organisms

Buttons

Input Fields