Outword design system
The system behind a fast multiplayer word game. Two grounds whose roles swap, one carried motif (the tile and the trace), and rules that keep a racing player's eyes on the board.
Outword is a word game you play against a clock: swipe across a letter board to spell words before time runs out, alone or in a room with friends. Every screen exists to keep that round fast and clear. This system is how one designer keeps it that way while the product keeps growing.
- Version
- 3.25.7
- Colour roles
- 29
- Base values
- 58
- Components
- 8
- Patterns
- 8
- Decision records
- 21
- Text contrast
- AA
- Trivia questions
- 497
Read from the code and these pages at build time.
What it's for
The system has two jobs, and every page here serves one of them.
- Grow the product without losing it. A new game mode, a new card on Home, a new celebration: each one should be assembled from parts that already work, follow rules that already hold, and ship with its states, contrast and motion already solved. Build on Outword is the guide.
- Show why it's this way. Every rule carries its reason, and the bigger calls have a decision record: what the problem was, what was tried and rejected, and what was measured. A rule without a reason gets broken the first time it's inconvenient.
How it's built
- 01 · Sourceapp.jsxtokens, component CSS and screens in one file
- 02 · Tokens29 rolesdark and light values, one attribute swaps them
- 03 · Componentsthe game's CSSrendered live on every page, both modes
- 04 · Patternsscreensa round, a trivia run, results, Compete
- 05 · Docsthis sitegenerated data plus written reasons
One file, app.jsx, is the source of truth: its token layer, its component styles and its screens. Everything else is read from it.
- Tokens in two tiers: one role per job, each with a baked dark and light value. Components only use the roles; flipping one attribute swaps every role at once. See Color.
- Components are the game's own CSS classes. Every example on these pages renders with the shipping CSS, in both modes, so the docs can't show something the game doesn't do.
- Patterns are the screens those parts make: a round, a trivia run, results, the Compete cards.
- Checks keep the system honest. A release stops if the docs fall behind the code, or if any system health number gets worse: a new hardcoded colour, another font size, another legacy token name.
How to use these docs
| You want to | Start here |
|---|---|
| Build a new feature or game mode | Build on Outword |
| Know why something is the way it is | Decisions |
| Find a colour, size or token | Color, Typography, Layout and spacing, or press / to search or ask a question |
| See a part's states, tokens and rules | Tile, Button, Pill |
| See how a whole screen is put together | A round, Trivia |
| Write copy | Voice and copy |
| Check the system's health | System health |
Every page follows the same order for its kind, so a component page always answers when to use it, what it's made of, every state, how it behaves, how it's accessible, why it's built this way, what's still wrong with it, and what changed. The complete reference has the whole system on one page.