ADHD Tab Manager · Design v3 ← Main site

“Calm Focus” — the One-Calm-Canvas redesign

A working, clickable prototype of the v3 interface next to its design tokens. Toggle below to compare today's UI with the redesign. Everything on the left is interactive: switch panels, expand a session sheet, open ⌘K.

ADHD Tab Manager — side panel
Now 7 tabs
🔥 3-day streak🍅 4 pomodoros🛡️ 12 blocked
Research Sprint — actions
💰 Pricing Researchsession
📄 Stripe Pricing — Paymentshistory
🗂️ example.com/pricingtab
⭐ Pricing page teardownbookmark
↑↓ navigate · ↵ open · esc close

What changed and why

  • Icon rail replaces 5 flat tabs — navigation stops being a decision, becomes a reflex. Labels on hover keep the narrow surface clean.
  • “Now” replaces the Home junkyard — 3 stat tiles + exactly 3 actions. Everything maintenance-grade moved under Shield → Maintenance.
  • SessionCard previews contents — favicon strip + native-group color dots make saved work visible without expanding anything (retrieval trust).
  • One ActionSheet pattern — every overflow action lives in the same bottom-sheet grammar. No more three different overlay styles.
  • Uniform Pro-lock — locked controls stay visible, dimmed, with PRO chip. Tap = contextual upgrade. Never hidden menus.
  • AA contrast by construction — ink-3 raised from 2.8:1 to ≥4.6:1 across light/dark.

Color tokens

--brand#2563eb
--brand-deep#1e40af
--focus#10b981
--warn#d97706
--danger#dc2626
--ink#101820
--ink-2#3d4c5f
--ink-3#66788d AA
--bg#f6f8fb

Type scale

26/displayOrganize your tabs
20/sectionSaved sessions
16/emphasisRestore one group at a time
14/bodyBody text stays quiet and readable.
12/metaUPDATED 2H AGO · 12 TABS
  • Motion: 160ms ease-out standard, 240ms spring sheets, stagger ≤6 items, reduced-motion honored.
  • Radii 8/12/16/20 · spacing on a 4-pt grid · tabular numerals in timers/counters.
  • Full keyboard traversal; Esc unwinds one layer; toast is aria-live=polite.
Implementation note: tokens map onto existing CSS custom properties, so migration ships incrementally — SessionCard v3 + ActionSheet land first, NavRail second, Now-view third. Full spec: docs/DESIGN-SYSTEM-v3.md.