Sample data

Design system

Serif speaks, sans explains. Tokens, logo, the conversation wave and the shells every view is built from.

Logo

Conversation wave · live

CallerSayra

CallerSayra

Colour

ink
#0E3B3A
ink-soft
#365250
ink-muted
#5A6E6B
paper
#F8F9F7
mist
#EEF3F1
white
#FFFFFF
line
#DCE3E0
accent · mint
#7ED6BE
accent-deep
#1B7462
accent-soft
#D6F1E8
tide
#2F55C8
tide-soft
#E1E8FB
sage
#2E7D4F
sage-soft
#DCEFE2
rose
#B4233A
rose-soft
#FADDE2

Type

Calm at any volume.

“I'll get you to Priya. She can see everything we've talked about.”

Geist explains: interface labels, numbers and body copy. Instrument Serif speaks: titles, greetings and anything said aloud.

Call status · icon + word

Sayra · on track
Default. No action needed.
Frustration rising
Mood down 3 turns in a row.
Asked for a person
Honoured at once, shown for the record.
Needs approval
A guardrail asks a person first.
Handing over
Packet sent, waiting for a person.
With a person
Priya has the call.
Resolved
Goal met, confirmation sent.
Caller hung up
Ended before resolution.

Shells

Agent workspace

AvailablePR

The console shell (sidebar, org switcher, user) wraps every page under /console.

Northwind Air

Live captions on