ZIPPIT BRAND SYSTEM · LIVING BOOK

Close by. Not rushed.

Every neighbourhood used to have a shop that knew you. Zippit is that shop, rebuilt for how Bengaluru lives now. Our Zipstores sit about a kilometre from your door, which is why your order arrives in minutes—not because anyone is racing.

PRIMARY MOTIF

Zipper Pull & Teeth

HONEST PROMISE

One fee: ₹25 (free ≥ ₹199)

SAFETY MANDATE

Zero printed time claims

PROPORTION RULE

60 Cream · 25 Ink · 12 Chili · 3 Lime

01 · Identity

The Logo System

The zipper pull gives Zippit its physical metaphor. The bold Z symbol ends in a rounded zipper pull tab with six zipper teeth notches along the diagonal.

Signature Motion

2.2s Unzip Sequence

Pull tab slides down diagonal (0–400ms) → Z splits & teeth scatter (400–900ms) → letters rise with spring (900–1400ms) → bounce settle.

Primary Variants

Primary Lockup

Chili Z + Ink wordmark on Cream

Reversed Lockup

Cream Z + Cream wordmark on Chili

Mono Ink

Direct receipts, one-colour print

Mono Cream

Embossing, dark surface applications

Clear Space (X = ~0.9u)

Clear space equals the height of the pull tab on all four sides. No text or graphic elements may enter this exclusion zone.

X (0.9u)

Minimum Reproduction Sizes

Ensures sharpness, legibility, and barcode/screen integrity.

Lockup

88 px / 22 mm wide

Symbol Only

20 px / 6 mm minimum

Wordmark Only

64 px / 16 mm wide

Logo Misuse (Don'ts)

Strict rules protecting the dignity, clarity, and legal recognition of the brand.

✕ DON'T 1

ZIPPIT

Don't capitalise the wordmark (never ZIPPIT or Zippit in the logo lockup).

✕ DON'T 2

Don't recolour the Z in Lime on Cream (fails WCAG AA contrast).

✕ DON'T 3

⏱ 10 MIN

Don't add a clock, stopwatch, or "10" to the logo or positioning.

✕ DON'T 4

Don't rotate the whole symbol. Only the pull tab is angled at 12°.

✕ DON'T 5

Don't stretch it, add heavy drop shadows, or outline it.

✕ DON'T 6

Don't place Chili symbol directly on busy photos without a Cream or Ink backing plate.

02 · Palette

Colour System & Contrast

Warm Cream surfaces, solid Ink contrast, bold Chili vibrancy, and crisp Lime pops. Every token is tested live against WCAG 2.1 accessibility criteria.

Proportion Rule: 60% Cream · 25% Ink · 12% Chili · 3% Lime

Lime appears only where money is saved

60% Cream

25% Ink

12% Chili

primaryChili

Brand fills, CTA backgrounds, rider marker, ETA ring

Ink on Chili:5.20:1

AA ✓

primaryStrongChili 700

Links and small Chili text on light surfaces

on White:4.95:1

AA ✓

onPrimaryInk on Chili

Text and icons on Chili surfaces (5.2:1 accessible)

on Primary:5.20:1

AA ✓

surfaceCream

App and website primary canvas background

with onSurface:15.97:1

AAA ✓

surfaceRaisedWhite / Surface Raised

Product cards, bottom sheets, elevated modals

with Text:17.40:1

AAA ✓

surfaceSunkenCream-2 / Sunken

Input wells, skeleton placeholders, category tiles

with Text:14.27:1

AAA ✓

onSurfaceInk

Primary typography and high-emphasis icons

on Canvas:15.97:1

AAA ✓

mutedMuted Warm

Secondary body copy, timestamps, pack sizes

on Canvas:5.35:1

AA ✓

borderWarm Sand Hairline

Hairline card borders, table dividers, decorative guides

on Canvas:1.28:1

Special Rule

accentLime Pop

Offers, savings, Zipline fill, 'free delivery' celebratory moments

Ink on Lime:13.58:1

AAA ✓

onAccentInk on Lime

High-contrast text on Lime badges and pills

on Lime:13.58:1

AAA ✓

successFresh Green

Barcode scan pass, delivery completed, tamper seal intact

White on Success:5.02:1

AA ✓

warningAmber Warm

Near-expiry warning, store peak load alert, rain advisory

Ink on Warning:8.39:1

AAA ✓

dangerCrimson Red

Barcode expiry fail, payment failure, SOS button

White on Danger:6.01:1

AA ✓

infoBlue Info

Map routing line alternate, system notice banners

White on Info:5.52:1

AA ✓

mapRouteMap Polyline

Active delivery navigation polyline on light/dark map tiles

on Map Tiles:15.97:1

AAA ✓

chillerChiller Cyan

Fresh Proof cold chain tags, refrigerator shelf indicators

Ink on Chiller:6.33:1

AA ✓

03 · Typography

Typography Scale & Specimen

Clash Display brings warm geometric confidence to headlines, Inter powers high-density scannable UI with tabular numbers for pricing, and JetBrains Mono handles critical delivery codes.

Display

Clash Display

Semibold & Bold (Fontshare, self-hosted). Custom geometry with tight descenders.

Aa Bb Gg Rr Zz 0123456789

UI & Body

Inter

Weights 400, 500, 600, 700 with tabular figures (tnum) enabled.

Aa Bb Gg Rr Zz 0123456789

Technical

JetBrains Mono

Fixed-width figures for OTP codes, bay allocations, and bag barcodes.

BAG-0928 #4827 012345

Full Type Hierarchy

display-xl(Clash Display)

72 / 72 px · weight 600 · tracking −2%

Website hero, primary brand statement

Zip it. Done.

display-l(Clash Display)

48 / 52 px · weight 600 · tracking −1.5%

Section heads, Saved-you card number

Close by. Not rushed.

display-m(Clash Display)

34 / 38 px · weight 600 · tracking −1%

Countdown digits, fixed-width timers

08:24

title-l(Clash Display)

26 / 30 px · weight 600 · tracking −0.5%

Screen titles, prominent category shelves

Your usuals & pantry staples

title-m(Inter)

20 / 26 px · weight 700 · tracking −0.5%

Sheet titles, card headers

Instant Fix in 60 seconds

title-s(Inter)

17 / 22 px · weight 600 · tracking 0

Product names in sheet, list headers

Morning Farm Fresh Malai Paneer 200g

body-l(Inter)

16 / 24 px · weight 400 · tracking 0

Editorial paragraphs, introductory narratives

Every neighbourhood used to have a shop that knew you. Zippit is that shop, rebuilt.

body-m(Inter)

14 / 20 px · weight 400 · tracking 0

Default UI text, product descriptions

Your bag has 4 items. Imran is 850 m away and riding safe.

label(Inter)

13 / 16 px · weight 600 · tracking +1%

Buttons, navigation chips, filter tags

SWIPE TO PAY ₹412

price(Inter (tnum))

15 / 20 px · weight 700 · tracking 0

Prices, numeric tallies, cart totals with tabular figures

₹249 ₹199 ₹0 FREE

caption(Inter)

12 / 16 px · weight 500 · tracking +1%

Pack sizes, MRP strike-throughs, order timestamps

500 ml pouch · MRP ₹30 · Best before 2 Oct

micro(Inter)

10 / 12 px · weight 700 · tracking +6%

Uppercase pill badges, trust markers

FRESH PROOF · CHILLED 3.4°C · SPONSORED

mono(JetBrains Mono)

14 / 20 px · weight 500 · tracking +2%

One-time codes, bag tags, order IDs, ops tables

OTP: 482-719 · BAG-IND-0928-4821 · BAY 03

Regional Fallback · HindiNoto Sans Devanagari

अपनी गली की ताज़ा दुकान

"आस-पास। बिना किसी हड़बड़ी के। दूध खत्म हो गया? आपकी ज़िपस्टोर सिर्फ 800 मीटर दूर है।"

दूध 1 लीटर · ₹68 | ताज़ा दही 400g · ₹48 | 8 मिनट में

Rider Surface · KannadaNoto Sans Kannada

ಹತ್ತಿರದಲ್ಲೇ ಇದೆ. ಆತುರವಿಲ್ಲ.

"ನಿಮ್ಮ ವೇಗದಲ್ಲಿ ಸವಾರಿ ಮಾಡಿ. ಇಲ್ಲಿ ಯಾವುದೇ ಗಡಿಯಾರಗಳಿಲ್ಲ. ಸುರಕ್ಷಿತ ಸವಾರಿ."

ಹೊಸ ಆರ್ಡರ್ · 1.1 ಕಿಮೀ · ₹38 + ₹12 ಮಳೆ ಬೋನಸ್

03b · Iconography

Custom Brand Icons

"Arre yaar, kya scene hai, order karo na boss!!"

Forced artificial banter.

"Overhyped promotional alert spam"

Desperate push spam.

05 · Verbatim Library

The Copy Bank

All 55 canonical copy strings from the brand system. The UI imports directly from copy.ts to maintain a single source of truth across all surfaces.

Total Strings:55

Onboarding

Welcome, location resolution, demo OTP authentication, and neighbourhood serviceability.

7 strings

#01Splash· App launch screen & brand splash

"Zip it. Done."

#02Location Ask· Permission & address sheet title

"Where should we zip it?"

Sub: "We'll find the Zipstore closest to you."

#03Location CTA· Primary and secondary location buttons

"Use my location"

Sub: "Enter address manually"

#04OTP Screen Title· Phone verification screen

"Enter the 6-digit code"

Sub: "Sent to +91 90000 12345. It's fake. This is a demo."

#05OTP Resend· Count-down timer in auth flow

"Resend code in 00:24"

#06Serviceable· Neighbourhood store confirmed banner

"You're 850 m from Zipstore Indiranagar."

#07Not Serviceable· Out-of-boundary notification & waitlist card

"We're not in your lane yet."

Sub: "Leave your pincode and we'll ping you the day we are."

Home & Browsing

ETA pill, single-fee guarantee, shelf titles, and conversational search.

7 strings

#08ETA Pill· Top bar delivery promise with animated ring

"8 min · 850 m away"

#09One Fee Strip· Honest pricing header strip

"One fee: ₹25 delivery · Free from ₹199"

#10Buy Again Header· Reorder carousel based on past purchases

"Your usuals"

#11Late-night Shelf· Cravings shelf active after 10 PM

"Midnight noodles? No judgement."

#12Fresh Shelf· Daily dairy and produce section header

"Packed this morning"

#13Search Placeholder· Rotating placeholder in home search bar

"Search 'atta 5 kg' / 'curd' / 'AA batteries'"

#14Voice Search· Microphone modal listening state

"Listening… say it like you'd say it to a shopkeeper."

Cart & Checkout

Zipline free delivery threshold, tip selector, swipe-to-pay, and bill breakdown.

6 strings

#15Zipline (Below ₹199)· Progress bar slider before ₹199 milestone

"₹56 more to zip up free delivery"

#16Zipline (Reached)· Celebratory state with Lime particle burst

"Zipped! Delivery's free."

#17Bill Footer· Bill summary reassurance footer

"That's every rupee. No other fees."

#18Tip Picker Title· Rider tip section on checkout

"Tip your rider (100% goes to them)"

#19Place Order CTA· Tactile slide-to-confirm checkout component

"Swipe to pay ₹412"

#20Payment Success· Immediate post-payment confirmation screen

"Paid. Your Zipstore's already on it."

Live Tracking

Picking, 100% honest delays without faked speeds, OTP handover, and arrival.

7 strings

#21Picking· Dark store packing progress banner

"Kavya is packing your order · 4 of 7 items"

#22Add While Packing· Cart append window before seal closure

"Forgot something? Add it in the next 01:12. Same bag, no extra fee."

#23Handover· Rider pickup notification

"Packed and zipped shut. Imran has your bag."

#24En Route· Rider navigating to delivery address

"On the way · 1.1 km · riding safe"

#25Delay (Honest)· Rain mode advisory with zero rider penalty

"Rain on 100 Feet Road. Imran's taking it slow. New ETA 14 min."

#26Arriving· Delivery partner at gate / doorstep

"Arriving. Share code 4827 with Imran."

#27Delivered· Order completed celebration modal

"Delivered. Zip it. Done."

After Delivery & Care

Saved-you time card, freshness receipts, instant UPI refunds, and human callback.

6 strings

#28Saved-You Card· Trip savings summary card

"Zippit saved you 23 minutes today."

#29Fresh Receipt Header· Verified packed dates and chiller temperature log

"Your freshness receipt"

#30Rating Prompt· Rider delivery feedback modal

"How was Imran's delivery?"

#31Instant Fix Entry· Self-serve item issue resolver entry

"Something wrong? Fix it in a minute."

#32Instant Fix Success· Automatic refund confirmation

"Done. ₹90 is back on your UPI. It can take up to 2 hours to show."

#33Human Callback· Support escalation offer

"Rather talk? A real person will call you in 10 min."

Empty, Error & Offline

Human, empathetic, and clear recovery states with zero blame.

8 strings

#34Empty Cart· Cart view with no items

"Your bag's empty. Let's fix that."

Sub: "Browse your usuals"

#35Empty Orders· Order history empty state

"No orders yet. Your first one's about 8 minutes away."

#36Search No Results· Search fallback with helpful alternatives

"No 'kombucha' here yet. We've noted it. Try 'soda'?"

#37Out of Stock· Product detail out of stock badge

"Sold out at your Zipstore. Back tomorrow 7 am."

#38Generic Error· Network or transaction timeout toast

"That didn't go through. Nothing was charged. Try again?"

#39Payment Failed· Bank rejection screen with reassurance

"UPI said no. ₹0 was taken. Pick another app?"

#40Offline· Offline banner with local cart preservation

"You're offline. Your cart is saved on this phone."

#41Store Closed· Late night closed store schedule prompt

"Zipstore Indiranagar opens at 6 am. Schedule for then?"

In-App Banners & Pushes

Timely, quiet contextual notifications.

5 strings

#42Packing Update· Add-item banner during active picking

"Kavya's packing your order. Need anything else? Add it now."

#43Dispatched· Rider dispatch notification

"Imran's picked up your bag. 6 min away."

#44Freshness Verification· Fresh Proof proactive scan notice

"Your curd is best before 2 Oct. We checked."

#45Membership Renewal· Subscription notice with transparent policy

"Fastlane renews on 5 Oct for ₹89. Cancel anytime in Account."

#46Restock Alert· Personalized restock prompt

"Chai-time? Ginger's back in stock at your Zipstore."

Rider App

Safety-first, clock-free language for delivery partners.

5 strings

#47Going Online· Rider session activation banner

"You're online. Stay safe out there."

#48Incoming Order· Order offer card

"New order · 1.1 km · ₹38 + ₹12 rain bonus"

#49Ride Safe Note· Persistent reminder on rider dashboard

"No clocks here. Ride at your pace."

#50Milestone· Fair target incentive ticker

"3 more orders = ₹150 bonus"

#51Rain Bonus· Adverse weather payout banner

"It's raining. Rain bonus is on (paid by Zippit, not customers)."

Dark Store Picker Tablet

Precision scanner feedback and FEFO date-checking prompts.

4 strings

#52Queue Empty· Picker queue idle screen

"All clear. Grab some water."

#53Scan Success· Green flash successful barcode check

"✓ Curd 400 g · best before 2 Oct"

#54Scan Wrong Item· Red flash mismatch notification with shelf guide

"That's the 200 g one. Look for 400 g on B2-04."

#55Expiry Fail· Fresh Proof FEFO date-rejection safeguard

"Too close to date (expires tomorrow). Pick the next one."

06 · Motion & Interaction

Motion Specimens

Zippit motion principles: Momentum then settle, one continuous thread, zip, don't wipe, and honest real-time timers.

Curve & Spring Tokens

Live physics simulations. Tap "Replay" to inspect deceleration curves and bounce dynamics.

ease.zipcubic-bezier(0.22, 1, 0.36, 1)

Default ease-out for sheet entrances & route changes.

ease.snapcubic-bezier(0.34, 1.56, 0.64, 1)

Tactile stepper bumps and filter chip selection overshoot.

ease.exitcubic-bezier(0.4, 0, 1, 1)

Sharp acceleration curve used for sheet and modal dismissals.

spring.barstiffness 420, damping 32

Bottom cart bar entrance and primary CTA press feedback.

spring.sheetstiffness 300, damping 30

Natural drag physics for bottom sheets and product modals.

Signature: The Zipline

The zipper pull moves as the cart fills. At ₹199, teeth close in 180ms and a Lime burst fires.

Adjust Cart Value:₹143

₹56 more to zip up free delivery72%

Signature: Dark Store Scan Flash

Instant 220ms visual confirmation on picker tablets. Green flash on batch & date match; red on mismatch or FEFO expiry violation.

Zipstore Scanner · Camera Active

Point scanner at product barcode or lot code

Target: Curd 400 g · Bin C1-03

Dimensions: 1-tonne mini truck closed box body

Materials: Commercial vehicle vinyl fleet wrap

View Specs & Lightbox→

Merch

#15

Enamel Zipper-Pull Keychain & Merch

Dimensions: 50 × 22 mm die-cast keychain, combed cotton tees

Materials: Die-cast zinc with Chili hard enamel, 200 GSM combed cotton

View Specs & Lightbox→