TopSend DS
When I joined TopSend, there was no design system. Each screen decided color, spacing and components its own way. I created the foundation that now supports the entire platform and the iGaming vertical.
Result: 27 components, AA/AAA contrast in both themes
- What
- Design system built from scratch
- Client
- TopSend
- Role
- Product Designer
- Timeline
- 2025 to present
- Platform
- Web
The starting point
Without a source of truth, the same button appeared in three colors and the same card with four different corner radii. Every new screen cost decisions that should already have been made.
I started with the contract: what counts as a token, who can use hex values, how a component is documented and how a change is recorded.
- One source of truth
- Hex values live only in the tokens file. Everything else uses variables.
- Dark-first, with a light theme
- Every token has a light version, with contrast adjusted when needed.
- Living documentation
- Each component shows anatomy, states, variants and when to use it.
- Versioned
- Semantic versioning and a changelog: the team knows what changed and why.
Foundations
Lime on dark, purple on light. AA contrast for text and AAA for primary actions in both themes. Spacing in multiples of 8, with breakpoints, elevation and radii defined as tokens.
The brand went into the system too: logos in every version and the TopChat sub-brand, designed from the same elements.
Components
27 components, from the button to the data table, each with a light and a dark version. The project rule is simple: if a component doesn't exist, it's created in the design system before it shows up on a screen.
Automated adherence rules flag when someone uses a color outside the tokens, so the system doesn't degrade over time.
Result
A foundation of 27 components and documented fundamentals that supports 35 platform screens and 24 iGaming vertical screens.
AA contrast for text and AAA for primary actions, in both themes.
Every change recorded with a version and date in the changelog, so the team knows what changed in each component and why.
Have a similar product that's stuck?