Design System
VoiceMock's living design system. All tokens, components, and patterns in one place.
Foundations
Color tokens, typography scale, spacing, radius, and shadow definitions.
5 sections
Components
Interactive UI primitives: buttons, accordions, status indicators, and more.
11 sections
Forms
Input fields, textareas, and selectable chips for user data entry.
3 sections
Feedback
Alerts, banners, error states, and modal dialogs.
3 sections
Data Display
Score bars and data visualization components.
3 sections
Onboarding
The anonymous demo a first-time visitor meets on /setup: the offer, the microphone check, and the partial result.
5 sections
Auth & Gating
Google sign-in trigger, lead-capture CTA card, and the Results login gate blur pattern.
2 sections
Dashboard
Six-axis skill radar, breakdown, next-best-action, and the /dashboard sidebar navigation (Bunch E).
10 sections
Patterns
Voice interaction states, icon usage, layout compositions, CSS animations, and sound feedback.
5 sections
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn