Index Badge · a plain numbered marker, not a stamp
Marker
01
One recipe, any accent
A circle, a color-mix() tint for the fill, the accent's ink token for the number. Swapping the accent variable is the entire API — there is no second class per color.
36px, inline123
48px, standalone123
Index badge
color-mix(), not rgba()
Fill is color-mix(in srgb, var(--accent) 15%, transparent). Number color is the accent's -ink token. No color is ever hardcoded per instance.
36px reads inline with a label. 48px+ carries weight on its own — use it when the badge is the number, not decorating one.
02
In context: numbering a sequence
The job it was pulled from — a build sequence where each step gets a number and a color. Not decoration: remove the badge and the reader loses the count.
1
Connect the source
Point the pipeline at the repo. No transform yet.
2
Shape the record
Apply the YAML mapping. One entry, no code.
3
Publish
Write to the store. The step the badge was worth adding for.
Numbered sequence
Count something real
Three steps, three accents, one badge class. The color carries as much orientation as the number does.
Not a stamp: a badge marks position or category. A stamp certifies provenance. Reach for Stamps when the message is "this was verified," not "this is step three."
Created for you, with ❤️ by Robert Evans· The AI Design Architect