Brand Guidelines

Brand Foundation

v1.0 · 2026

00FoundationThis deck
01Logo
02Color
03Typography
04Grid & Layout
05Iconography
06Imagery
07Motion

08Voice & Tone
09Product UI Bridge
10Components
11Patterns
12Applications
13Accessibility
14Governance
15Downloads

Foundation · Contents

02 / 68

Foundation

Werklist · Brand Guidelines

03 / 68

Purpose

To bring simplicity to global work by eliminating complexity and uncertainty for both workers and employers.

Foundation · Purpose

04 / 68

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.

Foundation · Vision & Mission

05 / 68

Local placement

Remove bureaucracy from hiring local talent. Replace it with speed, precision and human connection.

Global placement

Bring fairness and cultural alignment to global work by supporting legal migration and building transparent, value-driven pathways for both workers and employers.

Foundation · Mission Pillars

06 / 68

Values

Five, in order. Each is a single sentence. Each appears verbatim in internal documentation and every deck.

Impact over Activity

We measure ourselves by outcomes, not by how busy we appear.

Excellence

We do not polish forever. We also do not ship work we would not sign with our name.

Winning

We play to win. Not once. Always.

Velocity

We make fast decisions and act with peaceful urgency.

Responsibility

We do not ask for permission to take ownership or risk. We need a reason not to.

Foundation · Values

07 / 68

Culture

Ten principles that define how Werklist operates. Drawn verbatim from the Manifesto.

01
Mission Over Self
No one may ever place personal interest above the mission or the collective.
02
Operate as a Team
Fully. Decisively. And with heart.
03
Relentless Optimism
We will figure it out and tomorrow will be better.
04
Zero Mediocrity
We never 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. Ever.
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.

Foundation · Culture

08 / 68

Positioning

Werklist is the global work infrastructure. A tech-enabled recruitment network that verifies both sides of the hire and handles the full employment lifecycle from sourcing to settlement.

Audience

Enterprise buyers

HR, operations and CEO decision-makers at European employers hiring locally or across borders.

SMB & mid-market

Family businesses, growing companies and SMBs hiring their first skilled workers or expanding across CEE.

Candidates

Skilled-trade, industrial, hospitality, logistics and manufacturing workers across CEE. Also mid to senior professionals for local placements.

Investors & partners

Evaluating Werklist as a category leader in Croatia and CEE.

Internal operators

Recruiters, account managers and the Werklist team working inside WerkOS.

Foundation · Positioning & Audience

09 / 68

Logo

Werklist · Brand Guidelines

10 / 68

Logo

A custom wordmark paired with a mark. Three angled parallel strokes plus a single dot — a stylized W reading as checkmark, hillside, and signal bars. The wordmark is a drawn asset, not typography.

Canvas

698 × 171

Strokes

3 + 1 dot

Stroke width

Logo · Overview

11 / 68

Lockups

Sanctioned colorways. Wordmark on top, mark on bottom.

Wordmark · black on white

Wordmark · white on black

Wordmark · white on brand

Mark · black on white

Mark · white on black

Mark · white on brand

Logo · Lockups

12 / 68

Standards

Clear space

Minimum clear space on all sides equals one stroke height — the thickness of one angled stroke. Never tighter, even in packed navs.

Minimum sizes

Digital · wordmark

80 px wide

Digital · mark

16 px floor

Print · wordmark

20 mm wide

Print · mark

6 mm

Logo · Standards

13 / 68

On backgrounds

Four sanctioned placements. Photography is handled via a minimum 40% black overlay.

White / off-white

#FFFFFF · #FAFAFA

Brand blue

#1863DC

Hero blue

#030585

Photography

overlay ≥ 40% black

Logo · Backgrounds

14 / 68

Don’ts

Eight rules. Every one is a tell if broken.

Do not rotate or skew

The wordmark is horizontal. Never tilted.

Do not recolor

Sanctioned colorways: black, white, blue-gradient. Nothing else.

Do not outline or stroke

The wordmark is filled geometry.

Do not drop shadow

No decorative elevation. The mark stands alone.

Do not place on low contrast

Minimum 4.5:1 against background.

Do not crop

Use the logomark for tight lockups, never a cropped wordmark.

Do not pair without a lockup

Co-branding requires a defined lockup.

Do not animate on hover

The mark does not move on the brand page. Ever.

Logo · Don'ts

15 / 68

Color

Werklist · Brand Guidelines

16 / 68

Primary

The single color Werklist is identified by, and two partners that never stand alone.

Werklist Blue

#1863DC

--brand-blue

Primary · CTA fill

Blue Dark

#0E4AA8

--brand-blue-dark

CTA hover / press

Hero Blue

#030585

--hero-blue

Deep navy · stat tiles

Color · Primary

17 / 68

Neutrals

Eleven steps from white to black. The surface contrast between #FFFFFF and #FAFAFA is the primary separation tool in product UI.

White

#FFFFFF

--white

Page bg

Gray 50

#FAFAFA

--gray-50

Card

Gray 100

#F4F4F5

--gray-100

Hover

Gray 200

#E5E5E5

--gray-200

Divider

Gray 300

#D1D1D5

--gray-300

Border

Gray 400

#A0A0A8

--gray-400

Placeholder

Gray 500

#52525B

--gray-500

Body

Gray 600

#404048

--gray-600

Secondary

Gray 700

#27272A

--gray-700

Prose

Gray 800

#1D2327

--gray-800

AI callout

Gray 900

#000000

--gray-900

Headings

Color · Neutrals

18 / 68

Accent & Semantic

Small accent set, hard-coded across the canon. Five semantic tokens — never introduce a new one without updating this file.

Accent surfaces

JobCard hover

#F7F7F5

Warmer tan

Secondary CTA

#F0F0EE

Inverts to brand

Separator dot

#C4C4C8

Inline dot

Near-black navy

#0B0E1A

B2B premium surface

Semantic

Success

#2EBB4E

--semantic-success

Check / included

Warning

#D9950F

--semantic-warning

Time-sensitive

Error

#B91C3A

--semantic-error

Destructive

Info

#1863DC

--semantic-info

Reuses brand

Live

#4ADE80

--semantic-live

Pulse dot only

Color · Accent & Semantic

19 / 68

Gradient

One diagonal gradient. From near-black navy through hero blue to brand blue. Used on social portrait tiles, hero backdrops, and divider slides.

Stop 1

#0B0E1A

Stop 2

#030585

Stop 3

#1863DC

Color · Gradient

20 / 68

Dark mode

Dark is an inversion, not a separate palette. Brand blue stays the same; neutrals flip.

RoleLightDark

Page bg#FFFFFF#1D2327

Card#FAFAFA#27272A

Body text#52525B#D1D1D5

Heading#000000#FFFFFF

RoleLightDark

Divider#E5E5E5rgba(255,255,255,0.12)

Primary CTA· same#1863DC#1863DC

CTA hover#0E4AA8#3378E4

Secondary CTA#F0F0EErgba(255,255,255,0.08)

Color · Dark mode

21 / 68

Contrast

WCAG 2.2 AA floor, AAA where achievable. The placeholder gray fails body AA — use only for input placeholders.

ForegroundBackgroundRatioWCAG

#1863DC#FFFFFF4.89:1AA

#1863DC#FAFAFA4.73:1AA

#FFFFFF#03058514.7:1AAA

#FFFFFF#1863DC4.89:1AA

#FFFFFF#0E4AA87.4:1AAA

ForegroundBackgroundRatioWCAG

#000000#FFFFFF21:1AAA

#52525B#FFFFFF8.17:1AAA

#27272A#FFFFFF15.26:1AAA

#B91C3A#FFFFFF6.02:1AAA

Usage ratio

70%Neutral

20%Brand blue

10%Accent

Color · Contrast

22 / 68

Typography

Werklist · Brand Guidelines

23 / 68

Typography

Satoshi by Fontshare. One family, five weights, full Latin Extended-A for Croatian, Serbian, Slovenian, and Romanian diacritics.

Satoshi

The quick brown fox jumps over the lazy dog. 1234567890.

--font-sans · Fontshare

Typography · Specimen

24 / 68

Scale

Eleven steps. Size, weight, usage.

StepSizeWeightUse

Display44 / 68 / 76 px700Home hero · marketing hero

H126 / 34 px700Detail hero

H2 editorial34 / 44 px700Marketing section heads

H2 section44 px700Generic product sections

H322 / 26 px700Detail-page subsections

H4 card18 / 20 px700JobCard titles

Body large16 px400Long-form prose

Body15 px400Default UI body

Small13 px400Meta, footer

Eyebrow11 px600UPPERCASE section labels

Caption12 px400Helper / legal

Typography · Scale

25 / 68

Weights

Five loaded. In practice: headings at 700, UI labels at 500–600, body at 400.

300Light. Aa 0123Decorative marketing support copy only.

400Regular. Aa 0123Default body at 15–16 px.

500Medium. Aa 0123UI labels, ghost-button copy.

700Bold. Aa 0123Headings, buttons, emphasis.

900Black. Aa 0123Reserved for future display / billboard.

Typography · Weights

26 / 68

Croatian diacritics

Latin Extended-A coverage verified on Fontshare specimen at all five weights.

č ć đ š ž

Č Ć Đ Š Ž

Werklist zapošljava lokalno i međunarodno. Čišća suradnja, jasnija pravila.

Verified people, verified companies. European cross-border staffing.

Typography · Diacritics

27 / 68

Rules

Six absolutes. Every shipped surface respects them.

01
Only one weight per visual rank — differentiate by size, not weight.
02
Eyebrows always precede an H-level heading; they never stand alone.
03
No italics in UI copy. Italics reserved for legal disclaimers and quoted names.

04
All numbers use font-variant-numeric: tabular-nums.
05
Body line length caps at 65–75 characters. Use max-w-[65ch] on prose containers.
06
Never disable font-feature-settings ss01, cv01, cv11.

Typography · Rules

28 / 68

Grid & Layout

Werklist · Brand Guidelines

29 / 68

Spacing

Base 4, rhythm 8. Twelve steps. Every spacing value is a multiple of 4.

StepPixels

14 px

28 px

312 px

416 px

520 px

624 px

832 px

1040 px

1248 px

1664 px

2496 px

32128 px

Grid · Spacing

30 / 68

Containers & breakpoints

Six container widths, five breakpoints. Tailwind v4 defaults, un-overridden.

SurfaceWidthToken

Marketing1440 pxmax-w-[1440px]

Product (jobs)1440 pxmax-w-[1440px]

Hero heading920 pxmax-w-[920px]

Hero subhead640 pxmax-w-[640px]

Form / narrow720 pxmax-w-[720px]

Prose (blog / docs)~65chmax-w-[65ch]

———

sm≥ 640 pxbreakpoint

md≥ 768 pxbreakpoint

lg≥ 1024 pxbreakpoint

xl≥ 1280 pxbreakpoint

2xl≥ 1536 pxbreakpoint

Grid · Containers

31 / 68

Radius

Radius scales with role. Not uniform — images sharp, cards modest, CTAs rounded, pills full.

image

2px

checkbox

3px

card-tight

4px

card

6px

input

6px

button

8px

cta

10px

panel

12px

pill

9999px

Grid · Radius

32 / 68

Shadows

Used sparingly. Surface contrast (#FFFFFF over #FAFAFA) is the primary separation tool — shadow is the accent.

Whisper (default card)

0 1px 1px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02)

Card hover lift

0 8px 24px -12px rgba(0,0,0,0.14)

Popover / dropdown

0 10px 30px rgba(0,0,0,0.15)

Light shelf

0 1px 2px rgba(0,0,0,0.03)

Hero CTA white-on-dark

0 8px 24px -8px rgba(0,0,0,0.4)

Search over dark

0 10px 40px rgba(0,0,0,0.25)

Grid · Shadows

33 / 68

Iconography

Werklist · Brand Guidelines

34 / 68

Starter set

Fifteen icons cover every recruitment verb in use today. Hand-rolled 20×20 SVGs. Stroke 1.75, currentColor, round caps and joins.

MapPin

Clock

Users

ArrowRight

Bookmark

Check

Chat

LinkIcon

Download

Building

Shield

Globe

Spark

Iconography · Starter set

35 / 68

Rules

Hand-rolled 20×20 SVGs in Lucide family. Stroke 1.75, currentColor, round caps and joins.

01
Hand-rolled, no library
Every icon ships as a local component in src/components/Icon.tsx. No Lucide, no Heroicons, no library dependency.
02
Always currentColor
Stroke uses currentColor so icons track text color in both light and dark surfaces.

03
No emoji as brand language
Dating and cultural-load issues are too high for a CEE + multilingual surface.
04
No flag emoji
Country-code chips replace flag emojis everywhere.

Iconography · Rules

36 / 68

Imagery

Werklist · Brand Guidelines

37 / 68

Two modes, one system

Werklist runs a two-mode photography system. Marketing allows commissioned portraits. Product stays photo-light.

Mode A

Marketing

Commissioned portraits of real-seeming CEE workers across industries. Documentary-warm direction. Studio blue or real workplaces. No stock.

Mode B

Product

Photo-light. One painterly gradient hero PNG per major page. Composition: cobalt + electric blue + occasional magenta bloom. Soft focus.

Imagery · Modes

38 / 68

Marketing direction

Documentary-warm. Subjects look at camera. Natural working contexts. Background tuned to brand blue.

Portrait · 3:4Cover crop

Environmental · 4:5Workplace scene

Group · 4:3Upper two-thirds

Imagery · Frames

39 / 68

Don'ts

Four hard rules for any Werklist imagery.

01
No tech mascot illustration
No cute 3D characters.
02
No stock handshake / suit / skyline
Royalty-free imagery reads as startup.

03
No AI-generated faces
Portraits are commissioned, always.
04
No emoji as decoration
Applies to every Werklist surface.

Imagery · Don'ts

40 / 68

Motion

Werklist · Brand Guidelines

41 / 68

Principles

Purposeful. Responsive. Restrained. Most interactions complete in 150–300ms.

01
Purposeful
Motion communicates state. It never decorates.
02
Responsive
Most interactions complete in 150–300ms.
03
Restrained
Obey prefers-reduced-motion. Transforms collapse to 0.

Motion · Principles

42 / 68

Durations

Four steps. Token-driven. Most interactions complete in 150–300ms.

NameDurationTokenUse

Instant100 ms--duration-instantToggles, fades on fast elements

Fast150 ms--duration-fastDefault on most interactive elements

Default200 ms--duration-defaultJobCard hover, CTA hover with transform

Slow300 ms--duration-slowHeader scroll-morph, modal transitions

Motion · Duration

43 / 68

Easing

Two curves. Default for most. Entrance for entries.

Standard

cubic-bezier(0.4, 0, 0.2, 1)

Default. Tailwind default, jobs canon.

Entrance

cubic-bezier(0.0, 0.0, 0.2, 1)

Entrance animations.

Motion · Easing

44 / 68

Voice & Tone

Werklist · Brand Guidelines

45 / 68

Voice

Direct. Trust-first. Unhyped. Werklist writes as a competent operator.

Voice principle

Direct

Declarative imperatives. "Submit your CV" — not "you might consider submitting your CV."

Voice principle

Trust-first

An auditor's voice with institutional warmth. Specifics beat claims.

Voice principle

Unhyped

Verbs over adjectives. No exclamations in UI. No three-adjective triads.

Voice · Principles

46 / 68

Tone matrix

Eight scenarios. Tone modulates by context; voice stays the same.

ScenarioToneExample

Marketing heroDeclarative, pithyVerified people, verified companies.

Product navTransactional, 1–2 wordsHire workers · Browse jobs · Apply

CTA on cardDirect verbApply · View details · Quick apply

Form labelsBare, politeFull name · Email · CV

ErrorSpecific, no blameEnter a valid email address.

Empty stateHonest, shortNo roles match your filters.

SuccessConcrete, no exclamationApplication received.

Conversational footerRelational, warmEverything starts with a conversation.

Voice · Tone matrix

47 / 68

Verbatim canon

Preserve these phrasings exactly. Rewrites require sign-off at brand@werklist.com.

01
Verified people, verified companies.
02
Recruitment network with end-to-end services for local and international hiring.
03
Everything starts with a conversation.
04
Leave workforce management to us.

05
Hire faster. Compliant. Fully connected.
06
European cross-border staffing. Verified workers. Verified employers.
07
We take care of the right talent, so you can achieve the right results.
08
No fees for workers.

Voice · Verbatim canon

48 / 68

Prefer / avoid

Prefer

verified
structured
transparent
end-to-end
operators
workers
employers
roles
placements
relocation
compliance
ownership
infrastructure
system

Avoid

unlock
leverage
synergy
solutions
journey
seamless
game-changer
revolutionary
next-generation
hassle-free

Voice · Prefer & avoid

49 / 68

Product UI Bridge

Werklist · Brand Guidelines

50 / 68

Three surfaces

One brand expressed across three surfaces at three tempos. All share mark, type, tokens.

Marketing

Spacious · editorial

werklist.com · design.werklist.com. Selling story, building trust.

Product

Dense · operator-grade

jobs.werklist.com · WerkOS. Getting jobs filled, doing work.

ATS

Very dense · data-forward

WerkOS operator console. Recruiter daily-driver.

Product UI · Surfaces

51 / 68

Density

Same tokens, different defaults. Marketing spacious, Product dense, ATS very dense.

AttributeMarketingProductATS

Section paddingpy-20 md:py-24py-10 md:py-12py-6 md:py-8

Body size16–17 px15 px14 px

Heading hero44/68/76 px22–34 px16–22 px

Card paddingp-6 md:p-9px-6 py-5p-4

Color ratio70 / 20 / 1080 / 15 / 590 / 8 / 2

PhotographyHero OKOne abstract PNGNone

Product UI · Density

52 / 68

Components

Werklist · Brand Guidelines

53 / 68

Component inventory

Six production components. Written and maintained in-house. No third-party UI libraries.

01
Button
Seven variants, three sizes. Primary, secondary (invert), ghost, outlined-blue (legacy), white, ghost-white. Heights 36 / 44 / 48 px.
02
Card
rounded-[4px] bg #FAFAFA whisper shadow. Hover: shadow lift, translate-y-[-1px], bg #F7F7F5.
03
Input
h-12 bg white, border black/15, rounded-[6px]. Focus: border black, ring black/5. Error: border #B91C3A.

04
JobCard
Typographic row card. Deliberately no icons, no salary, no eyebrow. Group-hover underline on title; secondary CTA inverts on group-hover.
05
AI callout
rounded-[6px] bg #1D2327 p-9. The single dark block on an otherwise white detail page. One per page.
06
Chip
Country-code chip 20×26 at rounded-[2px]. Tabular-nums two-letter ISO.

Components · Inventory

54 / 68

Patterns

Werklist · Brand Guidelines

55 / 68

Pattern inventory

Compositions of components. Each pattern has a single job and a documented frequency.

01
Marketing hero
Full-bleed black + painterly PNG. Eyebrow pill with live-dot. 44/68/76 headline. Two CTAs. One per page.
02
Product hero
White bg, gradient PNG sidebar, 22–34px headline, search input first, KPI strip below. One per surface root.
03
AI callout pattern
Dark #1D2327 callout interrupting white prose. One per detail page. Anchors visual rhythm.

04
Testimonial card
Pull-quote on light card, rounded-[6px], 1px border #1863DC/20. Author meta in eyebrow.
05
CTA banner
Bottom-of-page conversion. Brand-blue full-bleed, white headline, single primary CTA.
06
Footer cluster
Three sections (Company / Network / Legal) + Branches; FooterGroup accordion on mobile. Black logo, gradient surface.

Patterns · Inventory

56 / 68

Marketing hero

Full-bleed black + painterly PNG. Eyebrow pill with live-dot. 44/68/76 headline. Two CTAs.

Global · Local · Verified

Verified people,
verified companies.

European cross-border staffing. End-to-end services for local and international hiring.

Hire workersBrowse jobs

Patterns · Marketing hero

57 / 68

Applications

Werklist · Brand Guidelines

58 / 68

PDF deck

Landscape 1920×1080 at 300dpi. Generated from MDX, not Figma. One PDF that projects cleanly, prints at A3, and shares at roughly 5 MB compressed.

Cover

Brand Guidelines
April 2026

03 · Color

Color

Interior

#FAFAFA background. Pull quotes on rounded border-[#1863DC]/20.

17 / 83

Applications · PDF deck

59 / 68

Accessibility

Werklist · Brand Guidelines

60 / 68

WCAG 2.2 AA

AA is the minimum, AAA where achievable. The placeholder gray fails body AA — placeholder only.

PairRatioPasses

#1863DC on #FFFFFF4.89:1AA body · AAA large

#FFFFFF on #03058514.7:1AAA all sizes

#52525B on #FFFFFF8.17:1AAA all sizes

#A0A0A8 on #FFFFFF3.05:1Placeholder only

#B91C3A on #FFFFFF6.02:1AAA all sizes

#000000 on #FFFFFF21:1AAA all sizes

Accessibility · Contrast

61 / 68

Focus & motion

Focus rings are 2px Werklist Blue with 2px offset. Every transition respects prefers-reduced-motion globally.

Focus ring · light

outline: 2px solid #1863DC;
outline-offset: 2px;

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Accessibility · Focus & motion

62 / 68

Governance

Werklist · Brand Guidelines

63 / 68

Versioning

Semantic versioning on the brand system. One owner. Source of truth: design.werklist.com.

MAJOR
Token replacement
Changing a primary token (e.g., replacing brand blue). Requires executive sign-off and a migration period.
MINOR
Additions
Adding a new token, component, or pattern.
PATCH
Corrections
Correcting a typo, fixing a contrast bug, clarifying wording.

Governance · Versioning

64 / 68

Changelog

Semantic versioning on the brand system. A changelog updated on every merge. Source of truth: design.werklist.com.

v1.0.0

21 Apr 2026

Initial release. Sixteen sections complete.
Tokens mirrored from jobs.werklist.com canon.
Satoshi via Fontshare, five weights loaded.
Focus-ring spec codified; reduced-motion applied globally.
Deprecated: Pixfort tracking, Google Sans, royal-cobalt #1A47CF.

Governance · Changelog

65 / 68

Downloads

Werklist · Brand Guidelines

66 / 68

Asset library

Every asset is public at design.werklist.com/downloads. For co-brand or partner kits, write to brand@werklist.com.

Logos

werklist-logo-black.svg
SVG · Wordmark · 4 KB
werklist-logo-white.svg
SVG · Wordmark · 4 KB
werklist-mark-black.svg
SVG · Mark · 1 KB
werklist-mark-white.svg
SVG · Mark · 1 KB

Tokens

werklist-tokens.css
CSS · Root vars · ~6 KB
werklist-tokens.json
JSON · W3C draft · ~12 KB

Templates

werklist-brand-guidelines.pdf
PDF · Deck · ~5 MB
werklist-pitch-template.key
Keynote · ~24 MB

Downloads · Asset library

67 / 68

The source of truth for this document lives at design.werklist.com. Future revisions and additional chapters are versioned there.

design.werklist.com

v1.0 · 2026

Brand Guidelines

Contents

Purpose

Vision

Mission

Local placement

Global placement

Values

Impact over Activity

Excellence

Winning

Velocity

Responsibility

Culture

Positioning

Audience

Enterprise buyers

SMB & mid-market

Candidates

Investors & partners

Internal operators

Logo

Lockups

Standards

Clear space

Minimum sizes

On backgrounds

Don’ts

Primary

Neutrals

Accent & Semantic

Gradient

Dark mode

Contrast

Typography

Scale

Weights

Croatian diacritics

Rules

Spacing

Containers & breakpoints

Radius

Shadows

Starter set

Rules

Two modes, one system

Marketing direction

Don'ts

Principles

Durations

Easing

Voice

Tone matrix

Verbatim canon

Prefer / avoid

Three surfaces

Density

Component inventory

Pattern inventory

Marketing hero

Verified people,verified companies.

PDF deck

WCAG 2.2 AA

Focus & motion

Versioning

Changelog

Asset library

Verified people,
verified companies.