Status indicators

Patterns for surfacing scores, completion, and pipeline state: the ATS mark (an ink stamp with knockout text plus a tier-colored numeral), the score ring (SVG arc with a Lora numeral inside), the section completion list (per-section progress with complete/partial states), and the status badge (mono-caps tinted chip used inline in lists and headers).

ATS mark

Ink-filled rounded chip with cream knockout 'ATS' (via background-clip: text), followed by a mono score numeral colored by tier: strong (70+) forest, fair (40–69) amber, low (0–39) red.

ATS88Strong — 70 and up
ATS55Fair — 40 to 69
ATS24Low — under 40

Score ring

SVG circular progress with pathLength=100 + stroke-dasharray=100 so the dashoffset is the percentage missing. The center label uses a Lora numeral that picks up the tier color from the parent.

72/100
Career profile
Strong
55/100
ATS readiness
Fair
24/100
Outdated
Low

Section completion list

Per-section completion rows with two states. Complete rows use a forest check icon, partial rows use an amber dash with an optional reason line. Bar fill and count color follow row state.

  • Work experience
    6 entries
  • Skills
    4 skills have no proficiency level set
    6 of 10
  • Education
    2 entries
  • Projects
    2 missing dates
    3 of 5
  • Basics
    All filled

Status badges

Production source: src/components/applications/StatusBadge.vue. Rebuilt as DSStatusBadge — 6 tones × 2 sizes, with an optional leading dot. Mono caps, tinted fill, full border. The accent tone uses sienna (the brand accent); info / success / warning / error map to royal / forest / amber / red.

SavedAppliedDraftedRound 2OfferRejected
SavedAppliedDraftedRound 2OfferRejected
Senior Product DesignerApplied·Acme Robotics — 3 days ago

Stat tile

Bordered tile with a large mono numeric and a small mono-caps label. Workhorse for dashboards (Active Postings / Applicants), interview ATS readouts, and any at-a-glance count surface. Becomes a clickable card when `to` is set.

12
Active postings
142
Applicants
USD 245k
Avg offer
3
Interviews this week

Section progress fab

Fixed-position floating action button with a circular progress arc and a popover overlay. Click the FAB at the bottom-right of the viewport to surface a section grid drill-in. Click outside, press Escape, or focus elsewhere to dismiss. The arc animates as `progress` updates.

The FAB lives in the bottom-right of the viewport — scroll the page to see it follow. Click to open; Escape or click-outside to close.