Farben als System.
Nicht als Deko.
Dieses Manual ist Dokumentation und Asset: Die Token sind Source of Truth und können 1:1 in Websites & Apps übernommen werden. Ruhe ist Absicht: low-contrast bis ein neuer Sinnabschnitt kommt.
Interaktion
Hover zeigt den Farbcode subtil. Klick kopiert. Gedrückt halten öffnet den Wheel Picker: halten + ziehen ↑/↓ → HEX/RGB/RGBA/HSL. Loslassen setzt das Format global.
Ziel: Tooling verschwindet. Workflow bleibt.
Apple-nah, aber MMG.
Nähe in Flächen. Bedeutung durch Kapitelwechsel. Das bläuliche System ist der charakteristische Bruch.
Tokens zuerst.
Komponenten bekommen Semantik (accent / surface / ink). Konkrete Werte existieren nur im Manual.
Kopiere unten das Token-Snippet direkt in dein Projekt.
Brand Color Tokens
Das ist der Kern. Alles Weitere hängt daran.
Wird automatisch im gewählten Format generiert.
In Projekten verwendest du primär die Semantik-Aliases (--mmg-accent, --mmg-surface …).
Die Skala (--mmg-accent-50..950) ist die Palette.
Accent System
Akzent ist eine Skala — Standard ist --mmg-accent-500.
Darüber wird’s weicher, darunter ernster.
Skala
Semantik
Default → Hover → Active: --mmg-accent / --mmg-accent-hover / --mmg-accent-active
accent-50..300.
CTA-Flächen nutzen accent-500..700.
Nähe, bis Bedeutung kommt.
Surface System
Flächen sind zurückhaltend. Keine „Verdunkelung“ im Light-System — stattdessen klare Kapitelwechsel.
Fulltone
100% Deckkraft.
50% auf Weiß (Ergebnis)
Ergebnisfarben für tinted Panels auf weißem Body.
Body bleibt weiß. Sections sind gedimmte Container (Full-Breite), innen minimal boxed und gerundet — wie Apple Cards.
surface, innen = Card.
Das bläuliche Surface ist Markensignatur, ohne laut zu sein. Ideal für „System“-Abschnitte (Framework, Prozess, Struktur).
No-Gos
Akzent ist Skalpell, kein Eimer
Keine riesigen blauen Hintergründe ohne Grund.
Nicht alles gleichzeitig wichtig
Wenn alles Akzent trägt, wirkt nichts mehr nach System.
Bruch bewusst setzen
Hell → Dunkel ist Kapitel, nicht Dekoration.
Erweiterbar
Diese Struktur kann später sauber um Logo/Typo/Imagery erweitert werden.