# 2026-01-07-visual-design-system-overhaul.md: Visual Design System Overhaul

**Status:** Draft
**Created:** 2026-01-07
**Tags:** ui, css, design-system, aesthetics

## 1. Context & User Story
* **As a:** User of the Aurora Web Dashboard
* **I want to:** Experience a cohesive, modern, and premium visual design
* **So that:** The application feels professional, trustworthy, and pleasant to use for extended periods.

## 2. Technical Requirements
### Data Model Changes
- N/A

### API / Interface
- N/A

## 3. Constraints & Validations (CRITICAL)
- **CSS Variables:** Must use CSS Custom Properties for all colors, spacing, and typography to ensure theming capabilities.
- **Color Palette:** Use an HSL-based color system (e.g., `--primary-h`, `--primary-s`, `--primary-l`) to allow for opacity manipulations.
- **Typography:** Integrate a modern sans-serif font like 'Inter' or 'Outfit' from Google Fonts. Do not rely on system defaults.
- **Performance:** Load fonts efficiently (display: swap).

## 4. Acceptance Criteria
1. [ ] `style.css` is refactored to use a comprehensive set of root variables (colors, spacing, radii, shadows).
2. [ ] A modern font (Inter/Outfit) is imported and applied globally.
3. [ ] Hardcoded hex values are removed in favor of CSS variables.
4. [ ] Common components (Cards, Buttons, Inputs, Tables) have distinct, premium styles defined.
5. [ ] The color palette includes primary, secondary, background, surface, and semantic colors (success, error, warning).

## 5. Implementation Plan
- [ ] Define the HSL color palette and typography in `:root`.
- [ ] Import Google Fonts in `layout.ts` or via `@import` in CSS.
- [ ] Refactor existing `.card` and body styles to use the new tokens.
- [ ] Create utility classes for common spacing/layout needs if necessary (or keep it semantic).
- [ ] Add styles for buttons and links with proper hover/active states.