Hop on. Skip the jam.
India's bike-taxi-first mobility brand. Built with the fearless energy of a sneaker label, anchored by upfront Fare Lock, Clean Lid helmet hygiene, and genuine partner respect.
Logo & Construction
Built on a strict 12 × 12 grid. The lowercase h integrates a 1-unit stem, a 5-dot parabolic hop arc, and a map pin landing on the baseline.
Signature Sting
1. Stem draws up (0–0.4s) → 2. Arc dots pop (0.4–1.1s) → 3. Pin drops & squashes (1.1–1.4s) → 4. Wordmark slides in (1.4–2.0s) → 5. Acid flash hold (2.0–2.4s).
3-Dot Small Variant
To prevent dot merging on low-density displays, symbols under 24 px automatically drop to 3 dots.
Screen & Print Floors
Wheel Notches & Motion Cut
The two ps have their bowls cut by a 45° wheel-notch. The r terminal is cut flat to express forward velocity.
Logo Misuse (Never Do)
Never connect the dotted arc into a continuous solid line.
Never use more or fewer than 5 dots above 24 px (3 dots only below 24 px).
The logo must always sit flat on the baseline; no shearing or artificial motion blur.
Always set hoppr in lowercase Space Grotesk Bold.
Fails WCAG contrast (2.1:1). Always use the Night variant on dark surfaces.
Acid on white has a 1.2:1 contrast ratio. Never use Acid as text or logo on light backgrounds.
Never apply bevels, drop shadows, or gradient fills to the symbol or wordmark.
Never combine with competitor-style taxi yellow to protect Hoppr's distinct identity.
Colour Tokens & Roles
Rooted in Electric Violet (#7B2FF7) and Acid Green (#B8FF3C), anchored by Asphalt (#121212) and Chalk (#F2F2F2). Every colour is tokenized and tested for strict WCAG AA contrast compliance.
Core Palette (18 Tokens)
Electric Violet · Primary brand, CTAs, route line, Match Pulse
Pressed state, text on violet-100
Primary in dark mode, focus rings
Selected tile background, soft chips
Acid Green · Highlight, 'live' indicators, Jam Skipped, arc dots, captain accent
Acid on light when used as a fill border (never as text)
Asphalt · Text on light, dark surfaces
Dark raised surface
Dark cards, sheets
Chalk · Light alternate surface, text on dark
Light surface
Muted text (light)
Muted text (dark)
SOS, destructive, errors (light)
Same, in dark mode
Surge, warnings (always with Asphalt text)
The Spark / EV tier accent
Success text on light (Acid is decorative only)
Semantic Tokens (Light vs Dark)
| Token | Light Mode | Dark Mode | WCAG Contrast Notes |
|---|---|---|---|
| primary | #7B2FF7 | #A57BFF | Violet on white 5.8:1 ✓ AA. #A57BFF on Asphalt 6.1:1 ✓ |
| onPrimary | #FFFFFF | #121212 | White on violet 5.8:1 ✓. Asphalt on #A57BFF 6.1:1 ✓ |
| accent | #B8FF3C | #B8FF3C | Asphalt on Acid 15.4:1 ✓. Never use Acid as text on white (1.2:1 ✕) |
| onAccent | #121212 | #121212 | High contrast pairing on Acid |
| surface | #FFFFFF | #121212 | Base application background |
| surfaceAlt | #F2F2F2 | #1C1C21 | Violet on Chalk 5.2:1 ✓ |
| surfaceRaised | #FFFFFF | #26262D | Elevated modals, cards, floating action buttons |
| onSurface | #121212 | #F2F2F2 | 18.1:1 / 16.6:1 ✓ AAA |
| muted | #6B6B76 | #A3A3AD | 5.1:1 / 7.4:1 ✓ AA |
| border | #E3E1EA | #2E2E36 | Subtle decorative divisions |
| success | #12813F | #57D98A | ✓ AA both modes |
| warning | #FFB020 | #FFC04D | Surge and cautions; use as fill with Asphalt text (10.6:1) |
| danger | #E5243B | #FF4D63 | White on #E5243B 4.6:1 ✓ |
| spark | #1FB6FF | #4CC9FF | EV badge and electric tier accent |
Brand Contrast Guardrail
Never use Acid Green (#B8FF3C) as text on white or Chalk: it has a contrast ratio of only 1.2:1. Acid Green is used exclusively as a background fill with Asphalt text (15.4:1 contrast), or as decorative accents, “live” indicators, and dots.
Type System & Hierarchy
Paired Space Grotesk for display attitude, Inter for crisp micro-legibility, and JetBrains Mono for tamper-evident data strings.
Space Grotesk
Weights 500, 600, 700. Street-smart geometric sans with engineered curves.
Inter
Weights 400, 500, 600. Optimized for phone screens, cards, and microcopy.
JetBrains Mono
Weight 500. Fixed-width figures for OTPs, timer countdowns, and plates.
Noto Sans
Devanagari & Kannada support. Loaded dynamically with +2px line-height rule.
Custom Icons & Vehicle Tiles
Drawn on a 24 × 24 grid with 1.75 px stroke, round caps and joins. Active states swap to filled shapes with an Acid Green accent dot.
10 Custom Brand Icons
Side-view motorbike with rear hop arc
Electric scooter with front lightning notch
Front 3/4 auto-rickshaw contour
Hatchback side view
Full-face helmet with visor tick
Rupee glyph inside padlock
3 dots in parabolic trajectory
Safety helmet with ♀ Venus notch
3 stationary cars with skipping bike line
Sneaker sole with ₹ tread markings
Vehicle Tile Illustrations (64 × 40 px)
Petrol commuter 100-125cc
Electric scooter / Mumbai compliant
3-seater CNG auto-rickshaw
4-seater AC hatchback
Map Marker Glyphs
28 px disc & 36 px teardrop pins
Bike (Chalk Day)
Bike (Asphalt Night)
Pickup (Chalk)
Pickup (Asphalt)
Drop (Violet Day)
Drop (Acid Night)Signature Interactions
Engineered with purposeful springs and eases. Every motion serves feedback: searching (Match Pulse), value won back (Jam Skipped), and arrival (Marker Hop).
Match Pulse
Violet rings sweep every 600ms (lasting 1800ms with ease.pulse), illuminating nearby bikes, then snapping with a hop arc.
cubic-bezier(0.16, 1, 0.3, 1) · 1800msJam Skipped Counter
Counts up from 0 to actual minutes saved over 900ms with ease.swift, while the bike glyph slides past 3 stationary car glyphs.
0 → 18 min · ease.swift 900msMarker Hop
Arrivals overshoot and settle like landing a jump. Applied to captain pins, pickup confirmations, and success CTAs.
spring.hop (stiffness 520, damping 18)Voice Principles & Do/Don't
Hoppr's personality is hustler, witty, youthful, fearless, and beneath all of that, uncompromisingly honest.
“Every Indian city has two clocks. One is on your phone. The other is the traffic light at Silk Board, the signal outside Andheri station, and the U-turn that takes eleven minutes. Hoppr was built for the people who refuse to live by the second clock.”
Street-smart, not street-loud
We know the city like a captain does. We name real landmarks, real junctions, and actual minutes. We never scream.
- “Ravi's 3 min away, on 100 Feet Road.”
- “Silk Board's crawling. A Hop saves you ~18 min.”
- “Morning hop? Koramangala in 16 min.”
- “YOUR RIDE IS COMING SUPER FAST!!!”
- “Beat traffic like never before!”
- “Lightning deals inside!!”
Honest in fine print and big print
If a promise has conditions, the conditions go straight in the headline. We never hide behind asterisks or fake guarantees.
- “Free cancel: your captain hasn't moved in 3 min.”
- “₹48. That's the fare. Full stop.”
- “Capped at 2× surge. Always.”
- “Cancel anytime*” (with hidden conditions)
- “Starting at ₹48” (charging ₹61 at checkout)
- “Guaranteed in 5 minutes”
Witty, then useful
One wink per screen at most. On error, safety, payment, and SOS screens: zero jokes, total clarity.
- Empty trips: “No hops yet. Your city's waiting.”
- Receipt: “You skipped 18 min of cab traffic 🏍️”
- Daily Goal: “₹1,200 done. Legend behaviour.”
- SOS screen: “Uh-oh, spaghetti-o!”
- Payment failure: “Oopsie! Money took a hop 😜”
- Crash error: “We took a tumble lol”
Captains are pros, not “boys”
We address partner captains with respect: first name, initial, tier, and verified star rating. Never demean or rush them.
- “Ravi H. · Ace captain · ★ 4.92”
- “Your captain keeps 100% of this fare.”
- “Captain Line: 90-second callback.”
- “Your bike boy is here”
- “Tip to make them go faster”
- “Order your driver”
The 49 Copy Bank Strings
Authoritative microcopy transcribed from 03 §5. Use verbatim across customer app, captain app, and marketing surfaces.
“Hop on. Skip the jam.”
“Bikes that beat the jam. Hop, Spark, Auto or Cab. Pick your speed.”
“The fare you see is the fare you pay. Fare Lock means no haggling at the gate. Ever.”
“Safe, from the lid down. ISI helmets, fresh hygiene caps, SOS one tap away.”
“What's your number? We'll text a 4-digit code. No spam, promise.”
“Enter the code sent to +91 90000 12345 · Resend in 0:24”
“Where are we picking you up? Turn on location so captains find you at the right gate.”
“Where to, Tanvi?”
“Morning hop? Koramangala in 16 min.”
“3 min away · Drop 9:30 AM”
“Skips 18 min of traffic”
“EV-only in Mumbai. Same hop, zero fumes.”
“Book Hop · ₹48”
“Busy right now · 1.3× fare · Capped at 2×. Always.”
“Metro Hop: ₹29 flat to any station within 2.5 km.”
“Pinging 14 captains nearby…”
“Locking your fare at ₹48”
“Ravi's 3 min away. Checking in…”
“You're hopping with Ravi.”
“Share this code only when you're on the bike”
“Helmet provided ✓ · Fresh cap inside”
“You'll arrive at 9:30 AM”
“Ravi hasn't moved in 3 min. Cancel free, or give him a minute?”
“Unplanned stop for 2 min. All good? [I'm fine] / [Get help]”
“₹48 · Locked. Your captain keeps 100% of it.”
“Paid ₹48. Hop done.”
“You skipped 18 min of cab traffic 🏍️”
“How was the hop with Ravi?”
“Want to say thanks? Tips go 100% to Ravi.”
“Captain asked for more than ₹48? [Report and get refund]”
“₹20 refunded to your Kicks. We've flagged this ride. Thanks for telling us.”
“No hops yet. Your city's waiting. [Book your first Hop]”
“All captains nearby are busy. Try Spark or Auto, or we'll keep looking for 2 more min.”
“Can't reach Hoppr right now. Check your connection and try again.”
“Payment didn't go through. No money was taken. Try UPI again or pay cash.”
“We don't hop here yet. We're live in Bengaluru and Mumbai.”
“🏍️ Ravi's here. Look for KA 99 HP 2041.”
“Your Hoppr Wrapped is ready. 38 rides, 9 hr 42 min of jam skipped.”
“Silk Board's jammed till 7 PM. Hop past it for ₹56.”
“Hop Pass renews in 3 days. You've saved ₹186 this month.”
“Send SOS? We'll call you, alert Amma and Karan, and share your live location. [Slide to send SOS]”
“Help is on the way. Stay on the line. We're calling you now.”
“Amma can see your ride live until you're dropped.”
“Go online / You're online. Rides are coming.”
“New Hop · 1.2 km away · ₹56”
“Rider seems unsafe? End this pickup. No penalty, no questions.”
“₹19 today. Keep every rupee after that.”
“₹1,200 done. Legend behaviour.”
“We'll call you back in 90 seconds. (live countdown)”
Map Palette & Styling
Built on OpenFreeMap Positron and recoloured dynamically. Day mode uses Chalk (06:00–18:59); night, captain, and ops views run Asphalt.
Chalk Palette
Water is violet-tinted, parks are lime-tinted, and major roads hold subtle violet warmth. The route line is electric violet with high-contrast casings.
OriginDrop| Map Layer | Chalk (Day) | Asphalt (Night / Ops) | Specification Notes |
|---|---|---|---|
| background / land | #F2F2F2 | #121212 | Chalk day vs Asphalt night terrain |
| water | #D9D2F5 | #1E1733 | Violet-tinted waterbodies |
| parks / greenery | #E4F5D0 | #16200F | Acid-tinted soft foliage |
| minor roads | #FFFFFF | #24242B | Residential & service lanes |
| major roads / highways | #E8E2F7 | #33303F | Arterials with violet undertone |
| road labels | #6B6B76 | #8C8C96 | High contrast legibility |
| building fill | #E9E9EC | #1A1A1F | Subtle structural mass |
| route line / casing | #7B2FF7 / #FFFFFF | #A57BFF / #121212 | 6 px primary route with 9 px casing |
| travelled route | #7B2FF7 (35%) | #A57BFF (35%) | Completed segment progress |
| pickup pin | Asphalt with Chalk ring | Chalk with Asphalt ring | Rider origin marker |
| drop pin | Violet teardrop (#7B2FF7) | Acid teardrop (#B8FF3C) | Destination pin |
| nearby bike marker | Asphalt on Chalk disc (28px) | Chalk on asphalt-700 disc | Drifting captain markers |
Physical Collateral & Mockup Gallery
The 14 physical items specified in 07 §13. Renders, packaging dielines, apparel, signal hoardings, and editorial street photography.