TrainerQ Design System

As a solo designer-developer, keeping visual consistency across a product as complex as TrainerQ quickly becomes unsustainable without a structured system. TrainerQ has dashboards, RPG progression screens, coach portals, and a marketplace.

The challenge: build a design system that is fast to work with in Figma, maps 1:1 to the code components, and scales as the product grows, all without a dedicated design systems team.

I chose shadcn/ui as the foundation (a component collection built on Radix UI primitives and Tailwind CSS) and extended it with TrainerQ-specific patterns. The Figma library mirrors the codebase component for component, so nothing gets lost translating design into implementation.

• Full component library in Figma with variants, states, and interactive prototyping
• Token-based color system aligned with Tailwind CSS custom properties
• Dark-mode-first design with consistent contrast ratios across all surfaces
• Game components: XP bars, character stat cards, tier badges, achievement modals
• Shared spacing, typography, and shadow scales as Figma variables

The system grew iteratively alongside the product. I designed components only when they were needed, which avoided premature abstraction while keeping everything documented and reusable.

1. Audited existing screens to identify repeated UI patterns worth abstracting
2. Defined the token layer first: color, typography, spacing, elevation
3. Built base components and extended them with TrainerQ-specific overrides
4. Created usage guidelines and annotation templates directly in Figma
5. Validated component fidelity by building screens from library pieces only