Brand guidelines
v2.1 · 2026
Contents
- 00About
- 01Logo
- 02Color
- 03Typography
- 04Layout
- 05Iconography
- 06Imagery
- 07Motion
- 08Writing
- 09WerkOS
- 10Components
- 11Patterns
- 12Applications
- 13Accessibility
- 14Using this system
- 15Downloads
Contents
02 / 72
About
Werklist · Brand guidelines
03 / 72
Purpose
To bring simplicity to global work by eliminating complexity and uncertainty for both workers and employers.
About · Purpose
04 / 72
Vision
To become the first thought associated with work for both workers and employers, and to enable a world where they focus on work, not employment.
Mission
To design the global work infrastructure that redefines how the world works.
About · Vision and mission
05 / 72
Local permanent placement
Remove bureaucracy from hiring local talent. Replace it with speed, precision and human connection.
Global permanent placement
Bring fairness and cultural alignment to global work by supporting legal migration and building transparent, value-driven pathways for both workers and employers.
About · Mission pillars
06 / 72
Values
The values say what Werklist rewards.
01
Impact over activity
We measure ourselves by outcomes, not by how busy we appear.
02
Excellence
We do not polish forever. We also do not ship work we would not sign with our name.
03
Winning
We play to win. Not once. Always.
04
Velocity
We make fast decisions and act with peaceful urgency.
05
Responsibility
We do not ask for permission to take ownership or risk. We need a reason not to.
About · Values
07 / 72
Culture
The culture principles come from the company manifesto.
- 01
Mission over self
No one may ever place personal interest above the mission or the collective.
- 02
Operate as a team
We commit to the team fully and decisively, and with heart.
- 03
Relentless optimism
We will figure it out and tomorrow will be better.
- 04
Zero mediocrity
We do not do work just to get it done.
- 05
Strong confidence
Our employees and partners should never feel fear inside the collective.
- 06
Ideas win, direction reigns
There are no bad ideas, only raw ones not yet fully shaped.
- 07
A-integrity only
There is no room for B or C players at Werklist.
- 08
No room for bad people
We never prioritize performance over character.
- 09
Meritocracy over hierarchy
The most junior person can challenge and outperform the most senior.
- 10
We protect our people for the long run
When things get hard, we do not disappear. We show up.
About · Culture
08 / 72
Positioning
Werklist is a platform for international employment. Employers use it to hire skilled workers at home and across borders. Werklist checks both the employer and the worker, and handles every step from the first search to the worker's first day on the job.
Describing Werklist
Say
A platform for international employment
What Werklist is, in any medium and at any length.
Say
Hiring skilled workers at home and across borders
What employers do with Werklist.
Do not say
A staffing agency
Readers expect workers on loan from an agency payroll, and Werklist does not lend workers.
Do not say
A recruitment network or a job board
Each names one step of the hire and leaves out the employment that follows it.
About · Positioning
09 / 72
Logo
Werklist · Brand guidelines
10 / 72
Logo
The mark is a dot and two strokes with round ends. The wordmark beside it is drawn lettering, not a typeface.
- Canvas
- 698 by 171
- Mark
- A dot and two strokes
- Stroke width
- 50
Logo · Overview
11 / 72
Logo and mark
The black logo goes on light grounds, the white logo on black and on the brand blue.
Logo · Logo and mark
12 / 72
Clear space and size
Clear space
Keep one stroke of the mark clear on each side of the logo: 29.2 percent of its height, or 9 px around a logo 30 px tall.
Smallest sizes
- Logo on screen
- 80 px wide
- Mark on screen
- 16 px wide
- Logo in print
- 20 mm wide
- Mark in print
- 6 mm wide
Logo · Clear space and size
13 / 72
On backgrounds
The logo needs a contrast of at least 4.5 to 1 against its ground. On a photograph it stands on a scrim of navy at 60 percent.
Light ground
#f4f4f5
19.10 to 1
Navy
#0b0e1a
19.23 to 1
Brand blue
#1863dc
5.44 to 1
Scrim over a white picture
#6d6e76
5.06 to 1
Logo · Backgrounds
14 / 72
Not permitted
Each of these turns the logo into something else.
- 01
Retyping the wordmark
Set in a typeface, it becomes another logo.
- 02
Stretching, rotating or skewing
A distorted copy reads as a fake.
- 03
Colors other than black, white and the brand blue
The logo no longer matches the one people know.
- 04
Gradients, outlines and shadows
The strokes lose their edge, and the mark stops reading at small sizes.
- 05
Words or shapes inside the clear space
The logo reads as part of what stands next to it.
- 06
A photograph without the scrim
Over a light part of the picture the white logo disappears.
Logo · Not permitted
15 / 72
Color
Werklist · Brand guidelines
16 / 72
Brand blue
Blue marks what a person can act on and what they have selected.
Brand blue
#1863dc
--brand-true
The fill under white text
Blue ink
#0e4aa8
--brand-ink
Blue text and links
Hero blue
#030585
--hero-blue
The ground of a marketing hero
Navy
#0b0e1a
--navy
The scrim over a photograph
Color · Brand blue
17 / 72
Surfaces
Surfaces stack from the page up, and the change of fill tells one layer from the next.
Page
#f5f5f7
--bg
Panel or card
#ffffff
--surface-1
Box nested in a panel
#f1f1f4
--surface-strong
Control
#ebebf0
--surface-control
Color · Surfaces
18 / 72
Status
A status carries a word or an icon beside its color, for readers who cannot tell red from green.
Approved
4.54 to 1
Success
#18874f
--success
Done or approved
Needs review
5.15 to 1
Warning
#b87503
--warning
Something needs attention
Failed
5.90 to 1
Error
#c0233f
--error
It failed, or it cannot be undone
Color · Status
19 / 72
Gradient
White text belongs on the darker half of the gradient, from the brand blue onward.
- Token
- --grad-blue
- At 0 percent
- #5b9dff
- White text, 2.72 to 1
- At 55 percent
- #1863dc
- White text, 5.44 to 1
- At 100 percent
- #0e3fa8
- White text, 9.14 to 1
Color · Gradient
20 / 72
Dark theme
The dark theme has its own surfaces and inks. The brand blue is lighter in dark, so blue marks keep their contrast.
Welders for a shipyard in Split
Read the offer
Light theme
- Page
- --bg
- #f5f5f7
- Panel
- --surface-1
- #ffffff
- Blue marks
- --brand-blue
- #1863dc
- Button fill
- --brand-true
- #1863dc
Welders for a shipyard in Split
Read the offer
Dark theme
- Page
- --bg
- #000214
- Panel
- --surface-1
- #191c2c
- Blue marks
- --brand-blue
- #3b82f6
- Button fill
- --brand-true
- #1863dc
Color · Dark theme
21 / 72
Contrast
Text of any size needs 4.5 to 1 against its ground. Gray 400 misses that on white.
SamplePairInkGroundContrastResult
Body text#0d0d12#ffffff19.38 to 1Passes
Blue text and links#0e4aa8#ffffff8.19 to 1Passes
White text on the button fill#ffffff#1863dc5.44 to 1Passes
Gray 600 on white#52525b#ffffff7.72 to 1Passes
Gray 400 on white#9b9ba6#ffffff2.75 to 1Below the floor
Color · Contrast
22 / 72
Typography
Werklist · Brand guidelines
23 / 72
Typography
Werklist sets everything in Satoshi, from a table cell to a slide title.
Satoshi
The quick brown fox jumps over the lazy dog. 1234567890.
--font-sans
Typography · Typeface
24 / 72
Scale
Pages, documents and marketing screens use the reading ramp.
- Display56/60 px--type-display
- Title 144/52 px--type-title-1
- Statement40/48 px--type-statement
- Title 228/34 px--type-title-2
- Lede22/32 px--type-lede
- Title 320/28 px--type-title-3
- Body16/26 px--type-body
- Small14/22 px--type-small
- Navigation14/20 px--type-nav
- Caption13/20 px--type-caption
Typography · Scale
25 / 72
Weights
Werklist sets text in regular, medium and bold. Satoshi has no weight 600, so a semibold is drawn as bold.
- 300Light. Aa 0123Outside the type ramp
- 400Regular. Aa 0123Reading text
- 500Medium. Aa 0123Controls and labels
- 700Bold. Aa 0123Headings
- 900Black. Aa 0123Outside the type ramp
Typography · Weights
26 / 72
Diacritics
Satoshi covers Croatian and Serbian Latin at each of its weights.
č ć đ š ž
Č Ć Đ Š Ž
Werklist zapošljava lokalno i međunarodno. Čišća suradnja, jasnija pravila.
Verified people, verified companies. A platform for international employment.
Typography · Diacritics
27 / 72
Setting text
Show hierarchy with size and weight first, then with a quieter ink.
- 01
Write headings, labels and buttons in sentence case.
- 02
Do not set labels in capitals or add letter spacing. Capitals are slower to read.
- 03
Keep a line of running text between 45 and 75 characters.
- 04
Set figures in columns and totals in tabular figures, so they line up.
Typography · Setting text
28 / 72
Layout
Werklist · Brand guidelines
29 / 72
Grid
Content lines up on columns inside a frame that stays centered on wide screens.
Page navigationContent
- Frame
- 1440 px
- Columns
- 12
- Gutter
- 24 px
- Side padding
- 24 px, and 32 px from 1024 px
Layout · Grid
30 / 72
Spacing
Gaps come from one scale, in steps of 4 px at the small end.
- --space-14 px
- --space-28 px
- --space-312 px
- --space-416 px
- --space-520 px
- --space-624 px
- --space-832 px
- --space-1040 px
- --space-1248 px
- --space-1664 px
- --space-2496 px
- --space-32128 px
Layout · Spacing
31 / 72
Breakpoints
Choose by the width of the window, not by the device.
NameFromWhat changes
Small640 pxBelow it, a board shows its rows as cards
Medium768 pxPaired boxes sit side by side
Large1024 pxThe page navigation appears, and the side padding grows
Extra large1280 pxText beside a specimen narrows to four columns
Layout · Breakpoints
32 / 72
Radius
Small elements take the small steps and large surfaces the large ones.
Small, 4 px
--radius-sm
Checkbox
Medium, 6 px
--radius-md
Controls under 36 px
Large, 8 px
--radius-lg
Button, field
Extra large, 12 px
--radius-xl
Menu, popover
2 extra large, 16 px
--radius-2xl
Card, dialog
3 extra large, 24 px
--radius-3xl
Sheet
Full
--radius-full
Avatar, switch
Layout · Radius
33 / 72
Elevation
Content stays flat. A shadow appears when a surface floats over the content or lifts under the pointer.
- Level 0
- --elevation-0
- The page, resting cards, wells and tables
- Level 1
- --elevation-1
- A clickable card under the pointer
- Level 2
- --elevation-2
- The navigation rail and the view selector
- Level 3
- --elevation-3
- Menus, popovers, dialogs, sheets and toasts
Layout · Elevation
34 / 72
Iconography
Werklist · Brand guidelines
35 / 72
Sizes and stroke
The stroke gets lighter as the icon grows, so its weight stays the same.
12 px
Stroke 2
Information only, beside a value
14 px
Stroke 2
Dense rows
16 px
Stroke 1.75
The default
20 px
Stroke 1.75
Larger controls
24 px
Stroke 1.5
The navigation rail and the mobile bar
Iconography · Sizes and stroke
36 / 72
One icon for one action
The same action takes the same icon on each screen.
- CloseX
- ConfirmCheck
- AddPlus
- SearchSearch
- CopyCopy
- DownloadDownload
- More actionsMoreHorizontal
- Open or expandChevronDown
- Go toChevronRight
- Open elsewhereExternalLink
- WarningTriangleAlert
Iconography · Actions
37 / 72
Rules
Icons come from one family, Lucide, drawn on a grid of 24 by 24.
- 01
Where an icon belongs
It is the only label on a control, or it marks a repeated action.
- 02
The ink of its label
An icon takes the color of the text beside it.
- 03
A name on the control
A control that shows only an icon carries its name as a label.
- 04
No emoji
A country takes the country mark, not a flag emoji.
Iconography · Rules
38 / 72
Imagery
Werklist · Brand guidelines
39 / 72
Photography
Photographs appear on werklist.com, in presentations and on social media.
- 01
Studio portraits
A person against a deep blue wall, 824 by 1236 px.
- 02
The home hero
Portraits on a navy ground, 2752 by 960 px, with the left half kept empty for the headline.
- 03
Industry scenes
Workplaces with a painted finish, 1536 by 1024 px.
- 04
Cities
The branch cities seen from the air, 1920 by 1080 px.
- 05
The team
A candid group photograph, 2880 by 1620 px.
Imagery · Photography
40 / 72
Text on a photograph
Text and the logo stand on a scrim of navy at 60 percent, and they do not cross a face.
Verified people, verified companies.
Navy at 20 percent
1.55 to 1
Below the floor
Verified people, verified companies.
Navy at 40 percent
2.65 to 1
Below the floor
Verified people, verified companies.
Navy at 60 percent
5.06 to 1
Passes
Imagery · Text on a photograph
41 / 72
Not permitted
These pictures and treatments do not appear in Werklist material.
- 01
Stock handshakes, suits and skylines
They could belong to any company, so they say nothing about Werklist.
- 02
Faces made by an image generator
A reader who spots one stops trusting the page around it.
- 03
Text across a face
The reader sees neither the person nor the words.
- 04
A photograph inverted or dimmed in the dark theme
Only the page around a photograph changes with the theme.
Imagery · Not permitted
42 / 72
Motion
Werklist · Brand guidelines
43 / 72
Principles
Motion shows what changed and where it went.
- 01
Nothing moves on load
A page is complete at its first paint.
- 02
Opacity and position only
A menu fades in and rises 8 px, and sizes stay fixed.
- 03
Input comes first
A menu answers the keyboard from its first frame.
- 04
Less motion on request
Under reduced motion, slides and scales become instant and fades stay.
Motion · Principles
44 / 72
Durations
Most changes take the fast step, and nothing lasts longer than 300 ms.
StepDurationTokenUse
Instant100 ms--duration-instantA press, a tooltip leaving
Fast150 ms--duration-fastHover, focus, a change of fill or color
Base200 ms--duration-baseMenus, popovers, the change of page
Slow300 ms--duration-slowDialogs, sheets, a disclosure opening
Motion · Durations
45 / 72
Easing
The soft curve brings things in. The standard curve moves them and takes them out.
Soft
--ease-soft
cubic-bezier(0, 0, 0.2, 1)
Anything that enters: a menu, a dialog, a new page.
Standard
--ease-standard
cubic-bezier(0.4, 0, 0.2, 1)
Movement within the screen, and anything that leaves.
Motion · Easing
46 / 72
Writing
Werklist · Brand guidelines
47 / 72
Voice
Werklist copy says what happens and what to do next.
- 01
Be direct
Use the imperative where it fits: Send the offer.
- 02
Earn trust with specifics
A date, a figure or the name of a document does more than any adjective.
- 03
Leave out hype
No superlatives, no exclamation marks and no emoji in the product.
- 04
Keep it short
If a sentence can go, it goes.
Writing · Voice
48 / 72
Tone by situation
The voice stays the same everywhere. The tone changes with what the reader is doing.
WhereWhat to writeExample
ButtonA verb and its objectSend offer
ErrorWhat happened and what to doThe offer did not load. Try again.
Empty stateOne sentence and the next actionNo documents yet. Upload a document.
LabelA noun in sentence case, with no colonStart date
Destructive actionThe act itself, named on the buttonDelete board
Writing · Tone
49 / 72
Sentences
Keep a sentence only if the reader would lose a fact, a rule or an example without it.
- 01
Give each sentence a subject that does something. People, screens and files act.
- 02
Name the thing, not its category: print, social media and presentations, not surfaces.
- 03
Put the specific before the general: a measure, a name, a file, a real screen.
- 04
Do not use a dash as punctuation. Split the sentence in two, and write ranges with to.
Writing · Sentences
50 / 72
Words
Prefer the words of the trade, and leave out words that read as advertising.
Words of the trade
- verified
- placement
- sourcing
- work permit
- documentation
- compliance
- workers
- roles
Words to leave out
- unlock
- leverage
- synergy
- seamless
- game-changer
- revolutionary
- cutting-edge
- empower
- elevate
- supercharge
- robust
- best-in-class
- world-class
- effortless
- delve
Writing · Words
51 / 72
WerkOS
Werklist · Brand guidelines
52 / 72
Density
Work screens are dense, so people see more rows without scrolling.
- Toolbar control36 px high
- Form control44 px high
- Text field44 px high
- Board row
- 36 px
- Roomier board rows
- 52 and 76 px
- Gap between cards
- 16 px
- Board or list
- Up to 1600 px wide
- Form or document
- Up to 768 px wide
WerkOS · Density
53 / 72
Product type
WerkOS screens are dense, so the product ramp is smaller and tighter than the reading ramp.
- Title 126/32 px
- Title 222/28 px
- Title 317/24 px
- Subtitle15/22 px
- Body14/20 px
- Dense13/18 px
- Caption12/16 px
- Caption small11/14 px
WerkOS · Product type
54 / 72
Components
Werklist · Brand guidelines
55 / 72
Components
Each control and surface has a page of its own.
Actions
- Button
- Icon button
- Link
- Toolbar
Inputs
- Field
- Text field
- Text area
- Search field
- Select
- Combobox
- Date and time picker
Selection
- Checkbox
- Radio
- Switch
- Segmented control
Navigation
- Header
- Side navigation
- Tabs
- Mobile navigation
- Command palette
- Human and agent selector
Overlays
- Dialog
- Sheet
- Popover
- Menu
- Tooltip
Feedback
- Toast
- Inline message
- Notifications
- Progress
- Skeleton
- Counter
- Status
Content
- Card
- List
- Disclosure
- Avatar
- Permitted and not permitted
- Stat tile
Werklist
- Job card
- WerkAI
- Country mark
Components · Inventory
57 / 72
Patterns
Werklist · Brand guidelines
58 / 72
Patterns
A pattern shows how components work together on a task.
- 01
Empty states
- 02
Loading
- 03
Errors
- 04
Forms
- 05
Search and filtering
- 06
Navigation
- 07
Feedback
- 08
Modality
- 09
Undo and destructive actions
- 10
Files and uploads
- 11
Printing and export
- 12
Generated content
- 13
Marketing pages
Patterns · Inventory
59 / 72
Marketing hero
A marketing page opens on the dark ground of the brand with one headline, one sentence and two actions.
Verified people, verified companies.
Werklist helps companies hire reliable workers through local recruitment, international sourcing, documentation support, and end-to-end placement coordination.
Patterns · Marketing hero
60 / 72
Applications
Werklist · Brand guidelines
61 / 72
Applications
The brand comes to life across print, social media, and presentations. While they all share the same core identity and logo, the layout, imagery, and color balance are carefully tailored to feel native to each medium.
Presentations
1920 by 1080 px
Print
A4, 595 by 842 pt
Social media
1200 by 630 px
Applications · Print, social media, presentations
62 / 72
Accessibility
Werklist · Brand guidelines
63 / 72
Contrast
Text needs 4.5 to 1 against its ground. Icons, the focus ring and chart marks need 3 to 1.
SamplePairInkGroundContrastFloorResult
Error text#b01e39#ffffff6.79 to 14.5 to 1Passes
Blue text, dark theme#5b9dff#191c2c6.20 to 14.5 to 1Passes
Focus ring#1863dc#ffffff5.44 to 13 to 1Passes
Blue marks, dark theme#3b82f6#191c2c4.59 to 13 to 1Passes
Accessibility · Contrast
64 / 72
Focus
A control that receives keyboard focus shows a ring 2 px wide, 2 px away from the control.
Light theme
- Ring
- --focus-ring
- #1863dc
- Panel
- --surface-1
- #ffffff
- Ring against the panel
- 5.44 to 1
Dark theme
- Ring
- --focus-ring
- #7fb3ff
- Panel
- --surface-1
- #191c2c
- Ring against the panel
- 7.87 to 1
Accessibility · Focus
65 / 72
Keyboard
Everything a pointer can do, a keyboard can do.
KeyWhat it does
TabThe next control
EnterFollow a link, press a button
SpacePress a button, check a checkbox
Arrow keysMove inside a group, such as tabs or a menu
Home, EndThe first or the last item of a list
EscapeClose the front menu or dialog and return focus
Accessibility · Keyboard
66 / 72
Using this system
Werklist · Brand guidelines
67 / 72
Versions
A change to the logo, the typeface or the brand blue starts with an email to brand@werklist.com.
- 01
Major
Removes or renames a token or a component, or changes a brand color.
- 02
Minor
Adds a token, a component or a pattern.
- 03
Patch
Corrects a value that misses its contrast floor, or fixes wording.
Using this system · Versions
68 / 72
What is new
Each release, newest first, with what it changed.
2.1.2
Current release
- The header lists the sections of the system and opens each one.
- A dark theme stands beside the light one.
- Each control of WerkOS has a page, with the component live in both themes.
- Pages moved under their sections, and an old address leads to its new page.
Earlier releases are listed at design.werklist.com/resources/what-is-new.
Using this system · What is new
69 / 72
Downloads
Werklist · Brand guidelines
70 / 72
Files
The logo, the design tokens and the brand deck are at design.werklist.com/resources/downloads.
Logo
- werklist-blue-logomark.svg459 B
- werklist-logo-black.svg4.2 KB
- werklist-logo-white.svg4.2 KB
- werklist-mark-black.svg458 B
- werklist-mark-white.svg458 B
Design tokens
- werklist-tokens.css12.8 KB
- werklist-tokens.json58.1 KB
- werklist-tokens.print.css5.0 KB
Brand deck
- werklist-brand-deck-v2.1.pdf72 pages
Downloads · Files
71 / 72
The guidelines in full are at design.werklist.com, with each component live in the light and the dark theme. For anything they leave open, write to brand@werklist.com.
design.werklist.com
v2.1 · 2026