Spacing, shape and motion

Colour

A neutral grey and one flat magenta, in semantic tokens with a light and a dark value each.

Concept · live Reacttokens.json

Ramps

Two ramps. Magenta 500 is the brand on every ground and 600 carries white text; the neutral ramp holds everything else.

50#FFF0F7

100#FFDDEE

200#FFB8DC

300#FF8AC4

400#FF56AA

500#FF2D95Brand

600#CA0E6FButtons, light

700#A6085B

800#930A52

900#6B0B3E

950#42062A

0#FFFFFF

50#F6F6F7Canvas

100#ECECEE

200#D9D9DD

300#BDBDC3

400#9A9AA2

500#77777F

600#5A5A62Secondary text

700#404047

800#2A2A30

850#1F1F24

900#16161A

950#0E0E10Overlay ground

Semantic tokens

What a colour is for, with its light and dark value. Components read these, never a ramp step.

Token	Value	Where it lands
--cm-bg-canvas	#f6f6f7 / #0e0e10	The page behind everything
--cm-bg-surface	#ffffff / #16161a	Cards and panels
--cm-bg-raised	#ffffff / #1f1f24	Menus and sheets above a surface
--cm-bg-sunken	#ececee / #1f1f24	Chips, keycaps, tracks
--cm-border-subtle	#d9d9dd / #2a2a30	Dividers and resting edges
--cm-border-strong	#77777f	Input and control edges, 3:1 or better
--cm-text-primary	#0e0e10 / #f6f6f7	Body and headings
--cm-text-secondary	#5a5a62 / #9a9aa2	Supporting text, 6.9:1 on its ground
--cm-text-on-accent	#ffffff / #0e0e10	Text on an accent fill
--cm-accent-fill	#ca0e6f / #ff2d95	Primary buttons, selected controls
--cm-accent-fill-hover	#a6085b / #ff56aa	Hover on an accent fill
--cm-accent-text	#ca0e6f / #ff56aa	Links and accent words
--cm-accent-subtle	#fff0f7 / #42062a	Selected backgrounds
--cm-focus-ring	#ca0e6f / #ff56aa	The 2px focus ring
--cm-brand-dot	#ff2d95	The ping and the logo's o, on every ground
--cm-status-urgent	#ca0e6f / #ff2d95	Urgent messages
--cm-elevation-flat	0 1px 2px rgba(14, 14, 16, 0.04) / 0 0 0 1px rgba(255, 255, 255, 0.06)	Rows and small surfaces resting on a card
--cm-elevation-card	0 1px 2px rgba(14, 14, 16, 0.03), 0 6px 20px -6px rgba(14, 14, 16, 0.07) / 0 0 0 1px rgba(255, 255, 255, 0.06)	Major containers: cards, panels, the tab bar. Replaces the grey stroke
--cm-elevation-raised	0 2px 4px rgba(14, 14, 16, 0.04), 0 16px 40px -12px rgba(14, 14, 16, 0.14) / 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.6)	Menus, popovers, the floating tab bar
--cm-elevation-overlay	0 4px 8px rgba(14, 14, 16, 0.05), 0 32px 72px -20px rgba(14, 14, 16, 0.28) / 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.6)	Dialogs and sheets over a scrim

Overlay

The overlay sits over a game, not over the app’s theme, so it carries its own colours. Dark glass is the default; he can switch the card to light in Overlay settings.

Token	Value	Where it lands
--cm-overlay-glass	rgba(20, 20, 23, 0.82)	The notification's ground
--cm-overlay-edge	rgba(255, 255, 255, 0.08)	Its hairline
--cm-overlay-text	#f6f6f7	Name and message
--cm-overlay-text-2	#9a9aa2	Time and context
--cm-overlay-chip	rgba(255, 255, 255, 0.07)	The mood chip on glass

Mood colours

Each mood has one fill. They appear only inside a mood glyph, always beside the mood’s word.

Token	Value	Where it lands
--cm-p-mood-lonely	#a78bfa	Lonely
--cm-p-mood-hungry	#ff8a3d	Hungry
--cm-p-mood-bored	#b7b7bf	Bored
--cm-p-mood-proud	#ffd23f	Proud of you
--cm-p-mood-comehere	#ff2d95	Come here
--cm-p-mood-missyou	#ff8ac4	Missing you

Contrast

Pair	Where it’s used	Contrast
Magenta 500 on Neutral 950	The ping and the fuse on the overlay	5.6 : 1
White on Magenta 600	Primary buttons and her bubbles, light	5.4 : 1
Neutral 600 on white	Secondary text, light	6.9 : 1
Neutral 400 on Neutral 950	Secondary text on the overlay	6.9 : 1
Neutral 500 on white	Control edges: switch, input	4.4 : 1

Put magenta where someone at home is present: the ping, the fuse, her messages, Send.
Use Magenta 600 under white text; 500 under ink.

Don’t use it

A glow, gradient or second accent. Pink is flat and alone.
Neutral 500 for small text. At 4.4:1 it’s for control edges only.

Typography

Clash Display for the brand’s voice, Neue Montreal for everything a person reads quickly.

Concept · live Reacttokens.json

Faces

Clash Display 600 for the wordmark, headings and big numbers. Neue Montreal 400 and 500 for every message, label and setting.

AaClash Display 600The wordmark, headings and big numbers.

AaNeue Montreal 400 and 500Every message, label and setting.

DisplayClash 600 · 64Only your people.

HeadingClash 600 · 24Who can reach you

BodyMontreal 400 · 16Messages wait for the buy phase in ranked, unless they’re urgent.

Overlay messageMontreal 400 · 15dinner’s ready, come eat with me

LabelMontreal 500 · 13Allowed to interrupt · Quiet moments · Heads down

Key capMontreal 500 · 11F7 On my way · F8 After this match · F9 Love you

Scale

Token	Value	Where it lands
display	Clash 600 · 64 / −5%	Hero numbers, the wordmark
heading	Clash 600 · 24 to 34	Screen titles, her invite
body	Montreal 400 · 16	Running text
overlay-message	Montreal 400 · 15	The message on his screen
label	Montreal 500 · 13 to 14	Names, controls, chips
caption	Montreal 400 · 12	Meta and time
keycap	Montreal 500 · 11	Key names

Rules

Use tabular figures for anything that changes: score, time left, counts.
Keep overlay text at 12px or larger. It’s read in a glance over a moving scene.

Don’t use it

Clash for running text or anything under 18px.
A monospace face, even for keys.
Neue Montreal at weight 100 or 200.

A 4px grid, five radii, and three durations: fast, base and the eight-second fuse.

Concept · live Reacttokens.json

Spacing

A 4px grid. Steps are named by multiples of four.

space.14px

space.28px

space.312px

space.416px

space.520px

space.624px

space.832px

space.1040px

space.1456px

space.1872px

Radius

sm · 6px

md · 10px

lg · 16px

xl · 24px

full · 999px

sm for keycaps, md for small panels, lg for the notification and cards, xl for her phone’s cards, full for buttons, chips and avatars.

Motion

Motion only explains a change: something arrived, something left, time is running out.

Token	Value	Where it lands
--cm-duration-fast	160ms	Exits, switch knobs, hovers
--cm-duration-base	200ms	The notification arriving
--cm-duration-fuse	8000ms	How long a notification stays
--cm-ease-out	cubic-bezier(0.2, 0.8, 0.2, 1)	Every arrival

Reduced motion

Replace every slide with a plain fade, and stop the fuse animating. Its time limit still applies.

Don’t use it

Bounce, overshoot or anything that loops while a game is on screen.

Elevation

Depth comes from soft shadows, never a grey stroke: four steps from a resting row to a dialog.

Concept · live Reacttokens.json

Scale

Four steps. A surface lifts as it gets closer to the person: a row barely, a card a little, a menu more, a dialog most. Shadows are tinted with the ink colour and kept low, so the canvas never looks dirty.

Flat

Card

Raised

Overlay

Tokens

Semantic elevation tokens point at a primitive shadow scale, as colour does. Components read elevation, never a shadow step.

Token	Value	Where it lands
--cm-elevation-flat	0 1px 2px rgba(14, 14, 16, 0.04) / 0 0 0 1px rgba(255, 255, 255, 0.06)	Rows and small surfaces resting on a card
--cm-elevation-card	0 1px 2px rgba(14, 14, 16, 0.03), 0 6px 20px -6px rgba(14, 14, 16, 0.07) / 0 0 0 1px rgba(255, 255, 255, 0.06)	Major containers: cards, panels, the tab bar. Replaces the grey stroke
--cm-elevation-raised	0 2px 4px rgba(14, 14, 16, 0.04), 0 16px 40px -12px rgba(14, 14, 16, 0.14) / 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.6)	Menus, popovers, the floating tab bar
--cm-elevation-overlay	0 4px 8px rgba(14, 14, 16, 0.05), 0 32px 72px -20px rgba(14, 14, 16, 0.28) / 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.6)	Dialogs and sheets over a scrim

Token	Value	Where it lands
--cm-shadow-xs	0 1px 2px rgba(14, 14, 16, 0.04)
--cm-shadow-sm	0 1px 2px rgba(14, 14, 16, 0.03), 0 6px 20px -6px rgba(14, 14, 16, 0.07)
--cm-shadow-md	0 2px 4px rgba(14, 14, 16, 0.04), 0 16px 40px -12px rgba(14, 14, 16, 0.14)
--cm-shadow-lg	0 4px 8px rgba(14, 14, 16, 0.05), 0 32px 72px -20px rgba(14, 14, 16, 0.28)
--cm-shadow-edge-dark	0 0 0 1px rgba(255, 255, 255, 0.06)	Dark mode only
--cm-shadow-raised-dark	0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.6)	Dark mode only

In dark mode

A shadow disappears on a dark ground, so dark mode swaps it for a faint light edge, and raised surfaces add a deep shadow under that.

Flat

Card

Raised

Overlay

Usage

Card for every major container on a page. One step is enough; hierarchy comes from what’s inside.
Raised for anything that floats over content: menus, the tab bar.

Don’t use it

A grey stroke around a card. If it needs separating, it needs a shadow.
Stacking shadows: a card inside a card stays flat.

Logo

The word in Clash Display, its o replaced by the ping: one magenta dot, measured from the glyph.

Concept · live Reacttokens.json

Construction

The word in Clash Display 600 at −2% tracking. The o is a dot exactly as tall as the o’s ink, centred where the ink sits, measured from the font’s outlines. It animates as a ping: the dot lands, ripples once, settles into the o, and the letters rise. The last frame is the static logo exactly.

The dot is the ping: it lands, pings twice and settles into the o, at the o’s exact height and centre, measured from Clash Display’s outlines.

cmmsOn light

App icon

64, 32, 16

The same dot, as the ping

Animation

The logo moves as what it is: a ping. Change the ground and speed, or turn off the pings. With reduced motion on, it shows its final frame.

Theme

Speed

Pings

<LogoAnimated speed={1} ping={true} playKey={playKey} />

At	Beat
0.00s	The dot lands at the centre of the word, at one and a half times its size
0.32s	First ping
0.66s	Second ping
1.35s	The dot glides into the o
1.60s	The letters rise out of the baseline, c first and s last, 60ms apart
2.28s	The dot arrives and gives one small breath
3.00s	Rest: the animation lets go, and it is the static logo

On dark and light

The dot is Magenta 500 on every ground. The letters are white on dark and Neutral 950 on light.

cmms

App icon

The dot alone, on a Neutral 900 tile. At 16px it’s the dot with no tile.

Usage

Leave clear space of one dot on every side.
Play the animation once, where the logo is the subject: a launch screen or a brand section.
Use the SVG in public/projects/comms; it’s drawn from the font’s outlines.

Don’t use it

The animation over a game. On the overlay the logo holds still.
A glow, outline or gradient on the dot.
Recolouring the dot. It’s the one fixed colour in the system.
Pairing it with a heart or a headset. The dot is the whole idea.

Foundation

Ramps

Semantic tokens

Overlay

Mood colours

Contrast

Faces

Scale

Rules

Spacing

Radius

Motion

Reduced motion

Scale

Tokens

In dark mode

Usage

Construction

Animation

On dark and light

App icon

Usage