OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/INDEX.md

TASK-000: Design System Modernization - Task Index

Overview

This is the master task for OpenNoodl's UI overhaul, broken down into 8 sub-tasks for incremental implementation.

Color Scheme: RED-MINIMAL palette

• Primary: Noodl Red (#d21f3c)
• Secondary: White (#ffffff)
• Neutrals: Pure black/gray (no color tint)

---

Sub-Task Summary

Task	Name	Priority	Effort	Dependencies
000A	Token Consolidation & Color Refresh	CRITICAL	30 min	None
000B	Hardcoded Colors - Legacy Styles	HIGH	1-2 hrs	000A
000C	Hardcoded Colors - Node Graph	HIGH	1-2 hrs	000A
000D	Hardcoded Colors - Core UI	HIGH	1-2 hrs	000A
000E	Typography & Spacing Tokens	MEDIUM	1 hr	000A
000F	Component Updates - Buttons/Inputs	MEDIUM	1-2 hrs	000A, 000D, 000E
000G	Component Updates - Dialogs/Panels	MEDIUM	1-2 hrs	000A, 000D, 000E
000H	Migration Wizard Polish	HIGH	1-2 hrs	000A-000G

Total Estimated Effort: 8-14 hours

---

Recommended Execution Order

Phase 1: Foundation (Do First)

1. TASK-000A - Token Consolidation & Color Refresh
   • This is the foundation - everything else depends on it
   • Location: ../TASK-000A-token-consolidation/OVERVIEW.md

Phase 2: Color Audit (Can Parallelize)

These can be done in any order after 000A:

2. TASK-000B - Hardcoded Colors - Legacy Styles

   • Location: ../TASK-000B-hardcoded-colors-legacy/OVERVIEW.md

3. TASK-000C - Hardcoded Colors - Node Graph

   • Location: ../TASK-000C-hardcoded-colors-nodegraph/OVERVIEW.md

4. TASK-000D - Hardcoded Colors - Core UI

   • Location: ../TASK-000D-hardcoded-colors-coreui/OVERVIEW.md

5. TASK-000E - Typography & Spacing Tokens

   • Can be done independently
   • Location: ../TASK-000E-typography-spacing/OVERVIEW.md

Phase 3: Visual Polish (After Color Audit)

6. TASK-000F - Component Updates - Buttons/Inputs

   • Location: ../TASK-000F-component-buttons-inputs/OVERVIEW.md

7. TASK-000G - Component Updates - Dialogs/Panels

   • Location: ../TASK-000G-component-dialogs-panels/OVERVIEW.md

Phase 4: Final Polish

8. TASK-000H - Migration Wizard Polish
   • Should be last as it benefits from all prior work
   • Location: ../TASK-000H-migration-wizard-polish/OVERVIEW.md

---

Key Files Reference

Color Token Files

• packages/noodl-editor/src/editor/src/styles/custom-properties/colors.css (primary)
• packages/noodl-core-ui/src/styles/custom-properties/colors.css (secondary)

Color Source

• dev-docs/tasks/phase-3/TASK-000-styles-overhaul/COLORS-RED-MINIMAL.md

Entry Points to Verify

• packages/noodl-editor/src/editor/index.ts
• packages/noodl-core-ui/.storybook/preview.ts

---

Success Criteria (All Tasks Complete)

Technical

• All colors use CSS variables (no hardcoded hex in styles)
• Token system supports future light theme
• Typography and spacing tokens available

Visual

• App uses consistent RED-MINIMAL palette
• Pure dark backgrounds (no warm/brown tint)
• Primary accent is red (#d21f3c)
• Good contrast and readability

User Experience

• Migration wizard looks polished
• Interactive states are obvious
• Overall feel matches modern dev tools

---

Verification Commands

After all tasks complete:

# Check for remaining hardcoded colors in styles
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-editor/src/editor/src/styles/ --include="*.css" --include="*.scss" | wc -l

# Check views directory
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-editor/src/editor/src/views/ --include="*.css" --include="*.scss" | wc -l

# Check core-ui components
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-core-ui/src/components/ --include="*.css" --include="*.scss" | wc -l

Target: Near-zero hardcoded colors (some node-specific colors may remain intentionally)

---

Related Documents

• DESIGN-SYSTEM-MODERNISATION.md - Original detailed planning document
• COLORS-RED-MINIMAL.md - Complete CSS palette to use