{{ l.node }}
{{ l.name }}
{{ l.note }}
BRAND, DESIGN UND MOTION
Consultr Brand Guidelines
Logo, Farben, Typografie, UI-Tokens und Bewegungsprinzipien an einem Ort. Jeder Baustein ist direkt als SVG, PNG oder Markdown herunterladbar, damit Design, Web und Vertrieb identisch auftreten.
{{ statusLine }}
01 LOGO
Logo und Varianten
Zwei gleiche Winkel, um 180 Grad gedreht und ineinander gestellt. Der Kanal zwischen ihnen bleibt über die gesamte Länge exakt 3 Einheiten breit.
Schutzraum und Mindestgröße
Consultr.ai
- Schutzraum 12 Einheiten im 64er Raster, ein Viertel der Markenhöhe
- Ab 40 px mit Lichtkante, 24 bis 40 px ohne, darunter Kleinform
- Lockup: Bildmarke 1,25 × Schriftgrad, Abstand 0,35 × Bildmarkenhöhe
- Wortmarke ab 110 px Breite, darunter Bildmarke solo
Nicht erlaubt
- Kanal füllen, verengen oder ungleich machen
- Winkel einzeln verwenden, spiegeln oder verdrehen
- Ecken runden, Schenkelstärken ändern, Schatten hinzufügen
- Rot auf Rot, Gradient auf Gradient, Marke auf unruhigem Bild
02 FARBEN
Farbpalette
Klick auf eine Fläche kopiert den Wert. Verhältnis im Layout: rund 80 Prozent Weiß und Ink, 15 Prozent Flächen und Rahmen, 5 Prozent Brandrot als Akzent.
03 TYPOGRAFIE
Schrift und Skala
HEADLINE
Space Grotesk
Gewicht 700, Tracking minus 0.02 bis 0.03 em, Zeilenhöhe 1.02 bis 1.1. Für Überschriften, Buttons und Kicker in Großbuchstaben mit 0.14 em Sperrung.
Schrift laden
TEXT
Manrope
Gewicht 400 bis 600, Zeilenhöhe 1.55 bis 1.6, Textbreite maximal 66 Zeichen. Fließtext in Mauve, Hervorhebungen in Ink, niemals rot gesetzter Fließtext.
Schrift laden
04 UI-TOKENS
Radien, Flächen, Komponenten
{{ t.name }}
{{ t.value }}
{{ t.use }}
BUTTONS
Primär
Sekundär
Tertiär ↗
CHIPS UND BADGES
Kategorie
ABSTRAHIERT
Live
EINGABE
name@unternehmen.de
05 MOTION
Animationsprinzipien
Bewegung erklärt Zusammenhänge, sie dekoriert nicht. Kurze Distanzen, weiche Federkurven, immer auf Transform und Opacity. Fahren Sie über die Karten, um die Kurven zu sehen.
Hover-Lift
Karten und Buttons heben 2 px an. Feder statt Ease, damit es lebendig wirkt.
transform .25s cubic-bezier(.175,.885,.32,1.275)
Bild-Zoom
Bilder in Karten skalieren auf 1.04, der Rahmen bleibt stehen.
transform .5s cubic-bezier(.4,0,.2,1)
Aurora-Glow
Dunkle Flächen atmen langsam. Nur ein Element pro Ansicht.
aurora 16s ease-in-out infinite
Reveal und Scrub
Inhalte wischen aus der Leserichtung ein. Scroll-Sequenzen laufen bildgenau mit 120 Frames.
scaleX 0 to 1, .45s cubic-bezier(.4,0,.2,1)
Timing
- Mikro-Interaktion 180 bis 250 ms
- Karten und Modale 300 bis 400 ms
- Ambient-Loops 12 bis 18 s
- Verzögerung in Serien 60 bis 90 ms pro Element
Nicht erlaubt
- Animation von Layout-Werten wie width oder top
- Bounce über 2 px oder Rotationen im Interface
- Mehr als eine Dauerbewegung gleichzeitig
- Auto-Play ohne Rücksicht auf reduzierte Bewegung
06 BILDSPRACHE
Bildsprache
Abstrakt, ruhig, viel Weißraum, crimson Licht als einziger Farbakzent. Keine Stockfoto-Teams, keine Roboter, keine blauen Tech-Klischees.
07 BANNER
Banner-Vorlagen
Vorschau und Download sind identisch gerendert. PNG kommt in doppelter Auflösung, SVG bleibt editierbar für Figma.