38 lines
1.8 KiB
Markdown
38 lines
1.8 KiB
Markdown
# 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.
|