Comms Design System
The foundations and components behind the overlay on his screen, the app on his desktop and the app on her phone: a neutral grey, one flat magenta, and rules that keep a game playable.
Principles
- Subtle, then gone. Every interruption is small, says one thing, and leaves on its own.
- Only your people. A face you know arrives before any words.
- The corner, never the crosshair. Nothing in the system draws near the middle of a game.
- One colour, flat. Magenta means someone at home. Nothing glows.
Every value on these pages is generated from the system’s own tokens.json by one build script, which also writes the overlay’s native constants. It’s a concept system: rendered live in React, with no shipped product behind it. Read the case study →
Foundation
| Colour | A neutral grey and one flat magenta, in semantic tokens with a light and a dark value each. |
| Typography | Clash Display for the brand’s voice, Neue Montreal for everything a person reads quickly. |
| Spacing, shape and motion | A 4px grid, five radii, and three durations: fast, base and the eight-second fuse. |
| Elevation | Depth comes from soft shadows, never a grey stroke: four steps from a resting row to a dialog. |
| Logo | The word in Clash Display, its o replaced by the ping: one magenta dot, measured from the glyph. |
People and moods
| Avatar | A person’s photo, or their initial in their own colour, with the ping when they’ve just written. |
| Mood glyphs | Six hand-drawn faces on one silhouette. She chooses one; the product never guesses. |
| Mood chip | A mood as a face and its word, together. Never one without the other. |
| Mood picker | Six faces as one radio group, on her phone. Tap again to clear. |
Controls
| Button | Starts an action. One primary per view, in magenta; secondary and ghost for the rest. |
| Switch | Turns a setting on or off at once, with a visible label and an optional line of detail. |
| Corner picker | Where the overlay sits: three corners, chosen without dragging. |
| Preset chips | Her usual messages as one-tap chips that fill the composer. |
| Composer | A labelled message field with a count and a send button, 140 characters at most. |
| Keycap | A key or a chord, with what it does, on light surfaces or the overlay’s glass. |
Overlay and status
| Notification | The message on his screen: dark or light glass in the corner, eight seconds, then gone. |
| Status card | Where he is, from her side: in a match, the score, and a range for when he’ll be out. |
His dashboard
| Now playing | The top of Home: the running game in its own art, and how reachable he is. |
| Reachability | One control for open, quiet moments or heads down, replacing three overlapping switches. |
| Person card | Someone who can reach him: their rules as tags, their last message, and his reply. |
| Tags and badges | Short labels for a rule or a state. Ink by default; pink only for someone at home. |
| Game icon | The game’s own icon where there is official art, a neutral tile where there isn’t. |
| Card | A titled container on the card elevation. No grey stroke; one level only. |
| Segmented control | Two to four mutually exclusive options, all visible, one tab stop. |
| Text field and select | Labelled inputs with a hint or an error tied to the field. |
| Menu | A button that opens a short list of actions. Arrow keys move, Escape returns. |
| Dialog | A modal for a decision or a short form. Focus moves in, stays in, and comes back. |
| Toast | A short confirmation, sometimes with Undo. Waits while you hover or focus it. |
| Empty state | What a section says before there’s anything in it, and what to do next. |
| Upsell | The Comms+ offer, placed where Free stops him. One per page, with the price. |
| Navigation | Three pages in a sidebar that becomes a rail and then a drawer, with a jump list. |
