MARKENRICHTLINIEN
Brand Guidelines
für Stuubs.
Richtlinien für Entwickler, Designer und Partner, die mit der Marke Stuubs arbeiten. Logo, Farben, Typografie, UI-Komponenten, Spacing, Tone of Voice und Nutzung — an einem Ort.
LOGO
Logo-Nutzung
Hauptlogo
Verwende das Stuubs-Logo immer in seiner vollständigen Form: Icon + Wordmark. Lass ausreichend Freiraum um das Logo und verzerre, rotiere oder verändere es nicht.
Download & Format
Das Logo ist als SVG verfügbar. Nutze SVG für Web, verlustfrei skalierbar. Für Druck oder große Formate fordere die Quelldatei über den Kontakt unten an.
Do
- • Das Logo auf dunklen Hintergründen verwenden.
- • Für ausreichend Kontrast sorgen.
- • Das Logo zentriert oder oben links im Header platzieren.
- • Das Originalseitenverhältnis verwenden.
Don't
- • Das Logo verzerren, drehen oder auseinanderziehen.
- • Andere Farben als den Original-Gradient/Weiß verwenden.
- • Eine eigene Schrift oder einen Effekt über das Logo legen.
- • Das Logo als Hintergrundmuster verwenden.
FARBEN
Farbpalette
Die Stuubs-Palette ist dunkel und ausdrucksstark. Die Basis ist tiefes Dunkel mit kräftigen Akzenten. Verwende Primärpink sparsam für Aktionen und Akzente; Weiß und gedämpftes Grau für die Hierarchie im Text.
Hintergrund
--background
#18171F
Seitenhintergrund, Basis für Dark Mode.
Surface
--card / surface
#1E1D27
Karten, Panels, Modals, mobile Navigation.
Primär / Pink
--primary / --pink
#FF3D9A
CTAs, Akzente, Links, Fokus-Ringe, Highlights.
Pink Glow
--pink-glow
#FF6BAA
Gradienten, Glows, Hover-States.
Star
--star
#FFC24A
Sterne, Bewertungen, positive Akzente.
Text
--foreground
#FAFAFA
Titel, Fließtext, Icons auf Dark.
Muted
--muted-foreground
#A8A6B3
Beschriftungen, Labels, sekundärer Text.
Rand
--border
rgba(255,255,255,0.08)
Trennlinien, Borders, dezente Dividers.
Gradienten
Verwende den Brand-Gradient für primäre CTAs, Badges und wichtige Highlights. Nutze den Text-Gradient ausschließlich für große Headings oder Hero-Texte.
--gradient-brand: 135deg, oklch(72% .22 10) → oklch(78% .18 340)
--gradient-text: 135deg, #FF7EBC → #FF3D9A 45% → #B46CFF
TYPOGRAFIE
Schrift und Hierarchie
Schrift
Stuubs verwendet Plus Jakarta Sans sowohl für Display als auch für Fließtext. Sie ist modern, klar und liest sich gut auf dunklen Hintergründen. Lade sie über Google Fonts oder hoste sie selbst.
Plus Jakarta Sans ExtraBold
Plus Jakarta Sans Semibold
Plus Jakarta Sans Regular
CSS: var(--font-display) / var(--font-sans)
Texthierarchie
EYEBROW
.eyebrow — 11px / 800 / tracking .22em / uppercase / pink
H1 Display
.h-display — 72px desktop (clamp 40→72) / 800 / lh .96 / ls -.055em
H2 Section title
.h-section — 42px desktop / 33px mobiel / 800 / lh 1.1 / ls -.04em
H2 Sub-section
.h-sub — 28px / 800 / ls -.03em
H3 Card title
.h-card — 20px / 700 / ls -.025em
Lead paragraph — 18px / lh 1.65 / muted
.lead
Fließtext. text-sm leading-relaxed text-muted-foreground.
Caption / Label. text-xs text-muted-foreground
UI-KOMPONENTEN
Buttons, Badges und Karten
Buttons
.btn-primary / .btn-secondary — radius 999px, padding 14px 22px, glow 0 10px 34px rgba(255,61,154,.24)
Primäre Buttons verwenden den Brand-Gradient mit shadow-glow. Sekundäre Buttons haben einen pinken Border und transparenten Hintergrund. Beide sind pillenförmig (rounded-full).
Karten
BEISPIEL
Panel / Karte
.card-surface — bg #1E1D27, border rgba(255,255,255,.08), radius 20px
Karten verwenden das Card-Token als Hintergrund mit dezentem Border und shadow-card. Abgerundete Ecken sind einheitlich 1,25rem (rounded-2xl) oder mehr bei Pills.
AVATARS
Avatare
Events und Artists ohne Logo erhalten einen Gradient-Avatar mit den ersten zwei Buchstaben ihres Namens. Quadratisch (abgerundet) für Events, rund für Artists und Personen.
Quadratisch — Events
Radius 16px (rounded-2xl), Gradient 135°, Buchstaben in Plus Jakarta Sans ExtraBold, immer weiß auf dem Gradient.
Rund — Artists & Personen
Vollständig rund (999px). Gleiches Gradient-Set, gleiche Buchstabenregeln. Gradienten nie für große Flächen verwenden — nur für Avatare.
Größen
24 / 32 / 40 / 56 / 72 px. Schriftgröße immer ca. 40 % der Avatarhöhe.
Regeln
- Immer genau 2 Buchstaben, Großbuchstaben.
- Gradient deterministisch aus dem Namen wählen, damit dieselbe Partei immer denselben Avatar bekommt.
- Schrift nie kleiner als 10px.
- Keine Border, außer rgba(255,255,255,.10) bei Überlappung mit Fotos.
SPACING & LAYOUT
Raum und Raster
Maximale Breite
Inhalte liegen innerhalb von max-w-7xl (80rem / 1280px) mit px-6 horizontalem Padding. Trenne Sektionen vertikal mit großzügigem Whitespace (py-16 bis py-24).
max-w-7xl • px-6 • zentriert
Rundung
Buttons und Badges sind rounded-full. Karten und Panels sind rounded-2xl. Kleinere Elemente wie Eingabefelder verwenden rounded-xl oder rounded-lg.
TONE OF VOICE
Wie sprechen wir?
Charakter
- Energiegeladen — als kämst du gerade von einem Festival, aber noch klar genug, um den Weg zu finden.
- Persönlich — du, deine Crew, deine Momente. Kein anonymer Nutzer.
- Inklusiv — Festival, Konzert, Clubnacht; jeder, der Live-Musik liebt, ist willkommen.
- Greifbar — wir machen digitale Erinnerungen spürbar, ohne Poesie zu erzwingen.
Do's & Don'ts
Do
“Dein Eventleben. Eine Journey.” — kurz, bildhaft, persönlich.
Don't
“Wir bieten eine end-to-end integrierte Event-Erinnerungslösung.” — zu corporate, zu abstrakt.
Do
“Vom Ticket zur Erinnerung.” — konkret und eigen.
NUTZUNGSRICHTLINIEN
Halte Stuubs konsistent.
Diese Richtlinien helfen Entwicklern, Designern und Partnern, die Marke Stuubs an jedem Touchpoint erkennbar und konsistent einzusetzen. Fragen zur Logo-Nutzung, zu Farbwerten, einem Druckauftrag oder einer Integration? Nimm Kontakt auf.