AuroraBot-discord/tickets/2026-01-07-visual-design-system-overhaul.md

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.