Skip to main content

designjobs.cv design system

Crumb

White gallery ground, warm ink, one amber accent reserved for the bread mark and contract roles. Dark mode is warm char — never blue. Everything below is the live vocabulary the site is built from.

Colors

One palette, two themes. Light is a white gallery with warm ink; dark is warm char — the neutral ramp is shared and never drifts cool.

Light

default

Core

  • paper Page ground #FFFFFF oklch(100% 0 0)
  • ink Primary text & fills #161512 oklch(20% 0.006 92)
  • ink-soft Body text #3C3A34 oklch(35% 0.011 92)
  • muted Secondary text #706F6A oklch(54% 0.008 97)
  • line Hairlines & borders #E8E8E6 oklch(93% 0 0)
  • tile-cream Tile ground #F1F1EF oklch(96% 0 0)

Grade colors

  • grade-a A+ / A · h158 #027D4D oklch(52% 0.121 158)
  • grade-b B+ / B · h240 #0070A6 oklch(52% 0.119 240)
  • grade-c C+ / C · h75 #8D5E02 oklch(52% 0.109 75)
  • grade-d D · h50 #A04F18 oklch(52% 0.125 50)
  • grade-f F · h25 #A54743 oklch(52% 0.125 25)

Dark

.dark

Core

  • surface-page Page ground #11110F oklch(18% 0 0)
  • surface-card Cards & dialogs #1B1B19 oklch(22% 0 0)
  • surface-card-hover Card hover #222120 oklch(25% 0 0)
  • surface-footer Footer ground #0C0C0B oklch(15% 0 0)
  • border-dark Hairlines & borders #2C2C2A oklch(29% 0 0)
  • paper-dark Inverted fills (buttons, meters) #EDEBE4 oklch(94% 0.010 94)

Grade colors

  • grade-a A+ / A · h158 #72CE9B oklch(78% 0.116 158)
  • grade-b B+ / B · h240 #6DC1F9 oklch(78% 0.115 240)
  • grade-c C+ / C · h75 #E2AC5E oklch(78% 0.115 75)
  • grade-d D · h50 #F3A173 oklch(78% 0.115 50)
  • grade-f F · h25 #F89A92 oklch(78% 0.114 25)

Warm neutral ramp — `slate-*` and `gray-*` are remapped to these; nothing in the UI is a cool gray

50
100
200
300
400
500
600
700
800
900

Crust amber — the single accent: the bread mark and contract roles. Never decoration.

Typography

Bricolage Grotesque for display, Be Vietnam Pro for everything else, system mono for labels and data. Pairing on a contrast axis — one voice for posters, one for product.

font-display

Bricolage Grotesque · 600–700

Design jobs with real links, by the community

font-sans

Be Vietnam Pro · 400–600 · 15px body

Body copy runs at 15px with relaxed leading, capped at a comfortable measure. Semibold carries emphasis — never color, never italics.

font-mono

ui-monospace · 10–11px · tracked caps

Section labels · Meta rows · 90/100 · 3 reports

Buttons

Every action is a full-round pill. Primary is inverted ink; secondary is a hairline. One primary per view.

Form controls

Survey-scale controls: equal-cell answer rows, number tiles, ordered checklists. Selected state is always full ink inversion.

Text input

Answer row — equal cells, fills the column

Rating scale — five equal tiles

PoorExcellent

Ordered checklist — numbers appear in tap order

Chips & badges

Informational chips are hairline pills in mono. Amber is semantic: contract roles and warnings only.

design systems healthtech Contract Ghosting reported 3d

Job tiles

The board is a masonry wall of typographic posters. Tile ground is never decorative and never random — it encodes two things, in this order of priority.

Stedi Product Designer Mid · Remote

Light — mid & below

Entry, Junior, Mid

Render Senior Product Designer Senior · Remote

Cream — senior

Senior, Mid-Senior

Artisan Staff Product Designer Staff · On-site

Stone — staff & above

Staff, Lead, Principal, Director

Zello Product Designer, Design Systems Contract · Remote

Inverted — contract

Any contract or freelance role, at any level

Rule 1 — contract owns true dark

Contract and freelance roles always take the inverted tile, whatever their level. Contract work is the board's reason to exist, so it gets the highest-contrast treatment on the wall and nothing else is allowed to compete. This is the same discipline as crust amber: one signal, one meaning, never decoration.

Rule 2 — everything else ramps by seniority

Heavier ground, more senior role. It's the fastest disqualifier when scanning, and it splits the board into three balanced groups. Vertical was the obvious alternative and is a trap — Healthcare is ~40% of listings while Climate and Education have one or two each, so most colors would appear exactly once.

Not encoded in color: vertical, salary, recency, location. Those live in the text. Title size is uniform for the same reason — the masonry gets its variety from tile grounds and natural title length, not from invented hierarchy. Source of truth: treatmentForLevel() in src/components/JobCard.astro.

Grade tiles

Candidate-experience grades. Tinted tile + letter; the only place semantic color fills a surface. Derived in OKLCH — light text at L 0.52 / C 0.125, dark at L 0.78 / C 0.115 — so every tier carries equal weight and hue alone signals the grade. Detail lives in the nutrition-facts breakdown dialog.

A B C D F grade appears at 3+ reports · ghosting caps the grade

Progress

Segmented meters — one segment per step, 2px bars, warm fills. Segments are buttons: tooltip on hover, completed ones jump back.

3 of 7

score meter — 5px, used in the grade breakdown

Shape & radius

Radii step with component scale; actions are always full-round. Dialogs share one shell: 1.25rem radius, hairline border, blurred ink backdrop, bottom-sheet on mobile.

Token Value Used for
rounded-lg 0.5rem Tooltips, small chips
rounded-xl 0.75rem Inputs, choice cells, rating tiles
rounded-2xl 1rem Cards, callouts
rounded-[1.25rem] 1.25rem Dialogs (process-modal shell)
rounded-full 9999px Buttons, pills, grade tiles, meters

Motion

Fast and purposeful: entrances ease-out under 250ms, exits ~30% faster, hovers at 120–150ms. Everything respects reduced-motion.

Curve Value Used for
ease-out-quint cubic-bezier(0.23, 1, 0.32, 1) Entrances (survey steps, nav slide-in)
ease-out-quart cubic-bezier(0.165, 0.84, 0.44, 1) Exits — ~30% faster than entrances
ease ease Hover & color transitions, 120–150ms