# Visual Style

## Aesthetic

**Slick, professional, and dark.** The overall tone is a premium developer tool — confident and minimal, not playful. Near-black background with light glassmorphism foreground elements. Glass surfaces are restrained: medium blur, medium opacity. The background includes an aurora-like shape with sharp gradient stops to make the glass effect stand out.

Reference feel: closer to a high-end terminal or a fintech dashboard than a consumer SaaS product. Every surface should feel intentional and precise.

## Component Library

**shadcn-svelte** is the component library. Components are installed into `$lib/components/controls/` via the shadcn-svelte CLI and customized in place. Do not wrap shadcn components in extra abstraction layers — edit them directly when customization is needed.

shadcn-svelte uses **bits-ui** for headless primitives and is fully compatible with Svelte 5 Runes.

## Background

- Near-black base with a subtle aurora gradient layer.
- Subtle depth is achieved through both the background aurora and the glass layers.

## Glass Surfaces

Glass is used for foreground elements only (sidebar, top bar, cards, modals). It should feel like matte frosted glass over black — not colorful, not warm.

| Surface           | Background               | Blur         | Border                             |
| ----------------- | ------------------------ | ------------ | ---------------------------------- |
| Sidebar / top bar | `rgba(255,255,255,0.04)` | `blur(12px)` | `1px solid rgba(255,255,255,0.08)` |
| Cards / panels    | `rgba(255,255,255,0.05)` | `blur(8px)`  | `1px solid rgba(255,255,255,0.09)` |
| Modals / popovers | `rgba(255,255,255,0.07)` | `blur(16px)` | `1px solid rgba(255,255,255,0.12)` |
| Input fields      | `rgba(255,255,255,0.05)` | none         | `1px solid rgba(255,255,255,0.10)` |

Keep colored tints subtle on glass surfaces. Accent color should remain focused on interactive elements.

## Color Palette

| Role           | Value                         | Usage                                    |
| -------------- | ----------------------------- | ---------------------------------------- |
| Background     | `oklch(0.145 0.008 326)`      | Page background                          |
| Surface-1      | `rgba(255,255,255,0.04)`      | Sidebar, top bar                         |
| Surface-2      | `rgba(255,255,255,0.05)`      | Cards, panels                            |
| Surface-3      | `rgba(255,255,255,0.07)`      | Modals, dropdowns                        |
| Border         | `rgba(255,255,255,0.08–0.12)` | All surface edges                        |
| Text primary   | `rgba(255,255,255,0.92)`      | Body text, headings                      |
| Text secondary | `rgba(255,255,255,0.45)`      | Labels, captions, placeholders           |
| Text muted     | `rgba(255,255,255,0.25)`      | Disabled states, timestamps              |
| Accent         | `oklch(0.586 0.256 295.614)`  | Primary actions, active nav, focus rings |
| Accent hover   | `oklch(0.496 0.265 301.924)`  | Button hover, active states              |
| Accent subtle  | `rgba(99,102,241,0.15)`       | Selected row backgrounds, badge fills    |
| Destructive    | `#ef4444` (red-500)           | Delete actions, error states             |

## Status Colors

Desaturated by default, full opacity only on active/hover. Never use raw saturated colors as backgrounds.

| State            | Color                  | Badge fill              |
| ---------------- | ---------------------- | ----------------------- |
| Running / merged | `#22c55e` (green-500)  | `rgba(34,197,94,0.12)`  |
| Pending / open   | `#3b82f6` (blue-500)   | `rgba(59,130,246,0.12)` |
| Degraded / draft | `#eab308` (yellow-500) | `rgba(234,179,8,0.12)`  |
| Stopped / error  | `#ef4444` (red-500)    | `rgba(239,68,68,0.12)`  |

## Typography

- Font: Inter Variable for UI text, monospace for code/YAML blocks
- Custom font loading is enabled for Inter Variable
- Headings: `rgba(255,255,255,0.92)`, medium weight (500)
- Body: `rgba(255,255,255,0.80)`, regular weight
- Line height: 1.5 for body, 1.2 for headings

## Elevation & Depth

Three levels, achieved through glass opacity and border strength alone — no shadows or glows:

1. **Base** — sidebar, top bar (`Surface-1`, faintest border)
2. **Raised** — cards, form panels (`Surface-2`, slightly stronger border)
3. **Floating** — modals, popovers, dropdowns (`Surface-3`, strongest border, higher blur)

Avoid box shadows. If separation is needed, increase border opacity by one step rather than adding a shadow.

## Interactive States

- **Default**: muted text, transparent background
- **Hover**: text brightens to primary (`0.92`), surface tint `rgba(255,255,255,0.04)` added
- **Active / selected**: accent subtle background (`rgba(99,102,241,0.15)`), accent text color
- **Focus**: `2px solid #6366f1` outline with `2px` offset — no soft glow rings
- **Disabled**: text at `0.25` opacity, no pointer events

## Icons

Lucide via `lucide-svelte`. Size `16px` inline, `20px` for standalone actions. Color `rgba(255,255,255,0.45)` at rest, `rgba(255,255,255,0.92)` on hover/active. Stroke width `1.5px`.

## Motion

Minimal. Transitions only where they carry meaning:

- Sidebar collapse/expand: `width 200ms ease`
- Dropdown / popover open: `opacity 120ms ease, transform 120ms ease` (subtle upward fade-in)
- Toasts / notifications: `transform 200ms ease` slide in from edge

No looping animations, no decorative transitions on hover. Loading states use a simple opacity pulse, not a spinner, for inline elements; a spinner only for full-panel blocking loads.