Design-System
Alles, was Salonino aussehen lässt wie Salonino: Logo, Farben, Schrift, Formen, Komponenten, 3D-Objekte und Bewegung.
Prinzip
Ein helles Notizbuch bei Tageslicht: viel Weißraum, ruhige Typografie und ein einziger kräftiger Strich. Die Persönlichkeit kommt von verspielten 3D-Objekten aus dem Salonalltag, die Oberfläche bleibt diszipliniert. Angelehnt an den Refero-Style „Geniestudio“.
Logo
Ein Handspiegel mit Iris-Rahmen und Glanzstreifen, daneben ein Funkeln. Der Spiegel steht für den Salon, das Funkeln für den Moment „öffne dich“.
„salonino“ immer klein, in Geist 500 mit enger Laufweite. Die i-Punkte sind kleine Funkeln in Accent-Blau.
Rund um das Logo mindestens die Höhe der Bildmarke frei lassen. Mindestgröße der Bildmarke: 20 px.
Farben
#0a0d12Überschriften und Text. Nie reines Schwarz.#181d27Gefüllte Buttons, dunkle Flächen.#535862Fließtext, zweite Ebene.#ebf5ffSeitenhintergrund. Tiefe entsteht durch den Wechsel zu Bone.#fafdffKarten und Panels, ohne Schatten.#479dff → #0069e0Nur als feine Kontur, Fortschritt und Logo. Nie als Button-Fläche.#0a6fe6Kursive Betonung in Überschriften, Links.#f1e6ffPastell-Kachel.#d3f6e3Pastell-Kachel, Erfolg.#cce7ffPastell-Kachel, Auswahl.#ffe8dcPastell-Kachel.#fff4c7Pastell-Kachel, Hinweis.Schrift
Komponenten
3 px Verlauf, nur für besondere Flächen wie Hero, beliebten Tarif und Finale.
Volle Pastellfläche, 32 px Radius, großzügiger Innenabstand, keine Kontur.
3D-Objekte
Bewegung
cubic-bezier(.16, 1, .3, 1), 0,3 bis 0,9 Sekunden. Schneller Start, sanftes Ausrollen.
Überschriften erscheinen Wort für Wort mit leichter Unschärfe, versetzt um 55 ms.
3D-Objekte schweben langsam und folgen dem Mauszeiger leicht. Bei „Bewegung reduzieren“ steht alles still.
Regeln
Überschriften wirken durch Größe und enge Laufweite, nicht durch Fettdruck.
Canvas zu Bone statt Schatten. Schatten nur für schwebende Elemente.
Karten 32 px, kleine Karten 16 px, Bilder 24 px, Buttons und Tags als Pille. Keine spitzen Ecken.
Der Verlauf rahmt Hero, beliebten Tarif und Finale mit 3 px. Gefüllte Buttons sind Charcoal.
Pro Abschnitt maximal zwei Pastell-Flächen, damit es ruhig bleibt.
3D-Objekte stehen ohne Rahmen im Raum, mit weichem Schatten darunter.