Version 0.1 / Gemeinsame Basis
Offen. Warm. Klar.
Ein System aus kräftiger Typografie, wenigen Flächen und viel gemeinsamem Raum.
01 / Farben
Fünf Farben.
Klare Rollen.
Apricot verbindet. Sage und Lilac gruppieren. Shadow Grey setzt Kontrast. Black führt Text und Aktionen.
Grundfläche
#FCD0A1Akzentfläche
#B1B695Akzentfläche
#A690A4Kontrastfläche
#272727Text & Aktion
#0A090802 / Typografie
Manrope Variable.
Eine Familie für alles. Kräftig in Überschriften, ruhig und gut lesbar im Text.
Gemeinsamer Grund
Digitale Räume gestalten
Systeme für viele Perspektiven
Großzügige Zeilen und klare Gewichte schaffen Orientierung, ohne Inhalte in sichtbare Container zu zwingen.
Manrope wird lokal als variable WOFF2-Datei ausgeliefert. Die Schrift deckt alle verwendeten Schnitte von 200 bis 800 ab und erzeugt keine Anfrage an externe Font-Dienste.
03 / Icons
Phosphor Regular.
Interface-Icons erscheinen in Regular und werden als einzelne lokale SVGs direkt in das HTML eingebettet.
04 / Elemente
Wenige Formen.
Eindeutige Aufgaben.
Squircles markieren Interaktion. Inhalt bleibt offen und wird durch Abstand sowie Ausrichtung zusammengehalten.
Aktionen
Pro Gruppe steht höchstens ein gefüllter Button. Sekundäre Ziele bleiben offene Textlinks.
Gruppieren
Eine gemeinsame Farbfläche verbindet den gesamten Abschnitt.
Der Inhalt braucht keine zusätzliche Box.
Überschrift, Text und Aktion bilden durch gemeinsame Kanten und Abstände eine erkennbare Gruppe. Die Fläche gehört dem Abschnitt, nicht jedem Element.
Regeln ansehen05 / Regeln
Weniger Rahmen.
Mehr Zusammenhang.
- Inhalte durch Raum, Raster, Ausrichtung und Typografie gruppieren.
- Keine Box ohne eigene Funktion: Karten nur für eigenständige oder klickbare Elemente.
- Keine verschachtelten Karten und keine Box-in-Box-Komposition.
- Squircles gezielt für Bedienelemente, Karten und besondere Flächen einsetzen.
- Pro Inhaltsgruppe höchstens einen gefüllten Primärbutton verwenden.
- Weitere Aktionen als offene Textlinks mit Phosphor-Pfeil darstellen.
- Farbwechsel über die ganze Abschnittsbreite statt um einzelne Textblöcke legen.
- Nur Vollfarben verwenden; funktionale Tints ausschließlich aus der Grundpalette mischen.