Everything that makes Outpass look, sound, and move like itself.
The complete brand architecture in production code: the Stub, Fraunces variable type, nocturnal color tokens with computed contrast, motion choreography, and the living copy bank.
The Stub & Wordmark
The symbol is "the Stub": a vertical ticket stub with a 3:5 aspect ratio, 22% corner radius, a crescent-moon notch rising out of the top edge, and 7 semicircular perforations on the right edge. The wordmark is set in Fraunces Italic with negative tracking.
Drop (0–400ms spring) → Crescent rise (400–1200ms curtain) → Perforation tear (40ms stagger) → Wordmark write-on (1500–2400ms)
Clear space is 1 × the notch diameter (n) on all sides. Gap = 0.5 × n.
Official Variants
Minimum Size Limits
| Variant | Digital Screen | Note | |
|---|---|---|---|
| Stub symbol | 16 px tall | 6 mm tall | Below 24 px, perforations drop (Stub Simple) |
| Horizontal lockup | 96 px wide | 25 mm wide | Gap remains 0.5 × notch diameter |
| Wordmark only | 64 px wide | 18 mm wide | Always Fraunces Italic, weight 600 |
Logo Misuse (Never)
Do not rotate or use horizontally
The Stub must always stand vertical (3:5 ratio).
No gradients in the crescent or extra stars
The crescent is an optical void cutout, not an illustration.
Do not set upright or in Satoshi
Wordmark is strictly Fraunces Italic 600, SOFT 100, WONK 1.
Do not put Marigold on Pearl
Fails contrast. On light, use Aubergine Night Stub.
No drop shadows or neon glows
Except the approved circular app icon backlight.
Do not change perforation count
Exactly 7 semicircular bites, or 0 in Stub Simple.
No busy photos without scrim
Always place a 60% Aubergine scrim over photography.
Do not squeeze or stretch
Aspect ratio must remain strictly 3:5.
Nocturnal Palette & Tokens
Dark (Night) is the default theme for all app surfaces. Pearl is used on the editorial website and print. Late mode automatically dims the UI after 23:00 sim clock time.
Signature Gradients
radial-gradient(120% 80% at 50% 0%, #2A1648, #1B0F2E)
App background and hero backdrop
radial-gradient(60% 60% at 50% 40%, rgba(255,182,39,.35), transparent 70%)
Behind the Stub and success moments
conic-gradient(from var(--foil-angle), #FFB627, #FF5FAE, #7FD1FF, #2BD9A0, #FFB627)
Holopass interactive gyro sweep
Token Matrix with Live Contrast
Ratios computed in code via WCAG 2.1 relative luminance algorithms.
| Token | Role | Night (Default) | Pearl (Light) | Late (23:00+) | Live Contrast | Notes |
|---|---|---|---|---|---|---|
bg | App background | #1B0F2E | #F6EFE6 | #110921 | — | Aubergine Night / Pearl / Midnight Late |
surface | Cards, sheets | #251640 | #FFFFFF | #1A1030 | — | Primary content surfaces |
surfaceRaised | Modals, pressed cards | #33205A | #EFE5D8 | #231540 | — | Elevated dialogs & menus |
border | Dividers, outlines | #4A3478 | #DCCFBE | #342456 | 1.8:1Fail | Decorative, subtle separators |
text | Primary text | #F6EFE6 | #1B0F2E | #E6DDD2 | 15.9:1AAA | Pearl on Night (15.9:1 AAA) |
textMuted | Secondary text | #B9A8D6 | #5E4E78 | #A596C2 | 8.3:1AAA | Lilac on Night (8.3:1 AAA) |
primary | CTAs, key highlights | #FFB627 | #FFB627 | #E3A11F | 10.4:1AAA | Marigold. Aubergine on Marigold is 10.4:1 |
onPrimary | Text on primary | #1B0F2E | #1B0F2E | #110921 | 10.4:1AAA | Night text on Marigold (10.4:1 AAA) |
primaryInk | Marigold-family text on light | #FFB627 | #8A5A00 | #E3A11F | 10.4:1AAA | 5.2:1 AA on Pearl |
accent | Live, Huddle, Fair Queue | #E6007E | #E6007E | #C2006B | 4:1AA Large | Hot Pink. Large text/UI only (4.0:1 on Night) |
accentText | Pink text on dark | #FF5FAE | #B0005F | #E85A9F | 6.5:1AA | 6.5:1 AA on Night |
success | Paid, valid, available | #2BD9A0 | #0B7F55 | #26C290 | 10:1AAA | Jade / Forest. Gate valid: 5.0:1 on white |
warning | Few left, wrong gate | #FF8A3D | #B45309 | #E67A33 | 7.8:1AAA | Amber / Ochre alert states |
danger | Errors, invalid tickets | #FF4D6D | #C8102E | #E6445F | 5.7:1AA | Gate invalid: 5.9:1 on white |
muted | Disabled, sold seats | #5B4A7A | #B7A99A | #4A3C66 | — | Not for readable text |
seatPrime | Seat tier: Prime | #FFB627 | #FFB627 | #E3A11F | — | Paired with text legend |
seatRecliner | Seat tier: Recliner | #FF5FAE | #FF5FAE | #E85A9F | — | Paired with text legend |
seatClassic | Seat tier: Classic | #7FD1FF | #7FD1FF | #68BAE6 | — | Sky Blue paired with text legend |
Editorial Nocturne
A pair designed to evoke late-night magazine editorialism: Fraunces (variable optical sizes, warm italics) contrasted against Satoshi (clean geometric grotesque for precise UI affordances), grounded with JetBrains Mono for ticket serials and codes.
Fraunces Variable
Google Font with variable axes: opsz 144, wght 400–700, SOFT 100, WONK 1. Used for event titles, magazine covers, and the wordmark.
"The night is young in Bandra."
opsz 72 · wght 600 · SOFT 100 · WONK 1
Satoshi Grotesque
Fontshare geometric sans-serif self-hosted locally (400, 500, 700, 900). High legibility across mobile viewports, buttons, chips, and tabular bill summaries.
Book 2 seats · ₹799 all-in
weights 400 / 500 / 700 / 900 · 0 to +2% tracking
JetBrains Mono
Weight 500. Used for ticket passcodes, booking codes, seat coordinates (G-11), gate counters, and sim clock.
OUT-7K2QX · G-11 · AUDI 3
500 medium · +4% tracking · tabular figures
Mobile App Type Scale
| Token | Family & Weight | Size / Leading | Tracking | Specimen |
|---|---|---|---|---|
| display-xl | Fraunces 600 Italic (opsz 144) | 44 / 46 px | -2% | Tonight in Lower Parel |
| display-l | Fraunces 600 (opsz 96) | 34 / 38 px | -1.5% | Monsoon Protocol (Audi 3) |
| display-m | Fraunces 500 (opsz 48) | 26 / 30 px | -1% | Late Night Dining Pick |
| title-l | Satoshi 700 Bold | 20 / 26 px | -0.5% | Confirm your table reservation |
| title-m | Satoshi 700 Bold | 17 / 22 px | 0 | Saffron Tide · Seafood & Coastal |
| body-l | Satoshi 500 Medium | 16 / 24 px | 0 | Your pass unlocks 10% back in Encores on your final bill. |
| body | Satoshi 400 Regular | 14 / 20 px | 0 | Gate opens 60 minutes before showtime. Live QR rotates every 20s. |
| label | Satoshi 700 Bold | 13 / 16 px | +2% | PAY ₹1,368 · EARN 136 ENCORES |
| caption | Satoshi 700 Uppercase | 11 / 14 px | +8% | LIVE · GIG · BANDRA |
| mono | JetBrains Mono 500 | 13 / 16 px | +4% | OUT-7K2QX · G-11 |
Editorial Website Specimens
Every city has two versions of itself. There's the daytime one, of commutes and calendars, and the one that switches on after dark, when a friend texts "you up for something?" Outpass exists for the second city.
"We curate like a magazine, price like a friend, and ticket like a fan."
Cultured, Sociable, Mischievous
The friend who always knows a place, and never makes you feel like you don't. We speak like a trusted host, not a pushy hawker.
"Every city has two versions of itself. There's the daytime one, of commutes and calendars, and the one that switches on after dark, when a friend texts 'you up for something?' Outpass exists for the second city.
We started with a simple frustration. Planning a great night out in India meant four apps, a WhatsApp poll that nobody closed, a fee that appeared at the very last step, and one friend fronting the whole bill. The night itself was great. Getting there wasn't.
So we built a pass for the whole evening. Pick a table, a film, a gig, or all three. Let your friends vote. See the real price upfront, and pay your share at the table. Get something back for showing up.
We curate like a magazine, price like a friend, and ticket like a fan. Because the best part of any day should be the part where you go out."
Voice Principles & Guidelines
A host, not a hawker
We welcome you in. We never shout deals at you.
"Saffron Tide has a quiet 7 pm table. 20% off if you're early."
"🔥🔥 MEGA DEAL!! FLAT 20% OFF!!! BOOK NOW!!!"
Say the price out loud
Every price is final and all-in upfront, and we are proud of it.
"₹799 all-in. That's 2 tickets plus our ₹59 fee, GST included."
"₹738 + fees and taxes added at final step"
Night-owl wit, never snark
Warm and cheekily observant. Nobody is ever the butt of the joke.
"4 of 5 voted. Kabir is 'thinking about it'. Nudge him?"
"Kabir is ghosting you lol"
Everyone's invited
Plain English with Indian warmth. Gender-neutral and budget-neutral.
"Solo? Great seats for one are easier to find. Row F, seat 9 is waiting."
"Table for one? 😢"
The Canonical 39 Strings
Every string in the copy bank is tested and authoritative. No placeholders, no lorem ipsum, and no deviation.
"Your pass to tonight."
Splash & App opener
"Which city are we going out in?"
City picker
"Pick your vibes. We'll handle the rest."
Vibe selector
"Enter the 4-digit code we sent to +91 90000 12345"
OTP prompt (demo: 2468)
"You're in. Let's find tonight."
Welcome confirmation
"Book a table"
Dining detail
"Book 2 seats · ₹799"
Movie showtime bar
"Pick best seats for me"
Auto-seat selection
"Start a Huddle"
Group plan launcher
"Send to the group"
Huddle invite
"Pay ₹1,368 · earn 136 Encores"
TablePay bill action
"Join the Fair Queue"
Big event on-sale
"Show my Holopass"
Passes detail entry
"Passback at face value"
Face value resale/return
"Make it a Double Bill"
Add dining to show
"No plans yet. The night is young."
Passes tab, no tickets
"No Huddles yet. Tonight's better with backup."
Huddle list
"Nothing here under ₹500 tonight. Try tomorrow, or widen the map."
Filtered feed
"No Encores yet. Pay your next bill with TablePay and get 10% back."
Encores wallet
"No one's waiting. Enjoy the calm."
Host tablet waitlist
"That seat just got taken. We've picked the next best one next to your group."
Seat contention
"Payment didn't go through. No money left your account. Try again?"
UPI failure
"This code expired. Open your live Holopass and scan again."
Gate scanner retry
"We couldn't reach the venue. Your booking is safe; we'll confirm in a minute."
Network retry
"You're offline. Your Holopass still works, because the code lives on your phone."
Offline banner
"Table's yours. Saffron Tide · Fri 7:30 pm · 4 guests."
Table booked toast
"Seats locked. You have 8:00 minutes to pay."
Seat hold countdown
"Paid! 136 Encores are on their way."
Payment success banner
"It's a date. Little Lisbon wins, 4 votes to 1."
Huddle reveal result
"Passback listed. If someone buys it, you get ₹3,324 back."
Resale listed (face - 5%)
"Friday's Huddle: 3 of 5 have voted. Voting closes at 6 pm."
Voting reminder
"You're in! The Fair Queue let you through. Seats are held for 8 minutes."
Queue through
"Doors in 1 hour. Gate 3 · Harbourfront Arena. Your Holopass is ready."
Event alert
"Kabir paid his share (₹1,368). Just Ishaan left."
Split update
"A 7 pm table opened up at Moonlit Terrace. It's yours if you want it."
Notify table opening
"Late mode's on. Easy on the eyes, easy on the night."
Toast at 23:00
"Everyone who joins before 12:00 gets a random place. Arriving early doesn't help, so grab a chai."
Queue explainer
"You're #4,212 in line · about 6 min"
Queue position
"Please don't refresh. Your place is saved to this device."
Queue protection
Hindi UI Chrome Dictionary
Brand and feature names remain in English (Outpass, Huddle, Fair Queue, TablePay, Encores). Only UI chrome affordances translate.
| Key | English | हिन्दी (Devanagari) | Context |
|---|---|---|---|
| tab.tonight | Tonight | आज रात | Bottom Navigation |
| tab.dining | Dining | डाइनिंग | Bottom Navigation |
| tab.movies | Movies | फ़िल्में | Bottom Navigation |
| tab.events | Events | इवेंट्स | Bottom Navigation |
| tab.passes | Passes | पासेज़ | Bottom Navigation |
| cta.book | Book | बुक करें | Primary CTA |
| cta.pay | Pay | भुगतान करें | Primary CTA |
| label.allIn | all-in | सब मिलाकर | Pricing badge |
| toast.paid | Paid! | भुगतान हो गया! | Success toast |
The Curtain Rises
Things enter from below with stage weight. Light is the reward (warm glows and foil sweeps rather than bouncy pops). Late mode slows all durations by 1.25× and removes non-essential motion.
Interactive Signature Demos
Holopass Shimmer
Move mouse over card to test 3D tilt (±12°) and angle sweep.
Stub Tear
Tears along micro-perforation line on payment success (420 ms).
Seat Ripple
Auto-picked seats illuminate from center outwards (60 ms stagger).
Motion Token Specification
| Token | Value | Role & Usage |
|---|---|---|
| ease (curtain) | cubic-bezier(0.22, 1, 0.36, 1) | Default enter/move: stage curtain rising |
| easeExit | cubic-bezier(0.55, 0, 1, 0.45) | Dismissals & bottom sheet drop-downs |
| easeShimmer | cubic-bezier(0.37, 0, 0.63, 1) | Foil angle sweep & idle card drift |
| durationFast | 160 ms | Taps, toggles, chips, micro-states |
| durationBase | 280 ms | Sheets, modal overlays, page transitions |
| durationSlow | 520 ms | Reveals, ticket flips, card hero expansions |
| durationReveal | 900 ms | Huddle vote reveal & Holopass mint |
| spring (encore) | { stiffness: 380, damping: 28, mass: 0.9 } | Seat pop, avatar fly-in, CTA press feedback |
| springSoft | { stiffness: 120, damping: 18 } | Tilt smoothing & gyro dampening |
Custom Brand Icons & Lucide Parity
All brand icons are drawn on a strict 24 px grid with a 1.75 px baseline stroke, matching lucide-react in optical weight, terminal caps, and corner radii.
Side-by-Side Stroke-Weight Parity
Custom Outpass SVG icons alongside standard Lucide icons on the same 24px grid.
The 11 Custom Brand Icons
Outpass logo stub with crescent notch
Crescent moon motif
Three overlapping circles group plan
Coin with a crescent cut-out
Auditorium / cinema standard seat
Plush VIP recliner with footrest
Fabric/tyvek band with crimp lock
Two stacked stubs offset by 15°
Dotted line with shuffle arrow
Stub with face-value return arrow
Table stand QR code with ₹ symbol
Mockup Gallery (24 Assets)
All 24 physical and environmental touchpoints specified in the Outpass brand & physical branding specs. Rendered as high-fidelity structured brand tiles ready for Phase 05 photography and 3D renders.
Woven Fabric Wristband · Fan Pit
350 × 15 mm polyester satin, woven Hot Pink ground, aluminium crimp lock
Woven Fabric Wristband · Skyline Lounge
350 × 15 mm polyester satin, Marigold ground with Aubergine weave
Dye-Sub Wristband · Moonrise Club
Aurora gradient satin (Marigold → Pink → Cyan) + optional NFC slider
Tyvek Day Wristband · Saturday
254 × 25 mm tamper slits, 1-colour flexo Marigold + sequential numbering
Tyvek Day Wristband · Sunday
254 × 25 mm tamper slits, Hot Pink flexo, void on removal
Physical Collector Ticket with Stub
200 × 70 mm (150mm body + 50mm stub), 400 gsm Ebony board, Gold + holo foil
VIP Ticket Sleeve (Dieline)
215 × 80 mm sleeve, crescent thumb-cut (r=12mm), 350 gsm black board
Backstage Pass · All Areas
A6 105 × 148 mm PVC, holographic micro-crescent laminate, Marigold tier
Backstage Pass · Artist
A6 PVC pass, 28mm Fraunces italic tier, Hot Pink, QR to artist schedule
Backstage Pass · Crew
A6 PVC pass, Pearl ground on Aubergine, photo window, slot punch
Backstage Pass · Press
A6 PVC pass, Lilac #B9A8D6 tier, media barcode accreditation
Safety Breakaway Lanyard
20 × 900 mm dye-sub, repeating OUTPASS CREW + 4mm Marigold edge stripe
Stadium Entry Arch (6.0m × 4.5m)
Box truss clad in tensioned fabric, YOU'RE IN in Fraunces, warm 2700K LED
Gate 3 A-Board Wayfinding
600 × 1200 mm double-sided Sunboard, Holopass live notice
Wayfinding Fence Banners
Hot Pink 1200 × 400 mm PVC mesh: 'Fan Pit → Gate 1 · 4 min'
Step-and-Repeat Press Backdrop
2.4 × 2.4 m stretch fabric on pop-up frame, 45° offset diagonal grid
Photo-Booth Giant Holopass Frame
1200 × 900 mm handheld frame with right-edge perforation bites & holo film
TablePay Restaurant Table Tent
100 × 150 mm triangular tent, 350 gsm matte + spot UV on table QR
Restaurant Door Sticker
150 mm circle, clear vinyl, reverse-printed for inside-glass mounting
Outpass Crew Staff T-Shirt
240 gsm combed organic cotton, Midnight Aubergine, Marigold screen print
Heavyweight Midnight Hoodie
450 gsm french terry, embroidered mini Stub on chest, tonal back print
Screen-Printed Canvas Tote
380 × 420 mm heavy canvas in Pearl, 2-colour risograph-style gig print
City Billboard · Bandra Reclamation
40 × 20 ft nocturnal LED billboard, tungsten warm lighting grade
Metro Station Series · Lower Parel
4-sheet sequence along concourse, 'Where are we going tonight?'