Badges communicate membership tiers, system capabilities, appointment state, and record status. Norbielink has two families: pill badges at 9999px, and status chips at 6px whose chip is always neutral and whose 6px dot carries the only colour. Everything on this page is transcribed from the live app.
Two families
Norbielink has two badge families and they are not interchangeable. Pill badges (9999px) mark an attribute of a thing — a tier, a flag, an appointment. Status chips (6px) report the state of a record in a table, and they are always neutral: only the dot carries colour.
| Pill badge | Status chip | |
|---|---|---|
| Radius | 9999px | 6px |
| Weight | 600 | 500 |
| Padding | 3px 10px | 3px 8px |
| Colour lives in | the fill and the text | the 6px dot only |
| Used for | PRO, NEW, AI, Appointed / Unappointed, filters | the Status column of Quotes, Policies, Endorsements |
Membership & system badges
Indicate user tier, new capability, and system-level features. Appear inline next to user names, nav items, and marketplace tiles.
Tonal pill badges
Two tonal states, seen on the Agencies list. Brand carries a 5% gradient wash with gradient text; teal is a flat 10% tint. There is no success / warning / error trio — Norbielink does not have one.
Status chips
Every status renders the same neutral chip. Only the 6px dot changes, and there are exactly three dot colours. Adding a status means picking one of the three — it never means adding a colour.
Status pill (tonal)
The second status component. Where the chip above keeps the surface neutral and colours only the dot, this one tints the whole pill. Both ship in the product — the tonal pill on the Agencies and Clients lists, the neutral chip in the Quotes table. Pick by surface, not by taste.
| Status | Class | Text | Fill |
|---|---|---|---|
| Active, Approved | .badge-sp-active | #73C9B7 | rgba(115,201,183,.10) |
| Upcoming Renewal(s) | .badge-sp-renewal | #74C3B7 | rgba(116,195,183,.10) |
| Pending, Action Req. | .badge-sp-pending | #F59E0B | rgba(245,158,11,.08) |
| Declined, Cancelled | .badge-sp-declined | #EF4444 | rgba(239,68,68,.08) |
| Inactive, Expired | .badge-sp-neutral | #9CA3AF | #F3F4F6 |
| Prospect | .badge-sp-prospect | brand gradient | 5% brand gradient wash |
Metrics: radius 9999px · padding 3px 12px · 11px/600 · line-height 16px. Prospect uses padding 3px 10px to match the other gradient pills.
Status → dot mapping
The statuses currently live in the Quotes table, and the dot each one uses.
| Status | Dot class | Dot colour | Meaning |
|---|---|---|---|
| Issued | .badge-dot-done | Teal #73C9B7 | Policy is issued. |
| Approved | .badge-dot-done | Teal #73C9B7 | Carrier approved the submission. |
| Under Review | .badge-dot-active | Magenta #A614C3 | With the carrier. |
| Requested Info | .badge-dot-active | Magenta #A614C3 | Carrier asked the agent for more. |
| Renewal Pending | .badge-dot-active | Magenta #A614C3 | Renewal in flight. |
| Incomplete | .badge-dot-idle | Gray #9CA3AF | Agent has not finished the submission. |
Indicator icons
An 18px round mark that trails a cell value — in the Agencies table it follows the Last Login date. It is not a badge: there is no label and no padding, and the meaning is carried entirely by the title tooltip, so it is only ever used where the row already gives context.
| Property | Value |
|---|---|
| Disc | 18×18px · 9999px · no padding, icon centred |
| Icon | 12×12px |
| Gap from value | 6px |
| New — disc | rgba(166,20,195,.10) · rgba(168,85,247,.32) in dark |
| New — icon | Gradient #5C2ED4 → #A614C3 · #A855F7 → #D946EF in dark |
| Dormant — disc | rgba(100,116,139,.12) · rgba(148,163,184,.30) in dark |
| Dormant — icon | #64748B · #94A3B8 in dark |
| Accessibility | title on the disc, aria-hidden on the svg |
Filter pills
The marketplace filter row. Active is the solid brand gradient; inactive is a 1px hairline — a solid border, not a dashed one.
In context — Quotes table
Status chips sit in the Status column, left-aligned, one per row.
Specs
.badge| Property | Value |
|---|---|
| Shape | 9999px |
| Padding | 3px 10px (PRO 1px 6px · NEW 3px 8px · filters 4px 10px) |
| Font size | 11px (PRO 10px · NEW 9px) |
| Font weight | 600 (NEW 700) |
| Letter spacing | normal (NEW 0.9px) |
| Brand fill | linear-gradient(88.54deg, rgba(92,46,212,.05), rgba(166,20,195,.05)) · 20% in dark |
| Brand text | Gradient #5C2ED4 → #A614C3, clipped to text · #A855F7 → #D946EF in dark |
| Teal fill | rgba(115,201,183,.10) · .22 in dark · text #73C9B7 in both |
| PRO border | 1px solid #74C3B7 · gradient border on #1E2240 in dark, text #C084FC |
| NEW fill | linear-gradient(90deg, #5C2ED4 0%, #A614C3 65%), white text |
.badge-status| Property | Value |
|---|---|
| Shape | 6px — not a pill |
| Padding | 3px 8px |
| Font size | 11px |
| Font weight | 500 |
| Gap | 6px, between dot and label |
| Chip fill | #F9FAFB · text #1F2937 · border 1px #F3F4F6 |
| Chip fill (dark) | rgba(255,255,255,.05) · text #F9FAFB · border 1px rgba(255,255,255,.04) |
| Dot | 6×6px, 9999px · same colour in both themes |
| Give a status its own fill colour. The chip is neutral; the dot is the signal. |
| Add a fourth dot colour — map the status onto done / active / idle. |
| Use red, amber or green. None of them exist in Norbielink. |
| Make a status chip a pill, or a pill badge 6px. |
Use .badge-new's solid gradient for anything but NEW and the active filter. |