Paul Roberts
6593bdf689
Extracted real production usage from 8 KDC repos and consolidated the consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical design.md + tokens. Highlights: - brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage) - brand.canvas #F5F4F0 -> #F7F4ED (warm) - neutral ramp rebuilt around ink (purple-tinted, not cold slate) - semantic palette retuned for warm canvas + soft tints - elevation shadows retinted with brand-ink rgb - new accent.gold (product) and accent.mint (marketing) tokens - real themes/light, themes/dark, themes/high-contrast - fleshed out every component + foundation README - docs/consolidation-2026-05.md captures the full audit + drift inventory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tooltips
Brief, hover/focus-triggered hints. Reference: kdcvault/frontend/src/components/ui/tooltip.tsx (base-ui Tooltip).
Anatomy
See anatomy.svg. Trigger · floating panel · optional arrow. Max-width 240px; wraps to 3 lines maximum.
Styling
- Background
brand.ink(#1A1530), texttext.inverse,captiontypography. - Radius
rounded.sm(4px), padding6px 10px. - Shadow
elevation.2. - Arrow 6×6px, same fill as panel.
- Offset 8px from trigger; flip to opposite side at viewport edge.
Timing
- Open delay 400ms (skip if another tooltip is already open within 500ms).
- Close delay 100ms (allow hover-into-tooltip for copy / link interactions).
- Open/close transition:
motion.duration.fastmotion.easing.standard.
Tokens used
colors.brand.ink, colors.text.inverse, typography.caption, rounded.sm, elevation.2.
Accessibility
- Trigger is keyboard-focusable; tooltip opens on focus as well as hover.
- Use
aria-describedbyon the trigger pointing at the tooltip'sid. - Never put interactive content inside a tooltip — use a popover instead.
- Dismiss on
Escand on focus / hover leave.
Do / Don't
- ✅ Keep copy ≤ 80 chars; one sentence, no period.
- ✅ Use to surface a non-essential hint (full label, keyboard shortcut, brief explanation).
- ❌ Don't put a tooltip on a tappable mobile target — touch users never see it.
- ❌ Don't put interactive elements (links, buttons) inside a tooltip — escalate to a
popover.