Components.

Hand-rolled and live. No shadcn, no MUI, no Chakra. Every preview renders the component exactly as it ships on jobs.werklist.com. Toggle code to copy the source.

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.

Full name

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

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

Relocation support requiredDriving licence requiredVerified employer

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