Skip to content
Werklist Brand Guidelines

Components.

Every component here is production code. Written and maintained in-house by the Werklist platform team. No third-party UI libraries. Toggle the source to inspect what ships.

Button

Seven variants, three sizes. The secondary to brand-blue invert is the signature action-reveal pattern.

Primary

bg #1863DC, hover #0E4AA8. rounded-[8px]. Default 44px, large (hero) 48px with rounded-[10px].

Secondary, the invert

bg #F0F0EE. Hover inverts to #1863DC on white.

Ghost and Outlined blue (legacy)

Ghost is transparent with gray-100 hover. Outlined-blue is 2px #1863DC at rounded-[2px], retained for legacy contexts only.

On dark. White and ghost-white

White reverses to gray-100. Ghost-white uses 10% white hover.

Card

Default card

rounded-[4px], bg #FAFAFA, whisper shadow. Hover: shadow lift, translate-y-[-1px], bg #F7F7F5.

Verified employer

Senior Electrical Technician

Split, Croatia · Full-time · 30 days

Input

Default input

h-12, bg white, border black/15, rounded-[6px]. Focus: border black, ring black/5. Error: border #B91C3A.

As it appears on your passport.

JobCard

Typographic row card. Deliberately no icons, no salary, no eyebrow. The Werklist listing card.

JobCard. Live

Deliberately type-led. Group-hover underline on title. Secondary CTA inverts on group-hover.

Senior Procurement Specialist

Zagreb, Croatia·Full-time·English B1
HRCroatia
Apply

AI callout

The single dark block on an otherwise white detail page. One per page. Anchors the visual rhythm.

AI intro callout

rounded-[6px], bg #1D2327, p-9. Body text-white/90, leading 1.8.

Werklist manages the full hiring lifecycle, from sourcing to settlement. For this role, Werklist has verified the employer’s contract fairness, safety standards, and payment history. You will not be charged any fee.

Chip

Country code (replaces flag emoji), status chip, filter pill.

Country code. Status. Filter pill

Country at rounded-[2px] 20×26. Status at rounded-full uppercase. Filter pill 36px.

HROpenUrgent

Checkbox

Checkbox

18px, rounded-[3px], border-[1.5px] black/30. Checked: bg-black.

Rating dots

Custom star replacement. Five 7×7 dots, 2px gap. Used inline in detail-page ratings grid.

Rating dots

Filled bg-black on light, bg-white on dark. Empty bg-#D4D4D4.

Employer trust
Compliance
Response time