Devlog 24: Color Architecture Refactoring with Design Tokens

Two-Tier CSS Variables

• Global Tokens: Extracted hardcoded hex colors into primitive color names inside global.css.
• Theme Tokens: Created a semantic layer mapping elements like –bg-app and –accent-color directly to global tokens.

Clean Codebase Update

• Component Styles: Replaced absolute colors across the layout, dashboard hub, countdown, and clock templates with var() variables.
• Script Alignment: Updated dynamic checkmark colors in JavaScript to read –accent-color instead of raw hex values.
• Future Scope: The design is now fully abstracted, meaning light mode implementation will only require token swapping without editing individual component code.