Option C — Hollow pill with dashed border (Recommended)
Flag spec chips are rendered as hollow pills: transparent background,
dashed coloured border, muted text at 75% opacity. The hash-derived colour is
preserved as the border/text colour, so visual identity is retained.
The dashed stroke is a shape-based secondary signal — distinct from colour —
communicating "outline only / no contents". Hovering restores full opacity.
Normal spec chips remain solid pastels. Both types live in the same row.
Project library panel
my-ml-service
file:///home/user/projects/my-ml-service
🌐 Global
🧩 python_library
🧩 git_repo
🧩 pixi
🧩 docker
🤖 ai_enabled
🌳 monorepo_root
📓 has_notebooks
data-pipeline
file:///home/user/projects/data-pipeline
🧩 python_library
🧩 git_repo
📓 has_notebooks
infra-config
file:///home/user/projects/infra-config
🌐 Global
🧩 git_repo
🧩 docker
🌳 monorepo_root
Normal chip — active
🧩 python_library
Flag chip — active
🤖 ai_enabled
Flag chip — hover
📓 has_notebooks
Spec chip — solid fill (has contents / artifacts)
Flag chip — hollow dashed (match-only, no data)
Trade-offs
✓ Solid vs hollow: well-established visual grammar for "has data" vs "tag only"
✓ Dashed border = non-colour secondary signal (accessible)
✓ Colour identity preserved (same hash, moved to border + text)
✓ No layout changes — same single row, same chip factory
✓ Full label text remains readable
✓ Hover restores full opacity — chip is still clearly interactive
✗ Dashed borders at 11px font / small pill size can look slightly rough
→ dotted or thin solid border is a safe fallback