# Trivia Rush — Design System Skill

**Use this skill when designing screens, flows, or marketing for the Trivia Rush mobile trivia game.**

## What this is

A complete, self-contained brand + UI system for **Trivia Rush**, a Spanish-first mobile trivia game. Bright, energetic, iOS-flavored. Use it as the source of truth for any new screen, prototype, or asset.

## When to invoke

- Designing a new screen or flow for Trivia Rush
- Adding a new feature, component, or asset to the existing app
- Producing marketing, share cards, or onboarding for Trivia Rush
- Recreating Trivia Rush UI in another tool (Figma, code)

## Files to read first (in order)

1. `README.md` — product overview, voice, content rules, caveats
2. `colors_and_type.css` — every token (color, type, spacing, radii, shadows, motion)
3. `preview/` — open the index files to see how each token renders
4. `ui_kits/mobile/index.html` — 9-screen click-thru of the actual app
5. `assets/` — logo, category stickers, patterns ready to copy

## How to use it

- **Always import `colors_and_type.css`** — never hardcode hex values, type sizes, or radii. The variables are the contract.
- **Use the `tr-btn` / `tr-app-bar` / `tr-screen` classes from `ui_kits/mobile/kit.css`** when building new screens. They handle iOS safe areas, hard-shadow buttons, and screen scaffolding.
- **Copy components from `ui_kits/mobile/Screens*.jsx`** before drawing from scratch. They cover: home, category select, question (with timer), correct/wrong feedback, results, rewards/chests, leaderboard, profile.
- **For new categories**, mirror the SVG style in `assets/categories/` — 2-tone flat with 1.5-px ink outline at 96×96.
- **Voice & copy:** Spanish, tuteo, witty, energetic. See README "Content fundamentals".

## Hard rules

- The signature surface is **violet `#6C3BFF`**, not white.
- The four answer slot colors map A=yellow, B=pink, C=cyan, D=mint — **never reorder** them; players learn the colors as positions.
- Primary buttons use **hard 6-px stacked shadows** (not soft drops). On press, shift down 4px and shrink shadow to 2px.
- Type is **Inter only**. Display sizes use Black (900) with tight tracking (`-0.02 to -0.04em`).
- **No emoji in core UI.** Emoji is reserved for share cards, streak celebrations, and badge stickers.
- **No photography.** All imagery is flat geometric illustration.
- Numbers are always **tabular** in scoreboards, timers, and stats.

## Common gotchas

- The iOS device frame's status bar is absolutely positioned at top with z-index 10. **Screen headers must use `padding-top: 60px` or the `.tr-app-bar` class** so content sits below the status bar / dynamic island.
- Spanish number formatting uses thin-space + period: `1.240 puntos` (use `.toLocaleString('es-ES')`).
- The `confetti.svg` pattern should be applied at ≤10% opacity — at 100% it's overwhelming.

## Caveats (still open)

- Logo and category illustrations are placeholder-quality — replace with branded artwork when available.
- Phosphor Fill is the icon substitution; confirm or swap.
- No formal accessibility audit yet — verify yellow-on-violet contrast for AA.