Skip to content

Design system

Shortlist design system

Everything on this page is the live component from the app, styled by the same tokens, so the documentation can't drift from the product. Switch your system to dark mode, or change it in the app's Settings, and every value below updates.

  • Evidence first

    Every AI claim carries its source. Lime is reserved for evidence, so it always means “this came from your document”.

  • Honest states

    No fake progress, no made-up scores. Loading, partial and not-found are designed states, not afterthoughts.

  • Calm, then decisive

    A cool neutral canvas and quiet type, with one cobalt accent for the action that matters.

Colour

CSS variables as RGB triples, so Tailwind can apply opacity (bg-accent/20). Dark mode redefines the same names.

  • --paper

    Page background

    …

  • --surface

    Cards, panels

    …

  • --sunk

    Wells, tracks

    …

  • --line

    Borders

    …

  • --ink

    Primary text

    …

  • --ink-2

    Secondary text

    …

  • --ink-3

    Tertiary text

    …

  • --accent

    Actions, focus

    …

  • --accent-soft

    Selected, info

    …

  • --mark

    Evidence highlight

    …

  • --mark-strong

    Evidence rule

    …

  • --ok

    Met, verified

    …

  • --ok-soft

    Met background

    …

  • --warn

    Partly, approximate

    …

  • --warn-soft

    Partly background

    …

  • --bad

    Errors, unverified

    …

  • --bad-soft

    Error background

    …

Typography

Bricolage Grotesque for headings, Geist for the interface and body, Geist Mono for data and labels.

Display 48 / bold

Page title 34 / bold

Panel title 22 / bold

Item title 15 / semibold

Body 15 / 1.6. Used for AI output and resume text, where people read carefully and compare against the source.

Secondary 14 for explanations.

Eyebrow 11 / semibold / tracked

Mono 12 · gemini-3.5-flash-lite · 1,082 tokens · 1.1 s

Shape and depth

Radii: 6 (chips inside controls), 10 (tiles, buttons), 14 (cards). Shadows are soft and used sparingly.

6 · control
10 · tile
14 · card
pill · chip
shadow-lift

Buttons

One primary action per view. Focus shows a 2px cobalt ring; pressed buttons scale to 98%.

Inputs

44px tall, 10px radius; focus adds a cobalt border and a soft ring. Labels always exist, visibly or for screen readers.

Status and labels

Status is never colour alone: each pill has a symbol and a word.

MetPartlyNot shownRequiredNice to haveJudgementGeneral advice2 to fixReads well

Evidence

Citation chips show whether a quote was found in the source. Resume quotes open the page with the line highlighted.

job ad
“Cut checkout API p95 latency from 620 ms to 380 ms”

All 11 claims are backed by quotes found in your resume.

10 of 11 claims are backed by quotes found in your resume; 1 isn't, so check it before relying on it.

Cut checkout latency from 620 ms to 380 ms.

JudgementOperates at a senior level, leading migrations.

General adviceMentoring often matters for senior roles.

Led a team of 12 engineers.

We couldn't find this in your resume. Check it before relying on it.

Data

The coverage ring's arc is the coverage figure itself, so the ring and the number always agree.

States

Loading shows what is happening, errors say what to do next, and empty states point to the first action.

Reading your resume…

This is an AI step.

Nothing saved yet

Save a gap or an answer to keep it here.