Ui Refactor

# Working with Color

## Color Models
- **Use HSL**: Hue, Saturation, Lightness. It is intuitive.
    - *Hue*: The "color" (0-360).
    - *Saturation*: Vividness (0% grey, 100% pure).
    - *Lightness*: 0% black, 100% white.

## Palette Generation
Do not use "5 color generators." You need more colors than you think.
1.  **Greys**: You need 8-10 shades. Tint them slightly blue (cool) or yellow (warm) to avoid "dead" greys.
2.  **Primary**: 5-10 shades of your main brand color.
3.  **Accents**: Semantic colors (Red/Destructive, Yellow/Warning, Green/Positive) need multiple shades for backgrounds vs text.

## Creating Shades (The Curve)
Do not just lighten/darken the Lightness channel.
- **Saturation Falloff**: As lightness approaches 0% or 100%, perceived saturation drops. You must *increase* saturation for very light or very dark shades to prevent them from looking washed out.
- **Hue Rotation**: Rotate the hue slightly as you change lightness to mimic natural light.
    - *Darker*: Rotate toward cool/dark colors (Blue/Purple/Red).
    - *Lighter*: Rotate toward bright colors (Yellow/Cyan).

## Accessibility & Contrast
- **WCAG**: 4.5:1 for normal text.
- **Flip Contrast**: If white text on a colored background is hard to read, do not darken the background until it looks black. Flip it: use dark text on a light colored background (e.g., a light red background with dark red text for errors).
- **Rotating Hue**: To increase contrast on colored text without making it black, rotate the hue toward a darker/brighter spectrum (e.g., darken yellow text by moving it toward orange).
- **Color Blindness**: Never rely on color alone. Use icons or text labels to accompany status colors (e.g., graphs, alerts).

# Depth, Images, and Finishing Touches

## Lighting and Shadows
Interfaces should emulate a physical light source (usually coming from the top).
- **Raised Elements**: Light top border (highlight), dark bottom shadow.
- **Inset Elements (Wells)**: Dark top shadow (or inner shadow), light bottom border.
- **Elevation System**: Define 5 shadows.
    - Small/Tight: Buttons (close to surface).
    - Medium: Dropdowns.
    - Large/Diffused: Modals (far from surface).
- **Two-Part Shadows**: Combine a large, soft, ambient shadow (general depth) with a tight, dark shadow (occlusion near the object).

## Flat Design Depth
- **Layers**: Overlap elements to create depth (e.g., a card floating halfway off a colored header background).
- **Color**: Lighter feels closer; darker feels further away.

## Images
- **Text Overlay**: Text on photos requires consistent contrast.
    - *Overlay*: Semi-transparent black (for light text).
    - *Lower Contrast*: Reduce the contrast of the background image itself.
    - *Colorize*: Desaturate image + multiply blend mode with a brand color.
- **Scaling**:
    - Do not scale up icons (they look blocky). Enclose small icons in a shape (circle/square) to fill space.
    - Do not scale down screenshots (text becomes unreadable). Re-create simplified "illustration" versions of the UI, or crop to a detail view.
- **User Content**: Always control aspect ratios. Use `background-size: cover` or object-fit constraints. Prevent color bleed by adding a subtle inner shadow (inset) to user uploaded images.

## Finishing Touches
- **Supercharge Defaults**: Replace standard bullets with checkmarks/icons. Style underlines on links.
- **Accent Borders**: Add a colorful 4px top-border to a bland card or alert to add personality without graphic design skills.
- **Backgrounds**: Use subtle repeating patterns or simple geometric shapes to break up large white backgrounds.
- **Empty States**: Never leave a container blank. Add an illustration and a primary call-to-action button (e.g., "Create your first project").

# Hierarchy and Focus

Visual hierarchy is how important elements appear in relation to one another. It is the most effective tool for making a design feel "professional."

## Strategies for Hierarchy

### 1. Size Isn't