feat: monochrome design system #49

2026-02-10T02:41:51Z

chihlasm commented

2026-02-10 02:41:51 +00:00

(Migrated from github.com)

Summary

Migrate entire frontend (88 files) to monochrome glass-morphism design system
Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur
Remove theme toggle (dark-only mode), simplify Tailwind config, remap CSS variables
Functional color (green, red, yellow, blue) reserved exclusively for status indicators and node-type distinctions in the tree editor

Changes

Foundation: CSS variables remapped to monochrome, Tailwind config simplified (removed brand colors, font-heading, font-label), brand logo/wordmark converted to white
Pages (14): QuickStartPage, LoginPage, RegisterPage, SettingsPage, TreeLibraryPage, SessionHistoryPage, SessionDetailPage, MyTreesPage, AccountSettingsPage, TreeEditorPage, TreeNavigationPage, AdminCategoriesPage, TeamCategoriesPage, and all 8 admin pages
Components (70+): Modal, ConfirmDialog, TagBadges, TagInput, all library views, all session modals, all step-library components, all tree-editor forms, tree-preview, admin components, CheckoutButton, MarkdownContent

Design system highlights

Cards: glass-card (transparent gradient + backdrop-blur) replaces bg-card border-border
Buttons: white primary (bg-white text-black), transparent secondary (border-white/10)
Inputs: border-white/10 bg-black/50 with focus:border-white/30
Text hierarchy: text-white → text-white/70 → text-white/40 → text-white/30

Test plan

npm run build passes (zero TypeScript errors)
All 61 frontend tests pass
Zero remaining old theme class references (text-gradient-brand, font-heading, font-label, bg-gradient-brand)
Zero remaining semantic theme classes in .tsx files
Visual review of all pages in browser

🤖 Generated with Claude Code

## Summary - Migrate entire frontend (88 files) to monochrome glass-morphism design system - Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur - Remove theme toggle (dark-only mode), simplify Tailwind config, remap CSS variables - Functional color (green, red, yellow, blue) reserved exclusively for status indicators and node-type distinctions in the tree editor ## Changes - **Foundation:** CSS variables remapped to monochrome, Tailwind config simplified (removed brand colors, font-heading, font-label), brand logo/wordmark converted to white - **Pages (14):** QuickStartPage, LoginPage, RegisterPage, SettingsPage, TreeLibraryPage, SessionHistoryPage, SessionDetailPage, MyTreesPage, AccountSettingsPage, TreeEditorPage, TreeNavigationPage, AdminCategoriesPage, TeamCategoriesPage, and all 8 admin pages - **Components (70+):** Modal, ConfirmDialog, TagBadges, TagInput, all library views, all session modals, all step-library components, all tree-editor forms, tree-preview, admin components, CheckoutButton, MarkdownContent ## Design system highlights - Cards: `glass-card` (transparent gradient + backdrop-blur) replaces `bg-card border-border` - Buttons: white primary (`bg-white text-black`), transparent secondary (`border-white/10`) - Inputs: `border-white/10 bg-black/50` with `focus:border-white/30` - Text hierarchy: `text-white` → `text-white/70` → `text-white/40` → `text-white/30` ## Test plan - [x] `npm run build` passes (zero TypeScript errors) - [x] All 61 frontend tests pass - [x] Zero remaining old theme class references (`text-gradient-brand`, `font-heading`, `font-label`, `bg-gradient-brand`) - [x] Zero remaining semantic theme classes in `.tsx` files - [ ] Visual review of all pages in browser 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-02-10 02:42:08 +00:00

(Migrated from github.com)

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

Service	Status	Web	Updated (UTC)
patherly	✅ Success (View Logs)	Web	Feb 10, 2026 at 3:44 am
hopeful-liberation	✅ Success (View Logs)	Web	Feb 10, 2026 at 3:44 am

🚅 Deployed to the [patherly-pr-49](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=5352a097-ae18-4091-98d0-7a4f735efdf1) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=910cf38c-0489-4ce1-ae1e-6f6bda784926&environmentId=5352a097-ae18-4091-98d0-7a4f735efdf1)) | [Web](https://patherly-patherly-pr-49.up.railway.app) | Feb 10, 2026 at 3:44 am | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=8e01f8de-a5cb-4881-94be-e3b8656f9e36&environmentId=5352a097-ae18-4091-98d0-7a4f735efdf1)) | [Web](https://hopeful-liberation-patherly-pr-49.up.railway.app) | Feb 10, 2026 at 3:44 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#49