Internal mockup gallery

Pill differentiation options

You picked Filled gradient (V6). Pick a Signals icon and an Authority icon below, then tell me which two and I will ship. Hover any pill: the shine sweeps once, then the pill stays lit while the cursor is on it.

S

Signals icon

Pick one. Tell me the name (e.g. "Pulse").

SignalsActivity
SignalsPulse
SignalsTrending
SignalsBars
SignalsEye
SignalsBolt
SignalsBulb
SignalsSearch
A

Authority icon

Pick one. Tell me the name (e.g. "Crown").

AuthorityCrown
AuthorityHead
AuthorityCastle
AuthorityThrone
AuthorityTrophy
AuthorityBrain
AuthorityLighthouse
AuthorityStar
AuthorityKey
Preview

Decisions stays as the branch icon

Reference: this is the middle pill so you know what sits between Signals and Authority.

Decisions

Other base styles, kept for reference

01

Current

What is on production today. Same emerald for all three.

SignalsDecisionsAuthority
02

Icons only

Same emerald. Differentiation comes from icons alone.

SignalsDecisionsAuthority
03

Brand shades

Three graduated shades of green, no icons.

SignalsDecisionsAuthority
04

Shades plus icons

Three brand shades, each with its own icon. Most differentiated within palette.

SignalsDecisionsAuthority
05

Bold palette

Emerald, cyan, amber. Most contrast, biggest visual difference. Adds amber to the brand.

SignalsDecisionsAuthority
06

Filled gradient

Solid gradient pills with dark text. Most visual weight. Reads like primary buttons.

SignalsDecisionsAuthority
07

Outlined minimal

Transparent fill, colored border and text only. Subtlest treatment.

SignalsDecisionsAuthority
Page is noindexed. Reachable at /mock/pills/. When you have picked, tell me the number.