One system, every screen.
The landing page, the table, the profile and the settings are all assembled from what is on this page. Components are live: hover them, press them, tab through them, and switch the theme in the top bar.
The board
The board is a physical object on a lit table, and it keeps its own bright palette in both themes. It comes in two looks, chosen in Settings. In Glass, the tiles are panes lying on the page and the light shows through them: a bought plot is framed and washed in its owner's colour, and the buildings stand on the district's bar — one to four houses, then a hotel in their place. Clean is flatter, drawn in the site's own colours, and counts the level in small bars instead. In both, a piece is a little citizen wearing its player's colour and shape.
- Framed and washed in a colour
- Owned. The owner colours the frame and the whole pane; their name is in the tip and on the property card.
- Houses on the district's bar
- The building level: one to four houses, then a hotel in their place. One owner holding the whole district edges the bar in gold.
- Badge at the outer edge
- The price while a tile is for sale; the rent it charges once somebody owns it.
- Greyed out
- Mortgaged: it collects nothing until the mortgage is lifted.
- Bars across a piece
- Actually in jail, standing in the cell. A piece on the lane below is only visiting.
Colour
The interface is a deep indigo table lit by a warm lamp, never flat black. Colours are named for their job: gold means this is yours to act on, sky blue marks what the table is looking at, and players get six colours of their own that avoid gold.
Type
Three faces with three jobs. Bricolage Grotesque for headlines and money, Inter for reading, JetBrains Mono for annotations: the small captions, codes and timers. Eleven sizes, each with its own line height; nothing sets a size by hand.
Mono, 11px, uppercase, tracked. Sits above a value like a dimension on a drawing.
Display face with tabular figures, so digits never shift while counting.
Mono, widely tracked, for anything read out character by character.
Space and grid
One spacing scale on a 4px base. Reading pages share a 1128px column, forms a 728px one, with 16px gutters on phones and 24px from tablets up. The table uses fixed rails of 300 and 340px around a board that takes the rest.
Shape
Five radii, chosen by what the thing is. Circles are reserved for people and switches.
Depth
Four levels. Height is shown twice: a deeper shadow below and, in the dark theme, a hairline of light on the top edge. Most of the interface is flat; depth is spent on what floats.
Icons
One family, Lucide, at one stroke weight of 1.75. Four sizes: 12 inside badges, 14 inside small controls, 16 as the default, 20 for feature marks.
Motion
Three speeds and one curve. Fast for anything under your finger, base for panels and scene changes, slow for arrivals. One spring, with almost no overshoot, for things that are thrown. Calm mode in settings turns all of it off.
Components
Every interactive piece has the same set of states: resting, hover, pressed, focused, selected, disabled, loading, and where it applies success and error.