# Trivia Rush — Design System **Trivia Rush** is a fast, playful mobile trivia game (Spanish-first). The player picks a category, answers 4-option questions against a 15-second timer, builds a streak of correct answers, and lands on a final summary screen. The brand is **modern, fun, easy to use** — bright primaries on a deep violet stage, chunky rounded shapes, bouncy motion. > **Sources:** No existing codebase, Figma, or brand assets were provided. The system below was created from scratch based on the product brief and direction (vibe: playful & energetic; palette: violet + yellow + pink + mint; typography: bold rounded display + clean sans; categories: Historia, Ciencia, Deportes, Arte, Música, Geografía). --- ## Index — what's in here | File / Folder | Purpose | |-------------------------|-------------------------------------------------------------------------| | `colors_and_type.css` | All design tokens: palette, type scale, spacing, radii, shadows, motion | | `assets/` | Logo SVGs, category icon stickers, background patterns | | `fonts/` | Webfont notes (currently CDN-loaded — see Caveats) | | `preview/` | Cards rendered in the **Design System** tab — colors, type, components | | `ui_kits/mobile/` | Hi-fi click-thru of the trivia app (iOS + Android frames) | | `SKILL.md` | Skill manifest so this folder works as a portable Claude Code skill | | `README.md` | You are here | --- ## Product overview Trivia Rush is a single mobile product (iOS + Android). The core loop: 1. **Splash / Inicio** — logo bounce, "¡Empieza a jugar!" CTA, daily streak indicator. 2. **Login / Perfil** — name + avatar, email or social. 3. **Selección de categoría** — 6 chunky category tiles (Historia, Ciencia, Deportes, Arte, Música, Geografía). 4. **Pregunta** — question card, 4 colored answer pills (A yellow / B pink / C cyan / D mint), 15-second timer ring, streak counter. 5. **Feedback** — instant correct/wrong reaction (mint glow + ✓, or pink shake + ✗). 6. **Racha** — celebratory full-screen takeover at streak milestones (3, 5, 10). 7. **Resumen final** — score, accuracy, longest streak, "Jugar otra vez" + "Compartir". 8. **Leaderboard** — friends + global tabs. --- ## Content fundamentals Copy is **Spanish, casual (tuteo), witty, and energetic**. We use exclamation marks generously and second-person address ("tú"). Microcopy should feel like a friend hyping you up, not a teacher. ### Voice rules - **Tuteo, never usted.** "¿Listo para jugar?" — never "¿Está usted listo?" - **¡Exclamaciones! pero con criterio.** Reserve them for celebration / encouragement, not every label. A "¡Bien!" after a correct answer; a plain "Categorías" in a nav. - **Witty over generic.** "Sin presión… solo 15 segundos" instead of "Tienes 15 segundos para responder." - **Action-first CTAs.** Buttons are verbs: "Jugar", "Continuar", "Compartir mi racha". Never "OK" or "Aceptar". - **No emoji in core UI** — but **icon stickers** (see Iconography) carry the playful weight. Emoji is acceptable in shareable result cards (`🔥 racha de 8` is fine for a screenshot). - **Numbers with personality.** "1.240 puntos" with a thin space, "+50" deltas in mint, "−10" deltas in pink. ### Casing - **Title Case for screen titles** in display type ("Selecciona una Categoría"). - **Sentence case for body and helper text** ("Toca una categoría para empezar"). - **UPPERCASE only for eyebrow labels** with extra letter-spacing (e.g. category tag on a question card: `HISTORIA`). - **Buttons: Sentence case, no period.** "Jugar otra vez", not "Jugar otra vez." ### Voice examples | Where | Don't | Do | |---------------------------|--------------------------------|------------------------------------------| | Splash CTA | "Iniciar" | "¡Vamos a jugar!" | | Wrong answer | "Respuesta incorrecta" | "¡Casi! Era la B" | | Correct answer | "Correcto" | "¡Eso es!" | | Streak of 5 | "Has acertado 5 veces" | "Racha de 5 — estás imparable 🔥" | | Time's up | "Tiempo agotado" | "¡Se acabó el tiempo!" | | Final summary header | "Resultados" | "¿Cómo te fue?" | | Empty leaderboard | "Sin datos" | "Aún no hay nadie aquí. Sé el primero." | --- ## Visual foundations ### Color - **The signature surface is violet (`#6C3BFF`)**, not white. Most full-screen backgrounds use `--bg-app` violet or the deep ink `#0E0828`. White is reserved for cards and sheets that "lift" off the violet stage. - **Four vivid primaries** form the hero palette: **violet, yellow, pink, mint** — they map 1-to-1 onto the four answer slots (A / B / C / D), so the player learns the colors as positions. - **Cyan** acts as a fifth accent (the "C" answer). Coral is the "hot streak" / warning hue. - Neutrals are **violet-tinted**, not gray (`--tr-ink: #0E0828`, `--tr-mist: #C9C4E2`). This keeps everything cohesive on the brand violet. - **Avoid pure black on brand backgrounds.** Use `--tr-ink` or 80% black-on-violet shadows. ### Typography - **Inter** (display + body, weights 400–900, italics): Inter Black (900) handles the chunky display moments — big numbers, headlines, screen titles. ExtraBold (800) and SemiBold (600) carry headings. Regular (400) and Medium (500) carry body and captions. Tracking is **tight** on display (`-0.02 to -0.04em`) and **wide** on eyebrows (`+0.06–0.1em` UPPERCASE). - Tabular numerals are on by default in scoreboards and timers (`font-variant-numeric: tabular-nums`). ### Spacing & layout - 4-px base scale (`4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 72`). - Mobile gutters: **20 px** edge padding, **16 px** between major elements, **12 px** inside cards. - **No grid system.** Layouts are stacks of full-width cards on the violet stage. The category-select screen is a 2-column grid with 16-px gap. - **Safe area aware:** top status bar 44 px, bottom home indicator 34 px, FAB lives 24 px above the home indicator. ### Backgrounds - **Solid violet** (`#6C3BFF`) is the default. Plain. No noise. - For *celebration* states (streak takeover, final summary), use a **radial spotlight gradient** from `--tr-violet-soft` at 30% → `--tr-violet-deep` at 100%, plus a **confetti pattern** SVG at 10% opacity. - The splash / login uses a **bouncing-bubbles** decorative SVG (5–7 large soft circles in yellow/pink/mint at 18–28% opacity, blurred). - **No photography.** No full-bleed images. The aesthetic is fully illustrated/geometric. ### Borders, radii, cards - **Chunky radii.** Cards are `28px`. Answer pills are `36px`. Buttons are `pill` (999) or `20px`. - **Cards have no border** — they sit on the violet stage on a soft purple-tinted shadow (`--shadow-3`). - **Hard "stacked" buttons:** primary buttons use a **6-px solid bottom shadow** (`--hard-violet`, `--hard-pink`, etc.) instead of a soft shadow. On press the button shifts down 4 px and the shadow shrinks to 2 px — that gives the "physical" arcade feel. - **No 1-px borders anywhere.** Separation is by color, elevation, and radius. ### Shadows & elevation | Token | Use | |-------------------|--------------------------------------------------| | `--shadow-1/2` | Resting / pressed states for flat chips | | `--shadow-3` | Default card on violet | | `--shadow-4` | Modal / sheet, focused element | | `--shadow-glow-*` | Around the *correct* / *wrong* answer (state) | | `--hard-*` | Solid offset shadow under primary action buttons | ### Motion Motion is **a mix of bouncy, smooth, and snappy** depending on context: - **Bouncy** (`--ease-bounce`, 220 ms) — entrances, score increments, streak flame appear, modals. - **Smooth** (`--ease-out`, 220 ms) — page transitions, opacity fades. - **Snappy** (`--ease-snap`, 140 ms) — taps, selections, toggles. Never longer than 200 ms for direct manipulation. - **Timer ring** counts down with a *linear* sweep (no easing). At ≤5s the ring tints from cyan → coral → pink and gently pulses. - **Correct answer:** mint glow expands once + checkmark scales 0 → 1.1 → 1.0 (overshoot). - **Wrong answer:** pink shake (3 cycles, ±6 px), then dim to 60% opacity. - **Streak milestone:** full-screen flame slides up, score number "rolls" with tabular nums, confetti bursts. ### States | Interaction | Effect | |------------------|---------------------------------------------------------------------| | Hover (web only) | Lighten button by 8% + lift `translateY(-1px)` | | Press | `translateY(+4px)` + hard shadow shrinks 6→2 px + scale 0.98 | | Focus | 4-px ring at `--tr-yellow` 60% — visible on violet and white | | Disabled | 40% opacity, no shadow, no transform | | Selected | Filled brand color, white text, hard shadow | ### Transparency & blur - **The timer ring** uses a 12% white track with a fully opaque colored arc. - **Bottom sheets** dim the backdrop with `rgba(14,8,40,0.6)` and apply a **20-px backdrop-blur**. - **Glass chips** (used sparingly, e.g. category badge over an illustrated header) use `rgba(255,255,255,0.18)` + `backdrop-filter: blur(16px)` + `1px rgba(255,255,255,0.3)` inner stroke. ### Imagery & illustration - **No photography.** Iconography is the only imagery (see below). - Illustrations, when needed, are **flat geometric stickers** with a **1.5-px ink outline** and 2-tone fill (brand color + cream). Never gradients on illustrations. - **Color vibe of imagery:** warm, saturated, high-energy — never desaturated, never b&w, never grainy. --- ## Iconography Trivia Rush uses **two icon systems**: 1. **UI icons** — [**Phosphor Icons**, Fill weight](https://phosphoricons.com/) (CDN-loaded, see `assets/icons/README.md`). Filled chunky icons match the rounded, friendly type. We use them at 20 / 24 / 28 px for nav, status, controls. - **Substitution flag:** Since no codebase was provided, Phosphor Fill was chosen as the closest match to the "bold rounded display + clean sans + bouncy" direction. If the production app uses a different icon set, swap `assets/icons/` and update this section. 2. **Category stickers** — Custom 2-tone flat illustrations for each of the 6 categories. Stored as SVG in `assets/categories/`. Each sticker is **96 × 96** at design size, **1.5-px ink outline**, fills using the category's assigned brand color. They are NOT interchangeable with UI icons — they are large feature graphics on category tiles and question headers. ### Emoji & unicode - **Emoji is allowed in two places only:** social share cards (`🔥 racha de 8`) and the streak takeover screen flame (where it animates). - **No emoji in nav, buttons, or body copy.** Use a Phosphor icon instead. - **Unicode symbols** (✓, ✗, ←, →, ✦) are allowed inline with text in microcopy, but prefer Phosphor for tappable affordances. ### Icon assets in this folder ``` assets/ ├── logo/ │ ├── logo-mark.svg ← bouncing "TR" mark │ ├── logo-wordmark.svg ← Trivia Rush wordmark │ └── logo-stacked.svg ├── categories/ │ ├── historia.svg ← columna / yellow │ ├── ciencia.svg ← matraz / mint │ ├── deportes.svg ← balón / coral │ ├── arte.svg ← paleta / pink │ ├── musica.svg ← nota / cyan │ └── geografia.svg ← globo / violet └── patterns/ └── confetti.svg ← celebration overlay ``` --- ## Caveats — please help me get this right 1. **Inter is self-hosted.** All weights + italics are in `fonts/` as `.otf` and wired through `@font-face` in `colors_and_type.css`. No CDN dependency. 2. **Logo is invented.** I designed a "TR" monogram in violet + yellow because no logo was provided. If you have one, replace `assets/logo/*.svg`. 3. **Category illustrations are simple geometric placeholders.** They follow the system but are not "designed" — please replace with custom illustrations when ready. 4. **Icon set is a substitution.** Phosphor Fill was chosen as the closest match to the brief; confirm or swap. 5. **No accessibility audit yet.** Color contrast on yellow-on-violet should be verified for AA. --- See `SKILL.md` if you want to use this folder as a portable Claude design skill.