Brand & design system

GovHealthJobs publishes records, not listicles — dated figures, licensing tables with a verification stamp, a source list that names what we exclude. The visual language is built to make that feel true: a printed civic document rather than a SaaS dashboard. This page renders from the live stylesheet, so it can't drift from production.

01 — Color

Core palette

Click any swatch to copy its hex. Defined once in public.css and mirrored as Tailwind tokens in app.css.

Semantic color

Status color carries meaning, not decoration. Green means verified; red means excluded or never verified. Never repurpose them for "new" or "important" — the trust argument depends on that staying consistent.

Deliberately absent: blue, purple, teal. Every pairing ships at WCAG 2.1 AA — which is why buttons are charcoal text on pumpkin, never white.

02 — Typography

Two families, one rule

Plus Jakarta Sans sets everything. IBM Plex Mono is reserved for provenance — dates, sources, record numbers, verification stamps. If it's a claim about where a fact came from or when it was checked, it's mono.

Type scale

Live specimens

Display · 800 · uppercase

Verified jobs.

Body · 400–600 · 16px / 1.55

Most boards stop at the listing. We attach the salary record, the licensing rule, and the hiring mechanic that explains it — each one dated, sourced, and rechecked.

Mono · provenance only

SOURCE: USAJOBS.GOV · RETRIEVED 29 AUG 2026 · TABLE 04-B

03 — Components

Vocabulary

Hover everything here — motion confirms an action is possible, and every bit of it collapses under reduced-motion.

Buttons

Pressed 0 times — lift on hover, press on active.

Pills & status

NeutralFederalGS-9Verified

Live — source approved and syncingPending — awaiting approvalIn progress — under reviewExcluded — terms of use

Data table

Row hover

State	Base salary	Source	Verified
Arizona	$68,900	County payroll portal	✓ Verified
Georgia	$61,250	State comptroller	Unverified

Every row carries its source and verification date.Table 00-A

Empty state

Not an edge case here — the product ships before ingestion lands, so every list must read well with zero rows.

04 — Motion & interaction

Rules

Timing. 0.16–0.24s, easing cubic-bezier(0.2, 0.8, 0.2, 1).
Shadows are hard offsets only — 4px 4px 0 growing to 6px 6px 0 on hover. No blur anywhere.
Every clickable element shows a pointer cursor. Enforced globally; anything genuinely disabled shows not-allowed instead, so an affordance is never faked.
Focus is always visible — 3px pumpkin outline, 2px offset. Never removed.
Reduced motion is honoured wholesale. One global block collapses every animation to 0.01ms; scroll reveals resolve immediately.

Full written rationale, contrast ratios and component inventory live in docs/brand-guidelines.md.