BRAND GUIDE
Brand Guidelines
for Stuubs.
Guidelines for developers, designers and partners working with the Stuubs brand. Logo, colours, typography, UI components, spacing, tone of voice and usage — in one place.
LOGO
Logo usage
Main logo
Always use the Stuubs logo in its full form: icon + wordmark. Leave enough whitespace around it and don't distort, rotate or rearrange it.
Download & format
The logo is available as SVG. Use SVG for web; it scales without loss of quality. For print or large formats request the source file via the contact below.
Do
- • Use the logo on dark backgrounds.
- • Ensure sufficient contrast.
- • Place the logo centered or top-left in headers.
- • Use the original aspect ratio.
Don't
- • Distort, rotate or pull the logo apart.
- • Use colours other than the original gradient/white.
- • Layer a custom font or effect over the logo.
- • Use the logo as a background pattern.
COLOURS
Colour palette
The Stuubs palette is dark and expressive. The base is deep dark with bright accents. Use primary pink sparingly for action and accents; white and muted grey for hierarchy in text.
Background
--background
#18171F
Page background, dark mode base.
Surface
--card
#1E1D27
Cards, panels, modals, mobile nav.
Primary / Pink
--primary / --pink
#FF3D9A
CTAs, accents, links, focus rings, highlights.
Pink Glow
--pink-glow
#FF6BAA
Gradients, glows, hover states.
Star
--star
#FFC24A
Stars, ratings, positive accents.
Text
--foreground
#FAFAFA
Titles, body text, icons on dark.
Muted
--muted-foreground
#A8A6B3
Captions, labels, secondary text.
Border
--border
rgba(255,255,255,0.08)
Dividers, borders, subtle separators.
Gradients
Use the brand gradient for primary CTAs, badges and key highlights. Use the text gradient only for large headings or hero copy.
--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)
TYPOGRAPHY
Typeface and hierarchy
Font
Stuubs uses Plus Jakarta Sans for both display and body. It's modern, clear and reads well on dark backgrounds. Load it via Google Fonts or self-host.
Plus Jakarta Sans ExtraBold
Plus Jakarta Sans Semibold
Plus Jakarta Sans Regular
CSS: var(--font-display) / var(--font-sans)
Text hierarchy
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 text. text-sm leading-relaxed text-muted-foreground.
Caption / label. text-xs text-muted-foreground
UI COMPONENTS
Buttons, badges and cards
Buttons
Primary buttons use the brand gradient with shadow-glow. Secondary buttons have a pink border and transparent background. Both are pill-shaped (rounded-full).
Cards
EXAMPLE
Panel / card
bg-card, border-border, rounded-2xl, shadow-card
Cards use the card token as background with a subtle border and shadow-card. Rounded corners are consistently 1.25rem (rounded-2xl) or more for pills.
SPACING & LAYOUT
Space and grid
Max width
Content sits within max-w-7xl (80rem / 1280px) with px-6 horizontal padding. Keep sections vertically separated with generous whitespace (py-16 to py-24).
max-w-7xl • px-6 • centered
Rounding
Buttons and badges are rounded-full. Cards and panels are rounded-2xl. Smaller elements like inputs use rounded-xl or rounded-lg.
TONE OF VOICE
How do we speak?
Character
- Energetic — like you just came out of a festival, but still clear enough to find your way.
- Personal — you, your crew, your moments. No anonymous user.
- Inclusive — festival, concert, club night; everyone who loves live is welcome.
- Tangible — we make digital memories feel real, without forcing poetry.
Do's & don'ts
Do
“Your event life. One journey.” — short, vivid, personal.
Don't
“We offer an end-to-end integrated event memory solution.” — too corporate, too abstract.
Do
“From ticket to memory.” — concrete and ours.
USAGE GUIDELINES
Keep Stuubs consistent.
These guidelines help developers, designers and partners apply the Stuubs brand consistently across every touchpoint. Questions about logo usage, colour values, a print job or an integration? Get in touch.