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).
| 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 |
--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.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.font-weight: 700. Using flexbox align-items: center; justify-content: center with consistent line-height: 1 fixes the centering across all variations shown here.::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.