Building a design system for a startup that teaches through games

The short version

Problem: Games and screens needed to ship quickly without each one looking like a different product.

What I did: Built a Figma design system with components, variants and tokens for type, colour and icons, plus responsive constraints and documentation.

Result: One shared source of truth for design and development, and a product that was more consistent and more efficient to produce.

The problem

Ziyx teaches entrepreneurship and business skills to young adults, and it needed to ship new games and screens quickly without each one looking and behaving like a different company.

Three decisions

Tokens first, components second. The brand is bright and youthful, but it still needed to be easy to change. With tokens for type, colour and icons, a tweak happens in one place and ripples everywhere.

Built for games, not just dashboards. A standard SaaS kit would have been quicker, but Ziyx’s games needed expressive components too. The trade-off was more flexibility for a bit more maintenance.

Accessible by default. The system targets WCAG 2.1 AA from the start, so contrast, focus states and touch targets are right before anyone designs a screen.

What I built

Components with variants, tokens for type, colour and icons, auto layout and responsive constraints, spacing, grid and hierarchy standards, plus version control and documentation, so designers and developers worked from one source of truth.

Three image frames: the token structure; a component and its variants; a before and after of a real screen.

Results

The system gave the whole product shared rules: consistent components, clear documentation and a faster path from design to build.

Reflection

A system is only as good as the habits around it. If I were extending it, I would document each component as I build it and bring developers into naming conventions early.