Brand guidelines
తెలుగు ట్రైబ్ (telugutribe): the home for local clubs, weekend gatherings, and on-ground crew. A club meeting, a full street, a plan coming together.
Find your tribe. Every weekend.
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
Vijayawada first, the city we know best. 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 black
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 black or paper, 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 solid panel behind it.
Colour
Two themes, one system. Black (dark) and warm paper (light) are the canvases, ember is the single voice, lime is a rare spark. Both follow the device setting unless the person picks one.
Dark theme
- 18.7:1 · AAABlack#0C0C0C · rgb(12, 12, 12)
Page background. Always the base.
- 17.0:1 · AAASurface#181818 · rgb(24, 24, 24)
Cards, menus and inputs.
- 6.7:1 · AAEmber#FF6A45 · rgb(255, 106, 69)
Primary actions, links, the logo mark. One main ember button per screen area.
- 8.1:1 · AAAEmber, hover#FF8766 · rgb(255, 135, 102)
Hover and pressed states of ember.
- 18.7:1 · AAAInk#FAFAF6 · rgb(250, 250, 246)
Headlines and body text.
- 11.2:1 · AAAInk 2#C4C4BE · rgb(196, 196, 190)
Secondary text, descriptions.
- 7.1:1 · AAAInk 3#9C9C96 · rgb(156, 156, 150)
Captions and hints only.
- 16.2:1 · AAALime#CCFF00 · rgb(204, 255, 0)
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 black | 18.7:1 | AAA |
| Em plan? | Secondary text on black | 11.2:1 | AAA |
| Em plan? | Captions on black | 7.1:1 | AAA |
| Em plan? | Body text on a card | 17.0:1 | AAA |
| Em plan? | Captions on a card | 6.4:1 | AA |
| Em plan? | Button label on ember | 6.7:1 | AA |
| Em plan? | Ember text and links on black | 6.9:1 | AA |
| Em plan? | Text on lime | 16.2:1 | AAA |
Light theme
Same roles, different values. Ember is deepened so it still reads as text and links on paper, and the button label flips to white. Lime, the category gradients and the logo mark keep their hues.
- 17.4:1 · AAAPaper#F5F3EE · rgb(245, 243, 238)
Page background in light.
- 19.3:1 · AAASurface#FFFFFF · rgb(255, 255, 255)
Cards, menus and inputs.
- 5.3:1 · AAEmber, light#D02806 · rgb(208, 40, 6)
Primary actions, links and the mark on paper.
- 17.4:1 · AAAInk, light#0E0E0E · rgb(14, 14, 14)
Headlines and body text on paper.
| Sample | Use | Ratio | WCAG |
|---|---|---|---|
| Em plan? | Body text on paper | 17.4:1 | AAA |
| Em plan? | Secondary text on paper | 10.2:1 | AAA |
| Em plan? | Captions on paper | 5.9:1 | AA |
| Em plan? | Captions on a tinted panel | 5.3:1 | AA |
| Em plan? | Body text on a card | 19.3:1 | AAA |
| Em plan? | Captions on a card | 6.5:1 | AA |
| Em plan? | Button label on ember | 5.3:1 | AA |
| Em plan? | Ember text and links on paper | 4.7:1 | AA |
| Em plan? | Ember text on its soft tint | 4.6:1 | AA |
| Em plan? | Success text on its tint | 4.8:1 | AA |
| Em plan? | Error text on its tint | 5.3:1 | AA |
- 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 panels.
- Don't: Don't use pure black (#000) or pure white page 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, Vijayawada?
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.
Surfaces
Flat and solid, like a printed poster. Panels have a thin ink outline, and anything that lifts leaves a hard offset shadow, like a sticker peeling off paper. Nothing is translucent.
.card
Content panels. Solid surface, thin outline. Hover one to see the lift.
.invert-panel
A section on the opposite colour. One per page at most.
Controls
- Do: Capsules for anything tappable; 28 px or larger corners for panels. Targets are at least 44 px.
- Do: Hover steps a card or button up and to the left and leaves a hard ink shadow. A press puts it back down.
- Do: Use the ember block (
.mark) for one word in a headline, and the lime sticker once or twice per screen. - Don't: Don't add blur, translucency, gradients on panels or soft glows: that was an earlier look and has been retired.
- Don't: Don't give resting cards the offset shadow. It is for hover, menus and the phone tab bar only.
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, Vijayawada? | What's the plan, Vijayawada? |
| 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 Vijayawada | 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 cards 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 theme one page differently: every colour comes from a token, so both themes stay in step. Check new screens in light and dark.
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.