refactor: Design System v4 — flat dark theme with icon rail sidebar #119

2026-03-22T09:21:06Z

chihlasm commented

2026-03-22 09:21:06 +00:00

(Migrated from github.com)

Summary

Complete frontend redesign from glassmorphism/gradient aesthetic to flat, high-contrast dark theme (Sentry/PostHog-inspired).

CSS Foundation — new color tokens, removed glass/gradient/blur utilities, all colors via CSS custom properties (light-mode ready)
Icon Rail Sidebar — 72px rail with 5 grouped icons (Home, Work, Knowledge, Insights, Help), full-height resizable drawer on hover, pin-to-expand toggle
Component Sweep — ~200 files migrated from hardcoded hex to semantic Tailwind tokens
Landing Page — flat surfaces, no ambient glow, solid accent buttons
Interactive Shadows — dark-mode-aware: elevated surfaces + faint accent glow instead of invisible black shadows
Stat Cards — 3px colored left borders for visual distinction
Tab Toggles — active state uses elevated surface + shadow

Key decisions

All 3,200+ hardcoded hex values replaced with CSS variable-backed Tailwind classes
Light mode is now a variable swap away (no component changes needed)
Shadows use brighter surfaces + faint cyan glow (black shadows invisible on dark bg)
font-label alias kept temporarily (~10 files still reference it)

Test plan

Verify icon rail sidebar: 5 icons, hover drawer, pin/unpin, mobile hamburger
Verify drawer stays open when moving mouse from icon to drawer
Verify drawer is resizable via drag handle
Verify stat cards have colored left borders
Verify Guided/Chat toggle has elevation shadow on active state
Verify primary buttons have cyan glow on hover
Verify all pages render without visual breakage
Verify landing page at / renders with flat theme
Verify FlowPilot session: message bar, action bar positioning

🤖 Generated with Claude Code

## Summary Complete frontend redesign from glassmorphism/gradient aesthetic to flat, high-contrast dark theme (Sentry/PostHog-inspired). - **CSS Foundation** — new color tokens, removed glass/gradient/blur utilities, all colors via CSS custom properties (light-mode ready) - **Icon Rail Sidebar** — 72px rail with 5 grouped icons (Home, Work, Knowledge, Insights, Help), full-height resizable drawer on hover, pin-to-expand toggle - **Component Sweep** — ~200 files migrated from hardcoded hex to semantic Tailwind tokens - **Landing Page** — flat surfaces, no ambient glow, solid accent buttons - **Interactive Shadows** — dark-mode-aware: elevated surfaces + faint accent glow instead of invisible black shadows - **Stat Cards** — 3px colored left borders for visual distinction - **Tab Toggles** — active state uses elevated surface + shadow ### Key decisions - All 3,200+ hardcoded hex values replaced with CSS variable-backed Tailwind classes - Light mode is now a variable swap away (no component changes needed) - Shadows use brighter surfaces + faint cyan glow (black shadows invisible on dark bg) - `font-label` alias kept temporarily (~10 files still reference it) ## Test plan - [ ] Verify icon rail sidebar: 5 icons, hover drawer, pin/unpin, mobile hamburger - [ ] Verify drawer stays open when moving mouse from icon to drawer - [ ] Verify drawer is resizable via drag handle - [ ] Verify stat cards have colored left borders - [ ] Verify Guided/Chat toggle has elevation shadow on active state - [ ] Verify primary buttons have cyan glow on hover - [ ] Verify all pages render without visual breakage - [ ] Verify landing page at `/` renders with flat theme - [ ] Verify FlowPilot session: message bar, action bar positioning 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-03-22 09:21:19 +00:00

(Migrated from github.com)

🚅 Deployed to the patherly-pr-119 environment in selfless-grace

Service	Status	Web	Updated (UTC)
hopeful-liberation	✅ Success (View Logs)	Web	Mar 23, 2026 at 1:44 am
patherly	✅ Success (View Logs)	Web	Mar 23, 2026 at 1:43 am

🚅 Deployed to the [patherly-pr-119](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=6b7062a1-373f-4b44-969f-543b8df2b96d) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=ebb3a2e1-385c-495e-b36b-d91ade9b0524&environmentId=6b7062a1-373f-4b44-969f-543b8df2b96d)) | [Web](https://hopeful-liberation-patherly-pr-119.up.railway.app) | Mar 23, 2026 at 1:44 am | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=3ce49678-5be1-41e4-99a1-0ba09180151f&environmentId=6b7062a1-373f-4b44-969f-543b8df2b96d)) | [Web](https://patherly-patherly-pr-119.up.railway.app) | Mar 23, 2026 at 1:43 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#119