[ DESIGN SYSTEM ]

Styleguide — luma

Components

Divider

subtle (default)
muted

Components

Section header

default (centered)

Everything you need

The recruitment platform your team will actually use

From job posting to offer letter — one place for your whole hiring process.

default (left-aligned)

Features

Built for modern recruiting teams

default centered — two-tone

Everything you need

Quick Apply on 7 major boards.Up to 3x more applications per board.

default left-aligned — two-tone

Built for companies of all sizes that are hiring.Up to 3x more applications per board.

Primitives

Buttons

Primitives

Icon buttons

Primitives

Badges

Default Secondary Tertiary
Success Warning Error Info

Surfaces

Cards

01

Schedule your next interview online

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best.

02

Schedule your next interview online

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best.

Wrap a card in <a> to get the hover lift:

01

Hover me

Lifts and shadows on hover.

Forms

Inputs & focus ring

Controls

Segmented & technical data

Disclosure

FAQ

Can I cancel anytime?
Yes — billing stops at the end of the current period, no questions asked.
What about GDPR and the EU AI Act?
We are GDPR-native and EU AI Act ready, with data processed in the EU.
Do I need to import existing candidates?
No. You can start fresh or import in one click — both paths are supported.

Tokens

Neutral ramp & status

gray-disabled
gray-surfaceSubtle
gray-subtle
gray-muted
gray-emphasized
gray-emphasizedDark
gray-middle
gray-fg
gray-solid
gray-darkest
green-solid
red-solid
orange-solid
blue-solid
purple-solid

Tokens

Radius scale

radius-sm
radius-md
radius-lg
radius-xl
radius-pill

Tokens

Shadow scale

shadow-soft
shadow-soft-lg
shadow-sm
shadow-md
shadow-lg

Tokens

Type scale

[ HEADINGS — Inter Variable, 500 ]

--text-h1 60px / 1.133

H1 — The quick brown fox jumps over the lazy dog

--text-h2 48px / 1.167

H2 — The quick brown fox jumps over the lazy dog

--text-h3 36px / 1.222

H3 — The quick brown fox jumps over the lazy dog

--text-h4 28px / 1.286

H4 — The quick brown fox jumps over the lazy dog

--text-h5 22px / 1.364

H5 — The quick brown fox jumps over the lazy dog

--text-h6 18px / 1.444

H6 — The quick brown fox jumps over the lazy dog

[ BODY — Inter, 400 / 500 ]

--text-body 14px / 1.571
Body/Normal — The quick brown fox jumps over the lazy dog. Body/Semi — The quick brown fox jumps over the lazy dog. Body/Link — The quick brown fox jumps over.
--text-caption 12px / 1.500
Caption/Normal — The quick brown fox jumps over the lazy dog. Caption/Semi — The quick brown fox jumps over the lazy dog. Caption/Link — The quick brown fox jumps over.

[ PARAGRAPH — Inter, 400 · used in article body copy ]

Paragraph/Normal 16px / 26px

Job search is changing fast. Candidates no longer rely only on job boards or Google. Instead, they turn to AI tools and ask direct questions like "Show me remote product manager jobs in Germany" or "Which companies are hiring Python developers?".

AI-powered search engines do more than list links. They analyse content, extract meaning, and recommend the most relevant results. For recruiters, this creates a new challenge. If an AI tool cannot clearly understand your job ad, it will not surface it to candidates.

[ DISPLAY — PT Serif, 400 · used in pull-quotes and testimonials ]

.display-1 56px / 56px / -3% tracking

The quick brown fox

.display-2 28px / 36px / 0% tracking

The quick brown fox

[ MONO — Roboto Mono, 500 · used in FeatureBlock eyebrow ]

caption-mono 12px / 16px / +0.04em / uppercase
Caption/Mono — 01 REACH SECURITY FEATURES