Principles

These are the rules every game follows, however it looks. Each one has a name (its heading, and its link), serves one of the four words for the feel, and is stated here once. Rules and checks says what holds each one.

Most rules are kept for free: the house kit draws the sheet, the result sheet, Options and the way up, so a game that calls them follows the rules without thinking about them. The tests in tools/house/kit.test.mjs pin that behavior down.

Human-first#

It works the way you expect, for whoever’s playing, on whatever they hold.

Same place, same word#

An action that exists in two games has one name, one key and one place. What you learned in one game works in the next. Where Undo is, what Escape does and what a sheet’s buttons say are the house’s, never the game’s.

Never stranded#

Every game ends on a result sheet, whether it’s won, lost, stuck or given up. The sheet says what happened and offers the next step, with the same actions in the same order in every game. There’s always a way back in.

Progress stays put#

Reload, close the tab or come back tomorrow, and you’re where you were. Solo games keep your place in your browser and table games keep your seat. Preferences live in your browser under uo: keys, and a guest never gets a cookie.

The way up#

The arrow at the top left of every screen goes up one level, and a screen has exactly one. It goes from a play screen to the game’s home, and from the game’s home to the shelf. The browser’s Back goes back in history. The two are never the same button.

Undo or ask#

Nothing destructive happens on one press. Either it can be undone (it just happens, with a toast offering Undo) or it asks in place: the same button turns the warning color and asks (“Restart?”), and a second press does it. Leaving a live table and deleting something permanent are the only confirmations that open a sheet. A game never uses the browser’s confirm().

Helpers on#

Every assist is on by default and has its own row in Options, so a player can turn off what they’d rather do themselves.

Keys and focus#

Escape closes only the top layer and never leaves the game. A sheet keeps focus inside it and gives it back when it closes. Every control has a name a screen reader can say. Shortcut keys never fire while you’re typing, and when Shortcut keys is off, they’re off.

A finger’s reach#

On a touch screen, everything you press is at least 44px each way, by its size or by an invisible reach round it. A press anywhere inside a control is that control’s: nothing unseen answers in its place.

Every screen fits#

Every page works from 320px wide and keeps clear of a phone’s notch, corners and home bar. A play screen never scrolls the page (a sheet scrolls inside itself), and nothing runs off the window’s side.

Errors say what’s next#

An error is a sentence with a way forward, never a raw message.

Ultra-readable#

Every word is easy to read, and what you look for is easy to find. How the finest of these are met and measured is Fine details.

Type roles#

Every word on a screen plays one of the house’s type roles: Display, Title, Heading, Bar, Body, Lead, Label, Tool, Small, Note, Kicker and Figure. Each role has one size, weight and line height on every screen of every game. A game picks its faces, but doesn’t resize a role. The sizes are in Tokens and layout.

Readable#

Words read at 4.5:1 against what’s actually behind them, as painted, in every table style and theme. Large words and a control’s outline read at 3:1. Words over a picture or a texture get a ground of their own (a plate, a scrim) instead of relying on the picture. No words are under 12px, and 12–13px is only for table furniture nobody decides on (a key cap, a corner count). Words drawn on a board grow with it, and on a phone they’re as large as their space allows.

Words fit#

No words are cut off or run past the box they’re drawn in. An ellipsis is only for a name in a seat or a long title in a bar, never for something you need to choose. Where a line can’t fit, it wraps or a shorter form takes over.

Room to breathe#

Words keep at least 8px from any edge, line or mark that isn’t theirs, and 4px from their own box’s edge. In a round shape, they keep inside the shape, not only inside its box.

Centered by ink#

A glyph in a badge, a ring, a key cap or a button sits in its middle by its ink, not by its line box. Icons are drawn, not typed.

Rows in line#

Things in a row share a middle or a baseline, and alike things in a row are evenly spaced. A group that’s set apart on purpose is named as an exception.

Plain words#

Plain American table talk: Hoyle’s names for the things on the table and short verbs on the buttons, one word per action site-wide. Copy is sentence case and warm, with contractions and no “please”. Buttons are verbs and labels are nouns. A heading may have a game’s voice (“Case closed”), but a button may not.

The glance#

Every play screen has a glance: at most four things, ranked by how often they decide a move. They are whose turn it is and what to do, the countdown (how near the end is), the score, and what’s yours. The countdown and the score are Figures. Nothing in the glance hides on a phone, and none of it lives only in the bar’s title or in small print.

Never only color or motion#

Nothing is said only by color or only by motion. Seats have a shape as well as a color, a mistake has a dashed ring as well as red, and everything motion shows is also said in words. Reduced motion is respected everywhere.

Calm#

One loud thing at a time, and nothing that changes without a reason.

One fill#

Exactly one button per view wears the primary fill: the move we’d suggest. When the choices are equals, the safe one (Pass) wears it, and when there’s no safe one, nothing does.

Three weights#

Buttons come in three weights: primary (filled), secondary (outlined) and quiet (words alone). A bar’s tools are quiet. A danger is a secondary in the bad color, and a disabled button is dashed, never faded. An outline means “press me”: inputs and choice groups get the soft line and containers get the panel edge.

Choosing isn’t doing#

A choice (a segmented control, a toggle, a swatch) never wears the primary fill. A pick is a tint, an inner ring and bold, inside a group on the soft line.

Look follows meaning#

Size, fill, color, weight and place say what kind of thing something is and how much it matters. Things of one kind look alike, and equal choices are equal. A difference has a reason a player would recognize (the move we’d suggest, a danger, yours) and comes from a class that says so, never from where something sits or how long its words are.

Colors have jobs#

The house has six color jobs: ink, soft, accent (the primary fill), turn (yours, your turn, picked), good and bad. A game maps its palette onto these and never adds a seventh meaning. Each kit’s names for them are in Tokens and layout.

One skeleton#

Every page has the same frame: the bar with the way up at the left, then a kicker, title and lead, then the page’s content, and a footer with the copyright. Spacing comes from one rhythm (4, 8, 16, 24 and 40px), and the gutter, the bar and the column are the same in every game. A play screen keeps its home’s frame. Only the table between the bar and the dock is the game’s. The numbers are in Tokens and layout.

One setting pattern#

Every setting is a label and a one-sentence hint at the left, and a short control beside them (or a long one under). On and off is a two-part choice, never a checkbox. Options’ sections come in one order in every game.

Nothing moves under you#

Controls have fixed places and sizes, and a hidden control keeps its space. A control that just changed ignores presses for a moment, so a double tap can’t hit the next thing. Nothing shifts the layout under your pointer.

Nothing over anything#

Nothing draws over anything else unless it’s meant to: a badge on a corner, cards in a fan, a layer that passes (a toast, a banner).

The quietest signal#

Each kind of news has one way to be said, from quietest to loudest: the status line, a toast, a banner, an announcement, a celebration. A game picks the quietest that does the job.

Fair clocks#

A solo game’s clock stops whenever a sheet is open, a board is hidden or the tab isn’t seen: never free thinking time. A table’s clock is the server’s, and keeps running under every sheet.

Delightful#

Delight that does a job, then gets out of the way.

Motion explains#

Things move only to explain a change you’d otherwise miss, from one short vocabulary of named motions with fixed durations. Hover and press take 150ms or less. The vocabulary is in Tokens and layout.

Your move#

When something is yours to do, it says so and points. The first time each kind of move falls to you, a prompt names it and shrinks into where you do it, which then breathes a ring in the turn color. A routine turn gets only the ring, after a few idle seconds. At a table, your turn also shows in the tab’s title and, if you turn it on, with a chime.

See others’ moves#

Every move someone else makes, bot or person, is shown where it happens, one beat each, and held long enough to follow. The last move before yours always plays.

Done to you#

Anything that changes what’s yours (taken, bought, removed, called on, ruled on, handed to you) is said to you by name, in words, on your own screen. It’s never only in the log or another player’s row.

Celebrate a victory#

A victory, and only a victory, gets a celebration: a table game won, a personal best, a daily solved. It plays behind the result sheet and is skipped by any press.

The game’s own look#

A game owns its palette, faces, board, illustration, textures, radii, its voice in headings and its celebration’s colors. It doesn’t own the controls. The house’s rules are what make it a UO game, and its look is what makes it itself.