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
#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(0.72 0.22 10), oklch(0.78 0.18 340)
--gradient-text: 135deg, oklch(0.75 0.22 5), oklch(0.82 0.16 340)
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
uppercase, tracking-[0.22em], pink
H2 Section title
text-3xl md:text-4xl font-extrabold tracking-tight
H3 Subtitle
text-lg font-semibold
Body tekst. text-sm leading-relaxed text-muted-foreground.
Caption / label. text-xs text-muted-foreground
UI COMPONENTEN
Knoppen, badges en kaarten
Knoppen
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
bg-card, border-border, rounded-2xl, shadow-card
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.
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.