Badge Delete Button — Design Exploration

# Badge Delete Button — Iteration on Var 10

White circle with float shadow. 6 sub-variations (10a–10f) iterating on centering, position nudge, circle size, × weight, and shadow intensity. Vars 1–9 from round 1 kept for context. Each card shows full-size (top) and margin-size (bottom).

## Current (production)

REF
Current production style
bg: `--bn-colour-text` (#1a1a1a) — near black
size: 0.75rem (12px) • × weight: 700 • no shadow
usability
emotion
frustration
navigation
confusion

## Variations

1
Muted grey, same size
bg: `--bn-colour-muted` (#6b7280)
size: 0.75rem (12px) • × weight: 700 • no shadow
usability
emotion
frustration
navigation
confusion
2
Muted grey + subtle shadow recommended
bg: `--bn-colour-muted` (#6b7280)
size: 0.75rem (12px) • × weight: 700
shadow: `0 1px 3px --bn-colour-shadow`
usability
emotion
frustration
navigation
confusion
3
Muted grey, larger circle (14px)
bg: `--bn-colour-muted` (#6b7280)
size: 0.875rem (14px) • × size: 0.65rem • weight: 700
shadow: `0 1px 3px --bn-colour-shadow`
usability
emotion
frustration
navigation
confusion
4
Muted grey, larger, heavier shadow
bg: `--bn-colour-muted` (#6b7280)
size: 0.875rem (14px) • × size: 0.65rem • weight: 700
shadow: `0 1px 4px rgba(0,0,0,0.18)` + `0 0 1px rgba(0,0,0,0.08)`
usability
emotion
frustration
navigation
confusion
5
Light grey circle, dark ×
bg: `--bn-colour-border-hover` (#d1d5db)
× colour: `--bn-colour-muted` (#6b7280)
size: 0.75rem (12px) • weight: 700
shadow: `0 1px 3px --bn-colour-shadow`
usability
emotion
frustration
navigation
confusion
6
Light grey, larger, heavy shadow
bg: `--bn-colour-border-hover` (#d1d5db)
× colour: `--bn-colour-muted` (#6b7280)
size: 0.875rem (14px) • × size: 0.6rem • weight: 700
shadow: `0 1px 4px rgba(0,0,0,0.18)`
usability
emotion
frustration
navigation
confusion
7
Muted grey, thin × (weight 500)
bg: `--bn-colour-muted` (#6b7280)
size: 0.75rem (12px) • × size: 0.65rem • weight: 500
shadow: `0 1px 3px --bn-colour-shadow`
usability
emotion
frustration
navigation
confusion
8
Muted grey, larger, thin ×, gentle shadow
bg: `--bn-colour-muted` (#6b7280)
size: 0.875rem (14px) • × size: 0.6rem • weight: 500
shadow: `0 1px 2px rgba(0,0,0,0.12)`
usability
emotion
frustration
navigation
confusion
9
White circle with grey border
bg: `--bn-colour-bg` (#ffffff)
× colour: `--bn-colour-muted` (#6b7280)
border: `1px solid --bn-colour-border`
size: 0.875rem (14px) • weight: 700
shadow: `0 1px 3px --bn-colour-shadow`
usability
emotion
frustration
navigation
confusion
10a
Baseline (original var 10)
White circle, grey ×, 14px, bold 700
Position: top -0.3rem, right -0.3rem
No centering fix • no nudge
usability
emotion
frustration
navigation
confusion
10b
Nudged 1px up+right, × centred
Position: `calc(-0.3rem - 1px)` both axes
`padding-top: 0.5px` to drop × into optical centre
Same 14px circle, bold 700
usability
emotion
frustration
navigation
confusion
10c
+ half-pixel larger circle (14.5px) recommended
Circle: `calc(0.875rem + 0.5px)` ≈ 14.5px
Same nudge + centering fix as 10b
Sub-pixel rendering — yes, browsers handle 0.5px
usability
emotion
frustration
navigation
confusion
10c-fix
× centred via transform(0.1px, 0.5px) recommended
`line-height: 0` to collapse metric offset
`::after { transform: translate(0.1px, 0.5px) }`
Button text node hidden; × drawn by pseudo-element
usability
emotion
frustration
navigation
confusion
10c-fix2
× via text node, flexbox only (no transform)
Standard `align-items/justify-content: center`
`line-height: 1`, `padding: 0`
Control: does flexbox alone centre it?
usability
emotion
frustration
navigation
confusion
10c-fix3
× centred via transform(0, 1px) — stronger nudge
Same as 10c-fix but `translate(0, 1px)`
In case 0.5px isn't enough on your display
usability
emotion
frustration
navigation
confusion
10d
+ slightly larger × (0.625rem)
Same as 10c but × at `0.625rem` (10px) vs 0.6rem (9.6px)
Fills the circle a bit more
usability
emotion
frustration
navigation
confusion
10e
+ medium × weight (600)
Same as 10c but `font-weight: 600` vs 700
Slightly thinner stroke, more refined
usability
emotion
frustration
navigation
confusion
10f
+ heavier shadow (more float)
Same as 10c but shadow: `0 1px 5px rgba(0,0,0,0.2)`
More pronounced floating effect
usability
emotion
frustration
navigation
confusion

## Design system tokens for consistency

Token | Value (light) | Role | Use here?
--- | --- | --- | ---
`--bn-colour-text` | #1a1a1a | Primary text, current delete circle bg | Current — too heavy / near-black
`--bn-colour-muted` | #6b7280 | Secondary text, icons, timestamps, add-tag borders | Best fit for circle bg — already used for other de-emphasised interactive elements (search clear, modal close text)
`--bn-colour-border-hover` | #d1d5db | Interactive border hover state, toolbar hover border | Option for lighter circle bg (vars 5, 6)
`--bn-colour-icon-idle` | #c9ccd1 | Toolbar dropdown arrows at rest | Too light for a filled circle — low contrast
`--bn-colour-shadow` | rgba(0,0,0,0.1) | Standard shadow colour throughout the design system | Use as shadow colour — consistent with existing elevations
`--bn-colour-bg` | #ffffff | Page background, white surfaces | Option for white-circle approach (vars 9, 10)
`--bn-colour-border` | #e5e7eb | Borders, dividers, subtle lines | Option for circle border ring (var 9)
`--bn-transition-fast` | 0.15s ease | Hover, opacity transitions | Keep for opacity fade-in — already used
`--bn-focus-shadow` | 0 3px 12px rgba(0,0,0,0.12) | Keyboard-nav focus state | Reference for shadow intensity — our delete shadow should be lighter than this

### Observations

- Circle background: `--bn-colour-muted` (#6b7280) is the natural choice — it's already the "secondary/quiet interactive" colour in the system (used by add-tag ghost badges, modal close, search clear text). Much softer than the current near-black `--bn-colour-text`.
- Shadow: A single-layer `0 1px 3px var(--bn-colour-shadow)` creates a subtle "floating chip" effect without drawing attention. The two-layer shadows (vars 4, 10, 11) create more depth but may be too prominent for something that only appears on hover.
- Circle size: 0.75rem (12px) is tight but works at report scale. 0.875rem (14px) gives more breathing room for the × and looks less cramped, especially at the smaller margin-badge size. 1rem (16px, var 11) dominates the badge — probably too big.
- × weight: Bold (700) reads clearly at 12px. Medium (500, vars 7-8) is more elegant but thinner strokes may look "spidery" at small sizes. Ultra-thin (400, var 12) depends heavily on font rendering and may vanish on low-DPI screens.
- White circle: Vars 9–10 use a white bg with grey ×. These float visually but look less "button-like" — more like an annotation marker. They also need dark-mode consideration (would need to flip).
- Centering: The current wonky alignment comes from font metrics of the × character combined with `font-weight: 700`. Using flexbox `align-items: center; justify-content: center` with consistent `line-height: 1` fixes the centering across all variations shown here.
- AI badge ×: The AI badge uses a `::after` pseudo-element instead of a `<button>`. The same circle/shadow tokens should apply to both — define them as custom properties or share via a common class.