# standby-design-mcp

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/KarstenKreh/Standby.Design  
**npm Downloads (last month):** 377  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/standby-design-mcp

## Description
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.

## Claude Desktop Quick Installation
Heuristic fallback — verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):

```json
"mcpServers": {
  "standby-design-mcp": {
    "command": "npx",
    "args": ["-y","standby-design-mcp"]
  }
}
```

## Documentation & README

# standby.design

Multi-Tool-Hub unter **standby.design** — kleine Tools für Designer und Entwickler. Kein Framework, kein Build-Step, reines HTML/CSS/JS.

## Struktur

```
/
├── index.html        # Hub-Seite (standby.design)
├── color/
│   └── index.html    # Color Palette Generator (standby.design/color)
├── Dockerfile
├── nginx.conf
├── docker-compose.yml
└── deploy.sh
```

## Deployment (Hetzner + Docker + nginx)

```bash
./deploy.sh
```

Setzt voraus: SSH-Key unter `C:/Local Data/Repositories/SSH Keys/hetzner_ed25519`.

## DNS (Namecheap)

A-Record für `standby.design` und `www.standby.design` → `46.225.131.97`

---

# Color Palette Generator (`/color`)

Ein interaktiver, client-seitiger Palette-Generator im **OKLCH-Farbraum** — keine Dependencies, kein Build-Step.

## Features

- **Brand + Slated**: Generiert automatisch eine volle Palette (Brand) und eine gedämpfte Variante mit 50% Chroma (Slated)
- **18 Abstufungen**: Feine Gradierung für Light Surfaces (25–100), Core Palette (200–800), Dark Surfaces (825–875) und High Contrast (925–975)
- **Zwei Modi**:
  - **Balanced Midpoint** — 500 = perzeptueller Mittelwert (L=0.50), symmetrisch um den hellsten Punkt des Farbtons
  - **Exact Brand Match** — 500 = exakt die Eingabefarbe, Helligkeit + Chroma werden gleichmäßig darum herum skaliert
- **Click-to-Copy**: Einzelne Hex- und OKLCH-Werte per Klick kopieren
- **Code-Export**: Fertige CSS Custom Properties (OKLCH + Hex Fallback) zum Kopieren
- **Surface-Demo**: Live-Vorschau für Light Mode, Dark Mode und High Contrast Surfaces
- **Grau-sicher**: Neutrale Eingaben (z.B. `#757575`) erzeugen saubere Grau-Paletten ohne Farbstich

## Verwendung

1. `index.html` im Browser öffnen
2. Hex-Farbcode eingeben (mit oder ohne `#`)
3. Modus wählen (Balanced Midpoint / Exact Brand Match)
4. Palette generieren — fertig

## Zonenstruktur

| Steps     | Zone                  | Verwendung                           |
|-----------|-----------------------|--------------------------------------|
| 25–100    | Light Surfaces        | Hintergründe, Cards, Elevated (Light)|
| 200–800   | Core Palette          | Buttons, Links, Akzente, Text        |
| 825–875   | Dark Surfaces         | Hintergründe, Cards (Dark Mode)      |
| 900–975   | High Contrast         | Hintergründe (High Contrast Dark)    |

## Technologie

- Reines HTML + CSS + JavaScript (zero dependencies)
- OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB Konvertierung
- Binäre Suche für sRGB-Gamut-Clamping
- Parabolische Chroma-Envelope für natürliche Sättigungsverteilung