Product UI Bridge.

One brand expressed across three surfaces at three tempos. Marketing is spacious and editorial. Product is dense and operator-grade. ATS is very dense and data-forward. All share mark, type, tokens.

09.1

Three surfaces

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

Operator console for recruiters.

09.2

Shared across all surfaces

Satoshi typeface, all weights.
#1863DC primary, #030585 hero-blue, full neutral ramp.
Werklist wordmark and mark.
Country-code chip, tabular-nums rule, eyebrow pattern, hand-rolled icons.
Voice and tone.

09.3

Density table

Same tokens, different defaults.

Attribute

Marketing

Product

ATS

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-5 md:px-7 md:py-6p-4

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

PhotographyHero OKOne abstract PNGNone

09.4

Palette emphasis

Marketing

70 / 20 / 10

Brand blue in CTAs and accents; hero blue in stat tiles.

Product

80 / 15 / 5

Neutrals dominate; brand blue only on primary CTAs and focus.

ATS

90 / 8 / 2

Brand blue reduced to the single focus ring; neutrals almost exclusively.

09.5

The bridge test

jobs.werklist.com already lives at product-density but preserves marketing-level typographic signatures. eyebrows, tabular-nums, tight-tracked headings, editorial rule lines. This dual mode , operator-dense but editorially-composed. is the Werklist signature and the spec every new surface must match.