Style guide · v1

Warm Premium

A quiet, capable design language for Hartley. Cream paper, espresso ink, one honey accent. Green and red mean what they should. Never decoration, never the brand.

01 · Color

Neutrals

Warm off-white as the page; ink that's near-black but never blue.

paper
#FAF7F2
App background
surface
#FFFFFF
Cards / panels
surface-sunken
#F2EDE4
Input wells
ink
#1A1614
Primary text
ink-soft
#5C5750
Secondary text
ink-muted
#8A857C
Tertiary text
divider
#E8E2D7
Hairlines
divider-strong
#D6CFC2
Stronger borders

02 · Color

Accents

One brand anchor (amber), four state colors. Each travels as a trio: base / tint / ink.

amber

Brand · primary action
base#C16A1E
tint#F5E8D6
ink#5E3308

forest

Success · positive state
base#2E7D5B
tint#E0F0E5
ink#163E2C

brick

Danger · destructive · failure
base#B83A2E
tint#F5DDD8
ink#5E1B14

mustard

Warning · pending · needs review
base#C99416
tint#F5EAD0
ink#5E4308

slate

Neutral info · cool against warm
base#5E6D7E
tint#E1E6EB
ink#2F3641

03 · Type

Typography

Source Serif 4 (variable, opsz axis) for headings; hairlines auto-thicken at UI sizes. Inter for body. JetBrains Mono for code.

The right job, found by the system.

Section heading · 36px / opsz 72

Subsection · 30px / opsz 36

Inline heading · 20px / opsz 14

Or 20px Inter Medium for sans subheadings

Body copy at 16px / 1.6 line-height. Used for descriptions, explanations, and longer-form text. It should still read comfortably on the warm paper, not too dense, not too airy.

Secondary text at 14px / 1.5, ink-soft. For metadata, labels, and helper copy that supports the primary content.

Eyebrow · 12px Inter, tracked

seeker_id = 9f3c4d…
$200,000 / yr

04 · Components

Buttons

One primary per view. Default for secondary actions. Brick only for destructive.

05 · Components

Form fields

Sunken background, hairline border, amber focus ring.

What you state publicly: your minimum.

What you'd actually accept.

06 · Semantics

Application status

Every status maps to a color. Green = good, mustard = waiting on someone, brick = lost, slate = neutral.

submittedacknowledgedscreeningphone_screentechnical_assessmentinterview_loopofferacceptedrejectedwithdrawnghostedexpired

07 · Semantics

Match decision

The three-tier comp logic, surfaced visually.

apply_publicStrong match · apply
apply_negotiateWorth applying · negotiate up
skip_below_floorBelow your floor
skip_filterDoesn't match filters
manual_reviewNeeds your eyes

08 · Components

Job card

Production-style card showing how the tokens compose.

Senior Platform Engineer

Stripe · Remote (US) · posted 2 days ago

strong match

$215,000 – $260,000 / yr

Hands-on Kubernetes platform role. K8s, Terraform, observability; small team, no on-call rotation.

09 · Voice

Plain English

The dumbest-user test: would your mom understand this without context?

Auto-application enabled, daily cap: 10
We'll apply for you. Up to 10 jobs per day.
Successfully updated
Updated.
Submitted 2026-05-14T09:12Z
Today, 9:12 am
Click here to edit comp floors