route-commerce/docs/superpowers/specs/2026-06-17-admin-redesign.md

Admin Redesign — 2026-06-17

Branch: design/ui-revamp-2026-06 Type: Hot take. Tomorrow deadline. Approved yolo. Goal: polish the public side, reimagine the admin, fix the colors, make things findable.

---

1. Context

• Public side (/, /tuxedo, /indian-river-direct, pricing, blog, contact) — "good, just needs polishing." The "Atelier des Récoltes" / "Field Almanac" editorial language is in place (cream + forest + gold + Fraunces + Manrope + Fragment Mono). Don't break it.
• Admin (/admin/*) — the surface that needs the most work.
  • 15+ admin sections are split across 4 dashboard tabs (Operations / Fulfillment / Management / Tools). The user can't find things.
  • Color palette mixes forest + citrus + sage + gold + warmred + surface greys. The colors fight each other and feel muddy.
  • Sidebar has 6 flat items. "Settings" sub-pages are reachable only by knowing they exist. Discoverability is bad.
  • The "Harvest Almanac" design system (.ha-* classes) exists but is underused. Most admin pages fall back to defaults.

2. Aesthetic direction (one paragraph, committed)

Editorial operations. The admin should feel like the back office of an almanac press, not a generic SaaS dashboard. Warm cream canvas, deep botanical green for primary action, amber gold for the one thing you should do next, ink-black for text, a single soft beige for borders. The same typeface family as the public side (Fraunces / Manrope / Fragment Mono). Generous use of numerals in Fragment Mono so prices and counts read like a ledger. One primary, one accent, four neutrals. That's it. No purple, no teal, no citrus orange as a primary.

Commit to this and stop adding new colors.

3. Color system (final, do not deviate)

Token	Hex	Use
--admin-bg	#FAF7F0	Page background (atelier cream)
--admin-surface	#FFFFFF	Cards, modals, sheets
--admin-surface-sunken	#F4F1E8	Inset wells, code blocks
--admin-ink	#1A1814	Primary text
--admin-ink-muted	#73706B	Secondary text
--admin-ink-faint	#A8A29E	Tertiary / placeholders
--admin-line	#E8E4D7	Borders, dividers
--admin-line-strong	#D4CFBE	Emphasized borders
--admin-primary	#1F4D2A	Primary action (deep botanical)
--admin-primary-hover	#163C20	Primary hover
--admin-primary-soft	#E8F0E5	Primary at 8% (selected rows, chips)
--admin-accent	#B8761E	Amber — "the one thing to do"
--admin-accent-soft	#F7EBD5	Amber at 12%
--admin-success	#1F4D2A	(same as primary; semantic)
--admin-warning	#B8761E	(same as accent; semantic)
--admin-danger	#A8321C	Errors / destructive
--admin-danger-soft	#F7E3DE	Danger at 12%

Drop: --admin-warning: #aba278 (looks like dirt), the old citrus orange in the active state, the blue/purple stat icons. Replace with semantic use of the new palette.

4. IA decision

Sidebar groups, top to bottom, with section dividers:

Group	Items
Workspace	Dashboard · Command Center (platform_admin only)
Operations	Orders · Stops & Routes · Products · Driver Pickup · Shipping
Communications	Harvest Reach (campaigns, templates, contacts, segments, logs)
Growth	Wholesale · Import Center · AI Intelligence
Tracking	Time Tracking · Water Log · Route Trace
Insights	Reports · Tax Dashboard
Settings	General · Brand · Billing · Users & Permissions · Integrations · Payments · Shipping · Add-ons

The old "Workers & PINs" sidebar item is a tab on Time Tracking now. Settings is one click → secondary nav inside settings (tabs at the top of the page).

Cmd+K command palette for global search across:

• Pages (jumps to any admin route)
• Recent orders / products / stops / customers (live search)
• Quick actions ("Create order", "Add product", "Send blast")

5. Component patterns (consistency pass)

Pattern	Owner	Status
PageHeader (eyebrow + title + subtitle + actions)	src/components/admin/design-system/PageHeader.tsx	exists, audit usage
EmptyState (icon + title + body + CTA)	same dir, currently EmptyState.tsx exists for shared, admin needs its own	add .ha-empty
LoadingState (skeleton + label)	.ha-skeleton exists in CSS, no component	wrap
ConfirmDialog (destructive action)	AdminDeleteConfirm.tsx exists	audit usage
StatusPill (success/warn/danger/info/neutral)	AdminBadge.tsx exists, variants are off	tighten variants
KPIStat (label + value + trend)	inline in DashboardClient	extract to component
CommandPalette (Cmd+K)	new	new component
SideNavGroup (label + items)	new	replaces flat NAV_ITEMS
DataTable (sortable, filterable, paginated)	shared/DataTable.tsx exists	tighten + use everywhere

6. Phased execution (yolo, one day)

Phase 1 — Foundation (commit per file)

• Update src/styles/admin-design-system.css color tokens
• New SideNavGroup component
• Replace AdminSidebar flat list with grouped nav
• New CommandPalette component (mounted in admin layout)
• Refactor DashboardClient to unified command center (drop 4 tabs, single column feed)

Phase 2 — Pattern extraction (commit per file)

• Extract KPIStat from dashboard
• Refine EmptyState admin variant
• LoadingState wrapper
• StatusPill tighten variants

Phase 3 — Apply to highest-traffic pages

• /admin/orders + detail
• /admin/products + new + edit
• /admin/stops calendar
• /admin/communications composer
• /admin/settings/* tabs

Phase 4 — Frontend polish

• Public page spot-check: hero spacing, section rhythm
• Verify TypeScript + build green

7. Risk & revert

• Working on branch design/ui-revamp-2026-06 (already created off main).
• Every milestone is its own commit. git reset --hard <sha> reverts to that point.
• One-click full revert: git checkout main && git branch -D design/ui-revamp-2026-06 — but only after a failed git push.
• Type-check (npx tsc --noEmit) + npm run build are the gate at the end of each phase. Build green = milestone accepted.
• If something breaks the admin layout at runtime, git revert HEAD unwinds the most recent commit without losing history.
• Do not delete or rename files in this branch. Only add, only modify. Easier to revert.

8. Out of scope (yolo tomorrow, not now)

• Wholesale portal pages (/wholesale/*)
• Water-log standalone pages
• Public marketing pages (pricing, blog, changelog) — polish later
• Wholesale auth migration (separate task per MEMORY.md)
• Migrating remaining legacy supabase.from() calls (separate task per MEMORY.md)

9. What "done" looks like

• Color tokens unified, no muddy mix
• Sidebar has 6 visible groups with section labels
• Cmd+K opens a command palette that can navigate to any admin page
• Dashboard is a single feed, no 4-tab structure
• Top 6 admin pages use the new PageHeader / StatusPill / EmptyState consistently
• npx tsc --noEmit clean
• npm run build clean
• Dev server boots, /admin renders, sidebar works, Cmd+K opens