Palette.
Eight swatches. Navy leads. Pink accents. Cream and light grey do the heavy lifting on backgrounds. Click any chip to copy its hex.
Typography.
Archivo Black for display. Archivo (regular through bold) for everything else. Display type is uppercase with tight tracking. Nav links and CTAs are lowercase. Pink as highlight, never for paragraphs.
wherever you want it.
Voice & tone.
Confident, declarative, a little cheeky. Like the friend who books the karaoke pod before asking if anyone wants to. Short sentences. Specific numbers. Lowercase CTAs because shouting is for the pod, not the button.
- "find a pod near you"
- "45,000+ songs. no app download."
- "walk in. pin. sing."
- "soundproof means only your group hears you."
- "book in 60 seconds."
- concrete numbers (50+ venues, £12 from, 4.8★)
- "The UK's premier karaoke experience"
- "Unleash your inner star"
- "Elevate your event with cutting-edge solutions"
- vague superlatives without proof
- sentences over 20 words
- emoji-as-punctuation in body copy
Components.
A small, reusable kit. Primary CTA is always pink. Secondary is ghost — navy border on light, white border on dark. Chips carry location or status. Fact strips replace fluff.
Ornaments.
Diagonal line patterns, masked into circular blobs, live in section corners. Low opacity. Never interactive. They punctuate — they don't decorate. Always positioned absolute, clipped by section overflow.
Section rhythm.
Pages alternate between navy and light sections for pace. Cream has one role: find-a-pod (to match location pages). Never two consecutive navy sections without a pink accent separator.
Partner rule.
Brand pages (Slug & Lettuce, Director's Box, Be At One, Swingers) keep the SingPods system as host. Only three elements tint partner-aware. Everything else stays SingPods.
Golden rule
Don't re-skin the page per partner. A Slug & Lettuce page should still feel like SingPods, just hosted at the venue. The SingPods brand stays the constant — partners are the guests.
Implementation.
Everything ships as scoped Webflow Embeds. One wrapper class per embed block. Mobile-first. 50k char limit per embed — split files as needed.
Wrapper scope
Every embed starts with .sp-home or .sp-home2. Styles scope inside the wrapper so nothing leaks to the rest of the Webflow site.
Image fallbacks
Every image placeholder has both aspect-ratio and min-height. Webflow Designer collapses bare aspect-ratio blocks.
Hero video stack
Video at z-0 → navy tint (mix-blend-mode:multiply) at z-4 → scanlines z-5 → play button / LIVE badge z-6.
Mobile pivot
At ≤900px hero reorders (video on top), sticky CTA appears pinned to bottom with safe-area-inset-bottom.