HUISSTIJLGIDS
Brand Guidelines
voor Stuubs.
Richtlijnen voor developers, designers en partners die met het Stuubs-merk werken. Logo, kleuren, typografie, UI-componenten, spacing, tone of voice en gebruiksrichtlijnen — op één plek.
LOGO
Logo gebruik
Hoofdlogo
Gebruik het Stuubs-logo altijd in zijn volledige vorm: icon + wordmark. Laat voldoende witruimte rondom het logo en vervorm, roteer of herschik het niet.
Download & formaat
Het logo is beschikbaar als SVG. Gebruik SVG voor web, schalen zonder kwaliteitsverlies. Voor drukwerk of grote formaten vraag je het bronbestand op via het contact hieronder.
Wel doen
- • Gebruik het logo op donkere achtergronden.
- • Zorg voor voldoende contrast.
- • Plaats het logo centraal of linksboven in headers.
- • Gebruik de originele verhouding.
Niet doen
- • Het logo vervormen, roteren of uit elkaar trekken.
- • Andere kleuren geven dan de originele gradient/wit.
- • Een eigen lettertype of effect over het logo leggen.
- • Het logo gebruiken als achtergrondpatroon.
KLEUREN
Kleurenpalet
Het Stuubs-palet is donker en expressief. De basis is diep donker met heldere accenten. Gebruik primair roze spaarzaam voor actie en accenten; wit en muted-grijs voor hiërarchie in tekst.
Achtergrond
--background
#18171F
Pagina-achtergrond, dark mode basis.
Surface
--card / surface
#1E1D27
Kaarten, panels, modals, mobiele navigatie.
Primair / Pink
--primary / --pink
#FF3D9A
CTA's, accenten, links, focus-ringen, highlights.
Pink Glow
--pink-glow
#FF6BAA
Gradienten, glows, hoverstates.
Star
--star
#FFC24A
Sterren, ratings, positieve accenten.
Tekst
--foreground
#FAFAFA
Titels, bodytekst, iconen op dark.
Muted
--muted-foreground
#A8A6B3
Bijschriften, labels, secundaire tekst.
Rand
--border
rgba(255,255,255,0.08)
Scheidingen, borders, subtiele dividers.
Gradienten
Gebruik het brand-gradient voor primaire CTA's, badges en belangrijke highlights. Gebruik het text-gradient uitsluitend voor grote headings of hero-tekst.
--gradient-brand: 135deg, oklch(72% .22 10) → oklch(78% .18 340)
--gradient-text: 135deg, #FF7EBC → #FF3D9A 45% → #B46CFF
TYPOGRAFIE
Lettertype en hiërarchie
Font
Stuubs gebruikt Plus Jakarta Sans voor zowel display als body. Het is modern, helder en leest goed op donkere achtergronden. Laad het via Google Fonts of self-host het.
Plus Jakarta Sans ExtraBold
Plus Jakarta Sans Semibold
Plus Jakarta Sans Regular
CSS: var(--font-display) / var(--font-sans)
Teksthiërarchie
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
Body tekst. text-sm leading-relaxed text-muted-foreground.
Caption / label. text-xs text-muted-foreground
UI COMPONENTEN
Knoppen, badges en kaarten
Knoppen
.btn-primary / .btn-secondary — radius 999px, padding 14px 22px, glow 0 10px 34px rgba(255,61,154,.24)
Primaire knoppen gebruiken het brand-gradient met shadow-glow. Secundaire knoppen hebben een roze border en transparante achtergrond. Beide zijn pill-vormig (rounded-full).
Kaarten
VOORBEELD
Panel / card
.card-surface — bg #1E1D27, border rgba(255,255,255,.08), radius 20px
Kaarten gebruiken de card-token als achtergrond met een subtiele border en shadow-card. Rounded corners zijn consistent 1.25rem (rounded-2xl) of meer voor pills.
AVATARS
Avatars
Events en artiesten zonder logo krijgen een gradient-avatar met de eerste twee letters van hun naam. Vierkant (afgeronde hoeken) voor events, rond voor artiesten en personen.
Vierkant — events
Radius 16px (rounded-2xl), gradient 135°, letters in Plus Jakarta Sans ExtraBold, altijd wit op de gradient.
Rond — artiesten & mensen
Volledig rond (999px). Dezelfde gradientset, dezelfde letterregels. Gebruik nooit een gradient uit de set voor grote vlakken — alleen voor avatars.
Formaten
24 / 32 / 40 / 56 / 72 px. Lettergrootte is altijd ~40% van de avatarhoogte.
Regels
- Altijd exact 2 letters, uppercase.
- Kies de gradient deterministisch op basis van de naam, zodat dezelfde partij altijd dezelfde avatar krijgt.
- Nooit tekst kleiner dan 10px.
- Geen border, behalve rgba(255,255,255,.10) bij overlap op foto's.
SPACING & LAYOUT
Ruimte en grid
Maximale breedte
Content staat binnen max-w-7xl (80rem / 1280px) met px-6 horizontale padding. Houd secties verticaal gescheiden met ruime whitespace (py-16 tot py-24).
max-w-7xl • px-6 • gecentreerd
Rounding
Knoppen en badges zijn rounded-full. Kaarten en panels zijn rounded-2xl. Kleinere elementen zoals inputvelden gebruiken rounded-xl of rounded-lg.
TONE OF VOICE
Hoe spreken we?
Karakter
- Energiek — alsof je net uit een festival komt, maar nog helder genoeg om de weg te vinden.
- Persoonlijk — jij, jouw crew, jouw momenten. Geen anonieme gebruiker.
- Inclusief — festival, concert, clubnacht; iedereen die van live houdt is welkom.
- Tastbaar — we maken digitale herinneringen voelbaar, zonder poëzie te forceren.
Do's & don'ts
Wel
“Jouw eventleven. Één journey.” — kort, beeldend, persoonlijk.
Niet
“Wij bieden een end-to-end geïntegreerde eventherinneringsoplossing.” — te corporate, te abstract.
Wel
“Van ticket naar herinnering.” — concreet en eigen.
GEBRUIKSRICHTLIJNEN
Houd Stuubs consistent.
Deze richtlijnen helpen developers, designers en partners om het Stuubs-merk herkenbaar en consistent toe te passen op elk touchpoint. Heb je vragen over logo-gebruik, kleurwaarden, een drukwerkopdracht of een integratie? Neem contact op.