Klick → Palette · Rechtsklick → als Hintergrund auf Element
⟳ Cybernetic — Linked Hues
Master Hue (Brand Primary)
Hue 250
Chroma 0.15
Secondary Offset +30°
Accent Offset +70°
Neutral Chroma 0.01
Semantische Farben
Success Hue 145°
Warning Hue 85°
Error Hue 25°
Info Hue 220°
OKLCH Paletten-Vorschau⟳ Linked
CSS Output
Fluid Typography & Spacing
Viewport-Grenzen
Min-Breite (Mobile) 320px
Max-Breite (Desktop) 1280px
Basis-Schriftgröße
Min (Mobile) 1rem
Max (Desktop) 1.25rem
Modulare Skalierung
Min Ratio 1.20
Max Ratio 1.33
Fluid Spacing (clamp-basiert)
Basis-Einheit 0.25rem
Fluid-Faktor (vw-Anteil) 1.5vw
Spacing Steps 8
Vorschau
680px
CSS Output
⚙ <head> bearbeiten
Seitentitel
Meta-Beschreibung
Viewport
Externe Stylesheets (eine URL pro Zeile)
Externe Scripts (eine URL pro Zeile)
Weiteres HTML
Alle Tokens
🔤 Font Manager — Google Fonts
🔎 Suchen & Ersetzen — CSS
⌨ Tastaturkürzel
Allgemein
RückgängigCtrl+Z
WiederholenCtrl+Y
JSON speichernCtrl+S
HTML platzierenCtrl+Shift+V
Shortcuts zeigen?
CSS suchenCtrl+G
Suchen & ErsetzenCtrl+H
Cinema-ModusCtrl+M
Element-Baum
Kind hinzufügenCtrl+↵
Geschwister hinzufügenShift+↵
Element löschenDel / ⌫
DuplizierenCtrl+D
Nach obenAlt+↑
Nach untenAlt+↓
EinrückenAlt+→
AusrückenAlt+←
Als Block speichernCtrl+B
Sichtbarkeit toggleCtrl+Shift+H
CSS-Editor
Einrücken (Tab)Tab
AutocompleteTab / Enter
Autocomplete schließenEsc
Nächster TrefferEnter
Vorheriger TrefferShift+Enter
BeautifyAlt+Shift+F
Preview
Click-to-SelectC
Inline bearbeitenDoppelklick
Viewport: MobilCtrl+Shift+1
Viewport: TabletCtrl+Shift+2
Viewport: DesktopCtrl+Shift+3
Viewport: VollCtrl+Shift+4
Dark/Light toggleCtrl+Shift+D
Seiten
EditorCtrl+1
FarbenCtrl+2
TypografieCtrl+3
Farben
Swatch kopierenKlick
Swatch → ElementShift+Klick
Swatch → AuswahlToggle + Klick
⊘ Neues Projekt
Alle Elemente, CSS und Einstellungen werden zurückgesetzt.
Das aktuelle Projekt geht unwiderruflich verloren — vorher JSON speichern!
✦ Variablen Bulk-Refactor
Präfix ersetzen
→
Oder Namen einzeln bearbeiten — var(--name) wird überall automatisch angepasst.
⚙ Variablen-Gruppen
Gruppen bestimmen die Kategorisierung im Variablen-Panel. Präfixe sind kommasepariert — Variablen die mit einem Präfix beginnen landen in dieser Gruppe.
Die letzte Gruppe (ohne Präfixe) fängt alle übrigen Variablen auf.
⊕ HTML Platzieren
HTML (mit optionalem <style> und <script>) einfügen oder als Datei laden.
Elemente werden als Kinder des aktuell ausgewählten Elements eingefügt — oder an der Wurzel der Seite.
oder einfach einfügen:
⚠ CSS-Konflikte erkannt
Das neue CSS würde diese Eigenschaften überschreiben. Trotzdem fortfahren?
📂 Projekt-Browser
Noch keine zuletzt geöffneten Projekte.
↓ Token Export
werden exportiert.
CSS Custom Properties
Kompatibel mit allen Browsern. Ideal für direkte Verwendung.
W3C Design Tokens Figma / Token Studio
JSON-Format nach W3C-Standard. Direkt importierbar in Figma mit dem Token Studio Plugin.
Style Dictionary Amazon
JSON-Format für Style Dictionary. Kann in iOS, Android, Web-Konstanten transformiert werden.
⬡ Komponenten-Scan
Elemente mit gleichen Klassen und Styles werden als Komponenten vorgeschlagen. Bestätige, welche du übernehmen möchtest — redundante Einzelregeln werden entfernt.