# Design Language — Ninja Nexus

## Vision

Ninja Nexus skal føles som **ét sammenhængende produkt** — ikke en samling af værktøjer boltet sammen. Designet er moderne, roligt og fokuseret på produktivitet.

---

## Designprincipper

### 1. Klarhed over dekoration
Hvert element har et formål. Ingen unødvendige gradients, skygger eller animationer.

### 2. Konsistens på tværs af flader
Shell, Control Center og login deler tokens, typografi og komponenter.

### 3. Hierarki gennem typografi og spacing
Størrelse og vægt — ikke farve alene — skaber visuelt hierarki.

### 4. Feedback ved hver handling
Loading states, success/error toasts, progress indicators.

### 5. Tilgængelighed (WCAG 2.1 AA)
Kontrast minimum 4.5:1, keyboard navigation, screen reader support.

---

## Layout-principper

| Flade | Layout | Navigation |
|-------|--------|------------|
| Login | Centered card, fuldskærms baggrund | Ingen — single purpose |
| Shell Desktop | Fuldskærm, taskbar bottom | Taskbar + launcher overlay |
| Launcher | Overlay, centered, søgefelt top | Keyboard-first |
| App Center | Panel/side-view i Shell | Tabs: Browse, Mine, Opdateringer |
| Control Center | Sidebar + content area | Sidebar navigation |

---

## Komponenter (kernesæt)

- **Button:** Primary, Secondary, Ghost, Danger — 3 størrelser
- **Input:** Text, Password, Search — med label og validation
- **Card:** Standard, Elevated, Interactive
- **Modal:** Centered, med overlay
- **Toast:** Success, Warning, Error, Info — auto-dismiss 5s
- **Badge:** Status, count, label
- **Avatar:** User, app, device — circle med fallback initialer
- **Table:** Sortable, filterable — til Control Center
- **Sidebar:** Collapsible, med ikoner og labels

---

## Motion

- **Page transitions:** Fade 250ms
- **Launcher open:** Scale fra 95% → 100%, 200ms
- **Modal:** Fade + slide up 250ms
- **Toast:** Slide in from right 200ms
- **Ingen** animationer på compliance-kritiske flows (login, MFA)

---

## Responsive (Control Center)

| Breakpoint | Layout |
|------------|--------|
| < 768px | Mobile: stacked, hamburger menu |
| 768–1024px | Tablet: collapsed sidebar |
| > 1024px | Desktop: full sidebar |

Shell er altid desktop (1280×720 minimum).

---

*Se også: [design/DESIGN_TOKENS.md](../design/DESIGN_TOKENS.md) · [DESKTOP_LAYOUT.md](./DESKTOP_LAYOUT.md)*
