Foundations
Illustrations
Small, quiet art for empty states and onboarding. Built from the product sequences on Brand, simple cards, lines and the parallel-line pattern, in the C2 Celadon and stone palette.
Foundations
Illustrations
Small, quiet art for empty states and onboarding. Built from the product sequences on Brand, simple cards, lines and the parallel-line pattern, in the C2 Celadon and stone palette.
Palette
Five colours, each with one job in the drawing. Art never uses status colours, so it can't be read as a warning or a success.
#004F46
Key lines and the one object that matters
#AFD5AA
Soft fills and the parallel lines
#F0F2EF
The ground tile behind the art
#A69F98
Secondary outlines and text lines
#8C6057
One small warm detail, at most
Empty states
Art at 120px above the empty-state title, copy from Content: what will appear here, then one way to start. The art repeats the title, so it is decorative and takes empty alt text.
No candidates on this job yet
Add someone you know, or ask Flo to find people who match the brief.
Add candidate
Nothing needs a reply
New replies from candidates and clients land here.
Nothing scheduled this week
Meetings you book, or Flo proposes, appear here.
Schedule meeting
No matches
Nothing fits "Rust, Hanoi, open to work". Try fewer filters.
Clear filters
Size and placement
Two sizes in the product, 64 to 120px. Bigger art belongs to onboarding and marketing.
120px
An empty page or tab: a table with no rows, an empty Inbox, onboarding steps.
64px
An empty block inside a page: a record section, a panel, the Flo panel, a dialog.
Never
none
Buttons, menus, inputs, toasts, table cells, status pills. Controls use Phosphor icons only.
Alt text
alt=""
Decorative, because the title beside it says the same thing. Screen readers skip it.
Rules
1. Draw from the product: simple cards, lines and the parallel-line pattern on a #F0F2EF tile with a 24px corner at 120px. No people, robots, mascots or stock scenes.
2. C2 colours only, each in its role. One green object per drawing; clay at most once.
3. 64 to 120px in the product. Never on controls, menus, toasts or status.
4. Decorative art takes empty alt text. If the art carries meaning the text doesn't, the text is wrong; fix the text.
5. Strokes 1.5 to 2.5px at 120px, round caps. Each drawing is its own SVG file, no raster images.