primitive · v0.1.0

status-pill

A small mono lifecycle badge that sits under a record title. Five semantic variants, driven from one JSON state-vocabulary, themed from the active gf.cx design-system palette. Lifted from home.gf.cx/returns.

The five variants

Neutral · in flight Alert · needs attention Resolved · closed-good Service · work done Warning · high-visibility

Note: service shares the resolved green — it's a confirmation, the 🔧 sets it apart from ✓ resolved. The loud orange is the warning variant (high-visibility), not a confirmation colour.

Design-system colours referenced

Each variant maps to a colour active in the portfolio palette (via a CSS custom property with a hex fallback), so pills theme automatically on any surface that defines the tokens.

Accent green

--accent · #2c4a3a

neutral fg · resolved + service bg

Gold

--gold · #b8862a

alert

Signal orange

--signal-orange · #f5871f

warning / danger

Warm paper

--bg · #f7f3ec

surface ground

Warm tint

--bg-warm · #ebe3d5

inset / card-warm

Ink

--ink · #1a1816

body text

Ink-soft

--ink-soft · #5a544d

secondary text

Data-driven pattern

Tag each pill with data-state (+ optional data-detail), keep one JSON vocabulary on the page, and let status-pill.js compose every pill. The variant class is the no-JS fallback. The two pills below are rendered from the vocabulary at the bottom of this page:

Resolved · refund issued Service complete

<!-- one vocabulary per page -->
<script type="application/json" data-status-pill>
{ "refund-issued":    { "label": "Resolved · refund issued", "variant": "resolved" },
  "service-complete": { "label": "Service complete",         "variant": "service" } }
</script>

<!-- pills carry only the key + detail -->
<span class="status-pill" data-state="refund-issued"
      data-detail="$551.19 · 12 Jun 2026"></span>

Docs: README · Vocabulary: states.example.json · Source: github · In use: home.gf.cx/returns