io.github.KarstenKreh/standby-design-mcp
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
Open source Repository Open in the app JSON README (API)
About
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
Details
- Kind
- MCP servers
- Topic
- Media, design & games
- Publisher
- karstenkreh
- Origin
- official
- Category
- ferramentas
- Transport
- http
- Version
- 0.1.5
- Stars
- 1
- Last push
- 2026-08-08T15:53:18Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-08-29 03:02:00
- Updated
- 2026-08-29 03:02:00
- Origin id
io.github.KarstenKreh/standby-design-mcp
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