Trivia Rush · Design System v1

Bright. Bouncy. Spanish‑first.

Sistema de diseño completo para Trivia Rush, una app móvil de trivia. Tokens, componentes, ilustración y un prototipo de 9 pantallas, listos para usar.

▶ Jugar al juego 🎨 4 colores · 6 categorías 📐 Inter · 9 weights 📱 iOS-flavored 🇪🇸 Español neutro
Prototipo navegable

Mobile UI kit · 9 pantallas

Home, categorías, pregunta con timer, feedback correcto/incorrecto, resultados, recompensas, leaderboard y perfil. Click-thru en device frame iOS.

Abrir prototipo →

Color

6 cards
Primary palette
Violet · Yellow · Pink · Mint
Violet & Yellow scales
50 → 900 ramps
Pink & Mint scales
50 → 900 ramps
Neutrals
Ink, slate, mist, fog
Semantic
Correct · wrong · warning · info
Answer slot colors
A · B · C · D — never reorder

Tipografía

3 cards
Display
Inter Black 900 · escala hero
Headings
H1–H4
Body & captions
Regular, medium, eyebrow

Spacing

4 cards
Scale
4 → 72px
Radii
8 → ∞
Soft shadows
Surface · card · popover · sheet
Hard shadows
Stacked button feel

Componentes

10 cards
Buttons
Primary · secondary · ghost
Answer pills
A/B/C/D large tap targets
Answer states
Correct · wrong · disabled
Timer ring
15s countdown · 3 phases
Score header
Streak · puntos · progress
Category tiles
6 categorías
Chips & badges
Filtros, estados, conteos
Form fields
Inputs · search
Leaderboard rows
iOS grouped list
Tab bar
Bottom nav · 4 destinos

Brand

4 cards
Logos
Mark · wordmark · stacked
Category stickers
6 ilustraciones flat
Confetti pattern
Patrón decorativo · ≤10% opacity
Voice & tone
Reglas de copy · ejemplos