Pill dot swap

Green orb + text on the glass pill. This is the look we're replacing.

Early access 2026 Updates Earn $5

The asset is named check-thick_green but draws as a dot. Replace the PNG on the CDN (same URL, same 54×54 canvas) with an actual ✓ and every pill fixes itself — no code change, no app deploy. Only step after upload: purge the CDN cache for that path.

Drop the leading slot entirely; the glass pill carries the label on its own. Cleanest read, nothing to design. Change: remove the <img class="__leading"> line from Pill.vue (or stop passing leading at the call sites).

We're an emoji product — lead with one. Rendered as JoyPixels PNG assets, not the emoji webfont, so they can never fall back to native glyphs. Change: Pill.vue accepts an emoji leading and renders it through the app's existing emoji asset pipeline; each call site picks its character.

Early access 2026 Updates Earn $5

The component's default style — light green fill, dark green text — already ships (it's what the PRO pill uses). No dot, no glass, pops on the dark modal. Change: call sites drop background="glass" and leading. Zero new CSS.

Glass pill, no icon, uppercase with letterspacing in green — reads as an editorial eyebrow label, the treatment our marketing pages already use. Change: new variant in Pill.vue (uppercase + tracking + green-500 text), no leading image.

The EmojiCopy bubble as the leading mark — the badge literally wears the brand, and the green lives in a shape that's unmistakably ours instead of an anonymous orb. Small-mark green usage (never a fill). Change: point the leading src at the logo-mark asset.

Early access 2026 Updates Earn $5

No leading at all — the glass itself picks up a faint green cast, so the pill still reads "EmojiCopy green" without any icon to overthink. Quietest way to keep the color. Change: one new background variant in Pill.vue's scoped CSS.

A thin editorial glyph that matches what the pill is about — confetti for early access, calendar for updates, smiley for feedback. All three already ship in the app's icon set (IconIndex.vue: confetti, calendar-blank, smiley). Change: Pill.vue renders <Icon> in the leading slot; call sites pass a name.

Solid dark-green fill with bright green text — a richer, more deliberate badge that still sits quietly on the dark modal. The inverse of D's light chip. Change: one new background variant in Pill.vue's scoped CSS.

Kill the container entirely — letterspaced caps with a short rule on each side, like an editorial section label. The least "badge-like" of all the options; nothing left to read as a status light. Change: the call sites swap <Pill> for a one-element text row (not a Pill variant).