Design system
How Recruitly is designed
Every screen in Recruitly is built from the same rules, our own icons, a few colours and a handful of parts. Here they all are, the way our team uses them every day.
Drawn in Simi's shape: soft, round, a fuller line.
The rules every screen follows
Our designers and Simi check every new screen against these before it ships. Each one came from a screen we got wrong and fixed.
1
One job per screen
A panel answers one question. When it has more to do, it gets tabs, each named for its job.
2
The same parts everywhere
Buttons, switches and pickers come from one shared set. Nobody builds their own.
3
Choices look like siblings
Options side by side share one shape and one style, so you compare the words, not the boxes.
4
Space, not boxes
One card per group and a hairline inside it. Never a box inside a box inside a box.
553 new leads
added to Logistics directors this week
5
Your result, in your words
Headlines say what landed for you, the way a recruiter would say it out loud.
570
In the channel
570
On the drip
6
One number, one source
When two places show the same fact, they read it from the same record, so they always agree.
7
Running looks different from done
Live work moves, finished work settles with a tick, and a paused thing says why.
TrySarah's Q4 drip8
Suggestions come from your data
What Simi suggests changes when your records change. Never a fixed list of tips.
Send to client
9
One black button
Each screen has one main action in black. Everything else is a soft grey or a plain word.
DHL Supply ChainClient10
Real faces, real logos
A person is their photo, a client is their own logo, a status is its own colour.
Senior Logistics Planner
DHL Supply Chain · Leeds
11
Room to breathe
Width follows the content. Nothing is cut short with "…" if it could fit.
12
Tables are tables
A header, aligned columns, numbers on the right, one row per record.
13 · 14 · 15
Every new screen is drawn before it is built
A new screen starts as a drawing with real data. We look at every line of it at full size, then it is approved, then it is built.
Our own icons
100icons drawn for Recruitly in Simi's shape: soft rounded forms, round ends, a 1.75 line on a 24 grid. Outline at rest, filled in ink when the module is open, and a 16px cut with fewer details for tabs and menus.
Three kinds of stroke
Every icon is bodies, cuts and lines, so the filled version is made from the same drawing, never redrawn.
Four ways to draw one icon
At rest, open, the 16px cut that drops the finest detail and thickens the line to 2.1, and a 16% tint inside the shape where an icon stands alone.
In the app
The module you are in is filled, the rest stay outlined. The same drawing works on white and in dark mode, at 22px on the rail and 16px in menus.
Colour comes from what's on the screen
The frame is black, white and grey. The colour is your content: a candidate's photo, a client's logo, the kind of thing a record is, a status. Take the content away and the screen is black and white.
Senior Logistics Planner
DHL Supply Chain · LeedsSarah Whitman
Senior Planner · 8 yrs
Daniel Brooks
Senior Planner · 8 yrs
Hannah Price
Senior Planner · 8 yrs
Faces, channel tiles and status pills carry all the colour. The buttons, words and lines never change.
The frame
Ink for titles and the one black button, greys for everything else.
Status and meaning
A soft pill in its own hue, or a small dot before a sentence when something needs you.
Sarah's mailbox is disconnected, so her drip has stopped.
12 of these people have no email address yet.
Channels
27 pastel pairs for identity
A person without a photo, a kind of document, a team. Each tile is a soft colour with its ink in a deeper shade of the same hue, never a different one.
Our violet
For charts, Simi's suggestions and the brand. Never for a button, a selected row or a status.
A serif for titles, a sans for the rest
Page titles and big numbers in a serif, everything else in a clean sans, and nothing under 12px. Order comes from size and space, never capitals or bold walls.
The parts every screen is built from
One button, one switch, one way to pick. A new screen reuses these, so Recruitly feels like one product from Jobs to Billings.
Buttons
One black action per screen. Secondary actions are a soft grey with no border. Links are ink, underlined, never violet.
Tabs and switches
The chosen tab sits on a soft grey fill. Two views of one list are a segmented control.
Write to Sarah about Tuesday's interview…
Inputs
Tall, quiet boxes with an example as the placeholder. The big box carries its own options in a grey band.
Choosing
A dark border and a dark dot on a white card. A switch turns blue when it is on.
Facts
A fact is a row: the name in grey on the left, the value in ink on the right. Status is a small pill.
Lists of things
A pastel tile for the kind, the name, one grey line, and its state or a plain word on the right.
Create a channel
Set up with Simi instead
Dialogs
White, generous and round. The title, a ✕, and a footer with a soft Cancel and the black action.
Also addTransport PlannerLoad PlannerSimi suggests
Simi's suggestions are the one place violet appears: a soft tint under the field, her mark, and plain links.
No interviews this week yet.
Schedule interviewEmpty states
A line drawing, one grey sentence saying what is not there yet, one black button.
Shapes
Buttons, tabs and search are softly rounded, cards rounder, dialogs roundest. Pills, toggles and faces are round.
See it on your own records
Every screen in Recruitly is built this way, and Simi works inside all of them.
