Navigation and footer
Public Onstage nav, Backstage top bar, and footers — desktop and mobile. Yellow square links to /music on Backstage tools.
Onstage top navigation · desktop
Onstage top navigation · mobile
Backstage top bar
Public footer · desktop
Three stages in Soho. Live music every week.
Backstage footbar · desktop and mobile
A stage, not a poster.
Team-facing brand home for building Backstage tools, Onstage pages, show listings, decks and production assets. Compact, useful, and easy to scan, with the richer component examples kept where they help production.
Colour With Intent
Each layer carries a role. Foundation structures. Yellow signals. Purple accents. Stages contextualise. None of them compete.
The Full Palette
Locked from the 26 Soho Brand Guidelines PDF. Pages stay black; swatches, photos and event marks carry the saturation.
Three Type Voices
Inter for display titles. Rethink Sans for reading. Special Gothic for caps labels and overlines.
The room holds two hundred. The mic is live at seven. The band hits at eight. The club breathes below, and the kitchen sends up bread on white plates.
Eight-Point Rhythm
Base unit 8px. Rhythm does the work a line would. There are no horizontal rules in this system.
Small, Bold, Rounded
Pill-rounded. Weight 700. Off-white primary. Gentle lift on hover. Four variants cover the whole product.
Soft-Rounded Fields
Purple focus ring. Strong weight on labels. Rounded to match the button family.
Pills With Patience
Slow fade on hover. Default runs brighter for legibility. Stage-specific colours for venue context only.
Quiet Emphasis
Thin vertical colour bar. Small Special Gothic label in light grey above the paragraph.
Highlights, icons, decorative lines, logomarks. Stage and discovery palettes carry programming variety. They do not define the brand.
The purple accent flags content that belongs to the upstairs bar: cocktails, members, after-hours programming.
Aqua is used for editorial asides and footnotes inside long-form journal posts and archive entries.
Never use Soho Yellow as a page background. Never centre body copy. Never introduce horizontal rules.
Inline Colour, Used Sparingly
The night begins with a brand signal, widens into the main room, and opens again upstairs in Oscar's Bar. The kitchen runs until midnight, the last set lands around 23:45, and the door closes when the room says so.
Line, Monochrome, Consistent
Stroke icons at 1.5px. Never filled. Hover reveals white. Use at 24px or 32px only.
Full-Page Hero Component
The Hero Card is the full-width top-of-page component. Animated radial gradient backdrop, dot pattern overlay, large display title with staggered word rise, subtitle, and two CTA buttons.
Live Music.
Every Night.
Three stages. Hundreds of artists. One neighbourhood.
Gradient Swatches and Feature Panel
Gradient Swatches are the approved colour blends for show cards, hero backdrops and artwork. The Feature Panel is a gradient-bordered content block used for CTAs and featured content.
A Stage
in Soho.
The flagship gradient. Purple deepens into pink, with a cool aqua edge. Used on marquee heroes and membership artwork.
linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy))
Used on Feature Panel border and Membership Card featured tier.
Show Card: Portrait & Landscape
Three formats: landscape (16:9), wide (21:9), portrait (2:3). Four background types. Three content levels. Full card is always the link.
NEWLY ADDED
OSCAR'S PICK
MEMBERS ONLY
Listing Row
Stage colour on spec labels (DOORS, SHOWTIMES, STAGE) and as a 4px bottom line. Values stay white. No left-border highlight.
Saturday Selector
Membership Card: Tiered Pricing
Featured tier uses a 4px gradient border. Most Popular pill sits below the price. Checklist reads as information, not interactive.
- Priority Booking
- Oscar's Bar Access
- Guest Discount
- Member Rooms
- Unlimited Events
Photography Brings the Colour
Images carry the saturation so the page doesn't have to. Arrow links to full gallery. Slide to browse.
