Brand guidelines
సందడి (sandadi): the lively buzz of people gathering. A festival crowd, a full street, a plan coming together.
Em plan? Find your people.
Who we are
One idea runs through everything: a city feels alive when people show up for each other.
Warm, not corporate
We sound like the friend who always knows the plan, not like a ticketing company.
Local first
Hyderabad and Vizag first. Telugu is part of the product, not a translation layer.
Easy to trust
Playful in the words, plain and exact about money, refunds and safety.
Logo
Three overlapping circles: a group of people, three opacities, one crowd. The wordmark is the name in lowercase Bricolage Grotesque ExtraBold.
Primary lockup, on charcoal
One-colour black, on white
One-colour black, on ember
Clear space and size
Keep free space around the logo equal to the height of one circle. The mark alone may go as small as 16 px (favicon); the full lockup should not go below 96 px wide.
App icon
The mark in lifted ember on a charcoal tile. A separate full-bleed version is used where the phone applies its own rounded mask.
Downloads
- Do: Use the ember mark on charcoal, or the one-colour versions on white or ember.
- Do: Keep the circles' three opacities (100%, 80%, 55%) exactly as drawn.
- Don't: Don't recolour the mark, outline it, add shadows or gradients, or rotate it.
- Don't: Don't set the name in capitals or in another typeface, and don't place the mark on busy photos without a glass panel behind it.
Colour
Charcoal black is the canvas, ember is the single voice, lime is a rare spark. There is no light theme.
- 17.3:1 · AAACharcoal#111113 · rgb(17, 17, 19)
Page background. Always the base.
- 15.6:1 · AAASurface#1C1C20 · rgb(28, 28, 32)
Solid fallback for glass; opaque panels.
- 6.4:1 · AAEmber#FF6A45 · rgb(255, 106, 69)
Primary actions, links, the logo mark. One main ember button per screen area.
- 7.7:1 · AAAEmber, hover#FF8766 · rgb(255, 135, 102)
Hover and pressed states of ember.
- 17.3:1 · AAAInk#F5F5F7 · rgb(245, 245, 247)
Headlines and body text.
- 10.6:1 · AAAInk 2#C1C1CB · rgb(193, 193, 203)
Secondary text, descriptions.
- 6.6:1 · AAInk 3#9898A4 · rgb(152, 152, 164)
Captions and hints only.
- 13.9:1 · AAALime#C6F135 · rgb(198, 241, 53)
A highlight, one or two per screen: Free, ranks, native script. Always with dark text.
Category colours
Each kind of event has its own colour and icon so the feed scans at a glance. Gradients are for covers; the soft tint and bright text are for chips.
- Food & Beverage#F59E0B → #F97316
- Social & Community#EC4899 → #F43F5E
- Learning#3B82F6 → #6366F1
- Music & Performance#8B5CF6 → #D946EF
- Fitness & Outdoors#10B981 → #84CC16
- Tech & Startups#06B6D4 → #3B82F6
| Sample | Use | Ratio | WCAG |
|---|---|---|---|
| Em plan? | Body text on charcoal | 17.3:1 | AAA |
| Em plan? | Secondary text on charcoal | 10.6:1 | AAA |
| Em plan? | Captions on charcoal | 6.6:1 | AA |
| Em plan? | Body text on glass | 15.1:1 | AAA |
| Em plan? | Captions on glass | 5.8:1 | AA |
| Em plan? | Button label on ember | 6.4:1 | AA |
| Em plan? | Ember text and links on charcoal | 6.6:1 | AA |
| Em plan? | Text on lime | 13.9:1 | AAA |
- Do: Use ember for the one thing you want someone to do next.
- Do: Pair colour with an icon or words, so meaning never depends on colour alone (errors, success, categories).
- Don't: Don't use ember for large background fills, or put ember text on ember-tinted glass.
- Don't: Don't introduce a light theme, pure black (#000) backgrounds, or new accent colours.
Typography
Two typefaces. Bricolage Grotesque has the personality; Inter does the reading. Telugu script uses Noto Sans Telugu.
Display · Bricolage Grotesque
Aa
Em plan, Hyderabad?
Headlines, prices, big numbers, the wordmark. Weights 700 and 800, tight tracking.
Text · Inter
Aa
Runs, jams, supper clubs and workshops by people from your own city.
Body, forms, labels, captions. Body text never below 16 px on inputs (it stops iOS zooming).
Prices, counts, dates and times use tabular figures so digits don't jiggle as they change.
Liquid glass
Surfaces are smoked, translucent glass over charcoal with a faint colour glow behind. Light catches the top edge. Nothing is opaque unless it has to be legible.
.glass / .card
Content panels. 6% white, 24 px blur, bright top edge.
Controls
- Do: Capsules for anything tappable; 28 px or larger corners for panels. Targets are at least 44 px.
- Do: Hover lifts a card 4 px and a soft highlight follows the pointer; a press squashes to 96% and springs back. Motion always has a reason.
- Do: Treat edge refraction (Chromium only) as a bonus. Layouts and legibility must work with plain blur.
- Don't: Don't stack glass on glass more than two deep, or put body text on a glass layer that sits over a bright photo.
- Don't: Don't add hard offset shadows, outlines or tilted stickers: that was an earlier look and has been retired.
People who choose reduce transparency or increase contrast, and browsers without blur support, automatically get solid charcoal surfaces. Design every screen so it still works that way.
Voice: Tinglish
Telugu and English, the way friends actually text. Playful where nothing is at stake; plain where money, safety or a decision is. Always keep the English beside the Telugu so nobody is ever lost.
| Where | We say | It means |
|---|---|---|
| Home hero | Em plan, Hyderabad? | What's the plan, Hyderabad? |
| Search | Em kavali? Events, venues, vibes | What do you want? |
| Success | You're in, booking ayyindi! | Your booking is done. |
| Sold out | Housefull | No spots left. |
| Empty city | Inka em ledu in Vizag | Nothing here yet. |
| Not found | Ikkada em ledu | There's nothing here. |
| Offline | Net ledu | No internet. |
| Reviews | Ela jarigindi? How was it? | How did it go? |
Be playful here
Heroes, search, empty and error states, success moments, sold out, reviews, marquees, share messages.
Stay plain here
Prices, payments, refunds, cancellations, legal pages, form errors, WhatsApp and push messages, anything a person must act on.
- Do: Short sentences. Verbs first. "Join for free", "Reserve spot", "Cancel and refund".
- Do: Have a native Telugu speaker review any new Telugu line before it ships.
- Don't: Don't explain a joke, stack three slang words in a row, or use Telugu where the English alone would be clearer.
- Don't: Don't use emoji as icons or in buttons. Use the icon set.
Glossary
- em plan
- what's the plan
- em kavali
- what do you want
- inka em ledu
- nothing yet
- ikkada em ledu
- nothing here
- net ledu
- no internet
- ayyindi
- it's done
- raa
- come (to a friend)
- mana
- our
- ela jarigindi
- how did it go
- housefull
- sold out
Do and don't
The short version, for anyone building a screen, a campaign or a post.
Do
- Do: Lead with one clear action per screen, in ember.
- Do: Show real photos or a generated category cover. Never an empty grey box.
- Do: Keep text at 4.5:1 contrast or better, on glass too.
- Do: Respect reduced motion. The marquee and entrance effects must stop.
- Do: Write times in Indian time and prices in rupees with tabular figures.
Don't
- Don't: Don't use the name "Tribe", or any other competitor's tagline.
- Don't: Don't promise "guaranteed" refunds or payouts beyond what the policy pages say.
- Don't: Don't use lime for body text, or more than two highlights on a screen.
- Don't: Don't mix the Telugu joke into error messages that tell someone what to fix.
- Don't: Don't add a light mode "just for one page".
Source of truth in the codebase: src/lib/brand.ts (names), src/app/globals.css (tokens and glass), design-system/sandadi/MASTER.md (rules). This page is rendered from the same values.