Two tab patterns ship. The underline bar switches the main view of a record; the pill group switches a sub-view inside a panel. Neither uses a border on the item itself — the active underline is a separate 2px gradient element.
Underline bar
The record tab bar. The container carries a 1px hairline and the active
tab paints a 2px brand gradient over it.
Pill group
Used for sub-views. The selected pill takes a neutral #F3F4F6 fill —
no brand colour, no underline.
Specs
| Property | Underline bar | Pill group |
|---|---|---|
| Container | flex · gap 4px · border-bottom 1px #E5E7EB · margin-bottom 20px | flex · gap 2px |
| Item padding | 12px 16px | 6px 12px |
| Type | 13px / 400 · letter-spacing 0.01em | 12px / 500 |
| Icon gap | 6px | 6px |
| Radius | 0 | 6px |
| Inactive | #6B7280 | #6B7280 on transparent |
| Active | #A614C3 · #FFFFFF in dark | #1F2937 on #F3F4F6 · rgba(255,255,255,.06) in dark |
| Active marker | 2px linear-gradient(90deg,#5C2ED4 0%,#A614C3 65%), absolutely positioned at bottom 0 | — fill only |
| Count badge | 16×16px round · rgba(166,20,195,.12) | — |
The active tab does not set border-bottom on itself. The underline is a child element so it can carry a gradient, which a border cannot. |
| No tab is bold. The active one changes colour, not weight. |