Ladder · 01
Foundations
Every colour, size, weight, radius, shadow and duration in the product, and the components built from them. The swatches read the live tokens and the components are the real imports, so this page cannot drift from the app. Switch the theme in the corner and watch the whole system repaint from thirty lines of CSS.
Colour
Semantic names only. A token that says what it is survives a palette change; a token that says what it looks like does not. Three families: surfaces you build on, ink you read, and a single accent that always means interactive.
Surfaces
Page, well, card, and a quiet fill inside cards.
Paper
--paper
The page
Sunk
--paper-sunk
Wells, rails, tab tracks
Surface
--surface
Cards, inputs, popovers
Surface 2
--surface-2
Fills inside a card
Rule
--rule
Default border
Rule 2
--rule-2
Row separators
Rule strong
--rule-strong
Borders on fills
Ink
Four steps, tuned for contrast on ivory rather than on white.
Ink
--ink
Headings and anything that must be read
Ink 2
--ink-2
Body copy and long prose
Ink 3
--ink-3
Labels and secondary text
Ink 4
--ink-4
Timestamps, hints, placeholders
Ink — 16:1
Ink 2 — 9:1
Ink 3 — 5.4:1
Ink 4 — 3.2:1, never body copy
Brand
Deep indigo. Interactive or system — never decoration.
Brand
--brand
Brand hover
--brand-2
Brand wash
--brand-soft
Brand line
--brand-line
Semantic
Reserved strictly for state, which is why the accent stays off this axis.
Positive
--pos
Applied, offer, resolved
Caution
--cau
Waiting on you, gaps
Negative
--neg
Rejected, failed, paused
Type
Nine named roles. Every heading and every run of body copy in the app is one of these — a screen never picks a size and weight of its own. Inter carries the interface, Fraunces appears only at display sizes, JetBrains Mono only for values you might have to read aloud.
.t-hero
Marketing fold only
Climb faster
.t-display
Page titles, section leads
A career agent that does the part you keep putting off
.t-title
Detail-page subject
Staff Engineer, Developer Experience
.t-heading
Card and panel titles
Why this fit
.t-subheading
List row titles
Software Engineer, Infrastructure
.t-body
Default reading size
Your platform and API work maps directly onto what the posting describes, and the seniority band lines up with where you are now.
.t-body-sm
Dense rows, metadata
Anthropic · San Francisco, CA · $380k–$500k
.t-caption
Hints and timestamps
Scored 82 or above
.t-eyebrow
Section labels
Your shortlist
.t-mono
Digests, IDs, log times
06 Sep 09:41 · a7f3c210
Space & shape
Space
A 4px base. Everything in the app is a multiple of it.
Radius
Controls are tighter than containers, so a button inside a card never looks like it is trying to be the card.
--r-1
Tags, ticks
--r-2
Small buttons, inputs
--r-3
Buttons, selects
--r-4
Cards, panels
--r-5
Feature cards
--r-6
Hero surfaces
Elevation
A hairline contact shadow plus a wide ambient one. A single blurry drop reads as a sticker; two layers read as an object.
--shade-1
Resting controls and cards
--shade-2
Documents, selected chips
--shade-3
Hovered cards, popovers
--shade-4
Modals, the hero preview
Motion & layout
Motion
Four durations, three curves. Everything collapses to nothing under prefers-reduced-motion.
Layout
A fixed rail plus a measured column.
The measure is capped independently of the page, so long prose never runs the full 1248px even when the container does.
Ladder · 02
Components
Every one of these is imported from the same module the product imports. What renders below is what ships.
Actions
Intents
One geometry, five intents. Shape comes from the size class, never the intent.
Brand is the one action a screen most wants you to take. Primary is ink — used where brand would collide with a nearby accent. There is never more than one of either in a view.
Sizes
Fields
Text and select
Ladder resolves the job board from the name alone.
Long form
One focus treatment everywhere: a 2px brand outline for keyboard users, a 3.5px wash on fields.
Score
The dial
A 270° gauge, not a ring: the gap at the bottom gives the shape a reading direction.
A number alone doesn't say whether 71 is good, so every score carries its band word. Four bands, one vocabulary, learned once.
Breakdown and progress
Containers & feedback
Open matches
6
Strong fit
2
Scored 82 or above
Applied
3
Companies watched
6
Brand
Caution
Neutral
Bullets
- Shipped and owned production services at this scale
- The posting leans harder on domain depth
- One bullet style, four tones, nothing else
Nothing waiting on you
Empty states name the thing that is absent and offer the one action that would fill it — they never just say “no data”.
The rung
One graphic idea, used as structure
Three ascending bars: the logo, the section rule, the packet meter, the autonomy scale, and the rail that an application's history climbs.
Applied · 6 Sep · agent
Acknowledged · 6 Sep · agent
Screening · 6 Sep · agent