A person’s photo, or their initial in their own colour, with the ping when they’ve just written.
Concept · live ReactSource file: tokens.jsonReact component: Avatar
Try it
Person
Size
Ping
Ground
<Avatar person={sarah} size={56} ping />
When to use
Wherever a person is the subject: the notification, his people list, her thread.
The ping when that person has just written, and only then.
Don’t use it
A generic person icon. If there’s no photo, there’s a monogram in their colour.
Sizes
88
56
44
32
24
44 on the notification and in lists, 56 on her status card, 88 on her invite, 24 in pills.
Monograms
The colour each person picked when they joined. The ground is the 50 step and the letter the 700 step, so every pair clears 4.5:1; on the overlay it flips to 950 and a light letter.
Mmagenta
Oorange
Vviolet
Ggold
Ggrey
MOVGG
Accessibility
Decorative by default: an avatar nearly always sits beside the person’s name, and naming both makes a screen reader say it twice. Where one stands alone, named gives the photo or monogram the person’s name. The ping is decorative too: the component around it says “new message from Sarah”.
Props
Prop
Type
Default
Description
person
Person
—
Name, optional photo, and their colour.
size
24 | 32 | 40 | 44 | 56 | 64 | 88
44
Diameter in pixels.
ping
boolean
false
The new-message dot.
onDark
boolean
false
Monogram colours for the overlay.
ringColour
string
—
The ground behind it, so the ping cuts cleanly.
named
boolean
false
Give it the person’s name, for the rare avatar with no name beside it.
Tokens
Token
Value
Where it lands
--cm-avatar-ping
#ff2d95
The new-message dot
--cm-avatar-ping-ring
#ffffff / #16161a
The cut around the dot
Mood glyphs
Six hand-drawn faces on one silhouette. She chooses one; the product never guesses.
Concept · live ReactSource file: tokens.jsonReact component: MoodGlyph
The set
One silhouette on a 48-unit grid, ink features at a 2.6 stroke, and one detail each.
Lonely
Hungry
Bored
Proud of you
Come here
Missing you
Sizes
20px is the smallest in use. At 16px the detail drops away and the face still reads by colour and eyes.
48
32
24
20
16
When to use
Inside a mood chip, beside the mood’s word.
In the mood picker, where each button is named.
Don’t use it
On its own, as the only sign of a mood.
Inferring a mood. Only the sender sets it.
Accessibility
Standalone, a glyph is an image named by its mood. Beside its word, pass decorative so the mood isn’t read twice.
Hidden from assistive tech when the word is beside it.
animated
boolean
false
Sways and plays its detail: the tear falls, the fork waves, the Z drifts, the sparkle twinkles, the eyes pulse, the heart beats. Hops once when picked. Off under reduced motion; never on his overlay, where it hops once on arrival instead.
Mood chip
A mood as a face and its word, together. Never one without the other.
Concept · live ReactSource file: tokens.jsonReact component: MoodChip
Try it
Lonely
Mood
Size
Ground
<MoodChip mood="lonely" size="md" />
When to use
Beside a sender’s name, when she chose a mood.
Don’t use it
When no mood was chosen. Leave the space empty.
As a button. To choose a mood, use the mood picker.
Sizes
Proud of youmd · 20px face, 13px word
Proud of yousm · 16px face, 12px word
Accessibility
The word is always visible, so colour and drawing never carry the meaning alone (1.4.1). The face is decorative inside the chip.
Props
Prop
Type
Default
Description
mood
Mood
—
Which mood.
size
'sm' | 'md'
'md'
sm on the overlay.
onDark
boolean
false
Glass ground for the overlay.
Tokens
Token
Value
Where it lands
--cm-chip-bg
#ececee / #1f1f24
Mood chip ground
--cm-text-primary
#0e0e10 / #f6f6f7
Body and headings
--cm-overlay-chip
rgba(255, 255, 255, 0.07)
The mood chip on glass
Mood picker
Six faces as one radio group, on her phone. Tap again to clear.
Concept · live ReactSource file: tokens.jsonReact component: MoodPicker
Try it
Tap a face, or Tab in and use the arrow keys. Tap the chosen one again to clear it.
How are you feeling?
When to use
On her phone, above the message, as an optional extra.
Don’t use it
Making a mood required. Most messages don’t need one.
States
How are you feeling?
Nothing chosen
How are you feeling?
Lonely chosen
Accessibility
A radio group with one tab stop. Each face is named by its mood; the chosen one has a 2px ring as well as a tint. 48px targets (2.5.8).
Key
What it does
Tab
Moves into the group, onto the chosen face or the first.
