TidyBee Brand Book
Help that shows up. Everything needed to make TidyBee look, sound, and move with dignity, warmth, and craft.
Logo System & Lockups
Geometric pointy-top hexagon (14% corner radius), 4-point concave sparkle at 58% x / 42% y, and single Honey bee dot at 30% x / 70% y.
Colour Tokens & Contrast Ratios
16 calibrated tokens from spec §7. Contrast verified against WCAG AA/AAA. Honey is the spice (5%), never the base.
| Token & CSS Var | Swatch | Hex Code | Role & Application | Contrast & Compliance |
|---|---|---|---|---|
teal (primary) --color-primary | #0E3B3A Deep Teal | Primary buttons, headings, key icons | 11.8:1 on Soft White (Light) · 8.0:1 on Deep Teal (Dark) WCAG Verified ✓ | |
onPrimary --color-on-primary | #F8FBF9 Soft White | Text and icons on primary container | 11.8:1 on primary WCAG Verified ✓ | |
mint --color-mint | #7FE3C4 Mint | Brand fill: chips, selected rooms, illustrations | 8.0:1 with Deep Teal text · Never text on white (1.5:1) WCAG Verified ✓ | |
mintSoft --color-mint-soft | #E3F8F0 Mint Soft | Tinted surfaces, Bee card backgrounds | Subtle surface container WCAG Verified ✓ | |
honey (accent) --color-accent | #FFC940 Honey | Honeycomb fills, bee dot, stars, wrapping-up state | 8.0:1 with Deep Teal text · Not for text on white WCAG Verified ✓ | |
honeySoft --color-honey-soft | #FFF3CC Honey Soft | Honeycomb backgrounds, promo banners | Subtle warning/honey surface WCAG Verified ✓ | |
honeyInk --color-honey-ink | #8A6300 Honey Ink | Text on honeySoft, warning labels | 4.9:1 on honeySoft · 5.4:1 on white WCAG Verified ✓ | |
teal600 --color-teal-600 | #146C64 Teal 600 | Links, secondary text buttons | 6.3:1 on white WCAG Verified ✓ | |
surface --color-surface | #F8FBF9 Soft White | App and page background | Base canvas background WCAG Verified ✓ | |
surface2 --color-surface2 | #EEF6F2 Surface 2 | Cards on surface, idle floor-plan rooms | Card container level WCAG Verified ✓ | |
onSurface (ink) --color-on-surface | #0B1F1E Ink | Body text, primary headers | 16.0:1 light · 14.0:1 dark WCAG Verified ✓ | |
muted --color-muted | #52625F Muted Slate | Secondary text, timestamps, captions | 6.1:1 on Soft White · 7.2:1 dark WCAG Verified ✓ | |
line --color-line | #D6E6E0 Line Teal | Dividers, room borders, timer track | Decorative only (non-text) WCAG Verified ✓ | |
success --color-success | #1A7F55 Forest Green | Verified ticks, done states, online status | 5.0:1 on white WCAG Verified ✓ | |
warning --color-warning | #FFC940 Honey Warning | Wrapping-up countdown, pending items | Paired with honeyInk text WCAG Verified ✓ | |
danger --color-danger | #C73A3A Crimson | Errors, SOS emergency button, cancellations | 5.1:1 on white WCAG Verified ✓ |
Hive Pattern Variants
Pointy-top regular hexagon grid (24 px cell width at 1×, 1.5 px stroke) per §7.
Typography & Script-Aware Hierarchy
General Sans Variable (Latin) paired with Google Indic families: Baloo 2 (Devanagari), Baloo Tamma 2 (Kannada), and Baloo Da 2 (Bengali).
Indic scripts automatically scale to 1.08× size and +4 px line-height via CSS :lang() rules to preserve vowel matras, conjuncts, and optical dignity.
| Token | Size / Leading | Weight | Role | Visual Sample |
|---|---|---|---|---|
| display-xl | 64px / 68px | 600 | Website hero headline | Help that shows up. |
| display | 40px / 44px | 600 | Major section headers | Busy bees for busy homes. |
| h1 | 30px / 36px | 600 | App screen titles | Sunita Devi |
| h2 | 22px / 28px | 600 | Card titles, sheets | Today's visit |
| h3 | 18px / 24px | 600 | List headers, groups | Kitchen & Living |
| body-l | 17px / 26px | 400 | Onboarding body, narrative | A trained, verified Bee at your door in about 10 minutes. |
| body | 15px / 22px | 400 / 500 | Default UI body text | ID-checked, police-verified, and paid every Friday. |
| caption | 13px / 18px | 500 | Metadata, timestamps, badges | Ends around 10:52 am · 4.9 ★ (1,286) |
| micro | 11px / 14px | 600 (caps) | Tags, caps pills | POLICE VERIFIED ✓ |
| timer | 72px / 72px | 600 (tnum) | Hex session countdown | 28:45 |
| price | 28px / 32px | 600 (tnum) | Dynamic room estimate | ₹179 |
Tabular Numerals (Preventing Jitter)
Prices, timers, and visit counts use font-variant-numeric: tabular-nums so numbers never shift or jitter during countdowns.
Voice, Tone & Lexicon
Personality: warm, calm, respectful, reliable. Think of a good neighbour who is also exceptionally organised.
1. Respect first. Bees are professionals.
We talk about Bees the way you'd talk about a nurse or a teacher. They are never maids, bais, helpers, or resources.
2. Calm, not rushed.
Speed is a service to the customer, never pressure on the Bee. No countdown panic, no exclamation stacks, no 'HURRY'.
3. Plain and warm.
Short sentences. Everyday words. Light Indian-English is welcome ('the dishes are done', 'full sink', 'kitchen prep', 'atta').
4. Honest about money and time.
Say what things cost, what the Bee earns, and when things realistically happen. 'About 10 minutes', never a guaranteed rush.
Lexicon & Vocabulary Rules
Words shape how we value people. TidyBee language enforces dignity and eliminates servile framing.
| Words We Use (Always) | Words We Never Use |
|---|---|
| Bee, your Bee, Sunita | maid, bai, servant, domestic, resource, worker |
| session, visit | job (on customer side) |
| Hive Hub | dark store, depot, warehouse |
| tip (100% goes to the Bee) | reward your maid |
| about 10 minutes | in 10 minutes guaranteed, lightning fast |
| extend | overtime |
| house rules / notes for your Bee | instructions for your maid |
Full Copy Bank
Rendered directly from src/copy/en.ts. All strings use curly braces for dynamic interpolation.
| Key | Copy String | Action |
|---|---|---|
| onb.1.title | Help that shows up. | |
| onb.1.body | A trained, verified Bee at your door in about 10 minutes. | |
| onb.2.title | Tap your rooms. We'll do the maths. | |
| onb.2.body | Pick what needs doing on a map of your home. The price updates as you go. | |
| onb.3.title | Every Bee has a name. | |
| onb.3.body | ID-checked, police-verified, trained, and paid fairly. You'll see exactly how much they earn. | |
| cta.bookNow | Book a Bee now | |
| cta.bookLater | Schedule for later | |
| cta.continue | Continue | |
| cta.confirmPay | Confirm and pay {amount} | |
| cta.payAfter | Pay after the session | |
| cta.extend30 | Extend 30 min · {amount} | |
| cta.bookAgain | Book {beeName} again | |
| cta.startPlan | Start Daily Bee | |
| map.coach | Tap a room to add it. Press and hold to choose tasks. | |
| map.roomAdded | {room} added · about {minutes} min | |
| map.roomRemoved | {room} removed | |
| map.estimate | About {minutes} min of work · we suggest {duration} min | |
| map.tooBig | That's more than 2 hours of work. Pick the rooms that matter most today, or start a Daily Bee plan. | |
| map.empty | Nothing picked yet. Start with the kitchen? Most people do. | |
| match.title | Finding the nearest Bee… | |
| match.sub | Checking the Hive Hub in {locality} | |
| match.found | {beeName} is coming over | |
| arrive.eta | About {minutes} min away | |
| arrive.walking | {beeName} is walking over from the Hive Hub | |
| arrive.atDoor | {beeName} is at your door | |
| arrive.otp | Share this code when {beeName} arrives | |
| session.left | min left | |
| session.endsAt | Ends around {time} | |
| session.wrapping | Wrapping up soon | |
| session.extended | Added 30 minutes. {beeName} will stay till {time}. | |
| session.done | All done. Your home says thank you. | |
| rate.title | How was your session with {beeName}? | |
| rate.tipTitle | Add a tip for {beeName} | |
| rate.tipNote | 100% of your tip goes to {beeName}. | |
| rate.favourite | Save {beeName} to My Bees | |
| rate.thanks | Thank you. {beeName} will see your rating tonight. | |
| empty.bookings | No sessions yet. Your first Bee is about 10 minutes away. | |
| empty.myBees | Bees you love will live here. Tap the heart after a session to save them. | |
| empty.plans | Same Bee, same time, every morning. Start a Daily Bee plan. | |
| empty.search | We couldn't find that task. Try "dishes", "laundry" or "kitchen". | |
| err.noBee | All nearby Bees are busy right now. We'll keep looking for 5 more minutes, or you can schedule for later. | |
| err.payment | That payment didn't go through. No money was taken. Try again or pay after the session. | |
| err.offline | You're offline. We'll update Sunita's status as soon as you're back. | |
| err.notServiceable | We're not in {pincode} yet. Leave your number and we'll tell you when a Hive Hub opens nearby. | |
| err.generic | Something went wrong on our side. Please try again. | |
| push.assigned | 🐝 Sunita is on her way. About 9 minutes. | |
| push.atDoor | Sunita is at your door. Your code is {otp}. | |
| push.fiveLeft | 5 minutes left in your session. Need more time? Extend by 30 min. | |
| push.planTomorrow | Tomorrow 8:00 am: {beeName}, 60 min. Skip or change by 9 pm tonight. | |
| push.beeLeave | {beeName} is on paid leave tomorrow. {backupName}, your backup Bee, is coming instead. | |
| push.receipt | Receipt for {amount}. Sunita earned {beeShare} + your {tip} tip. | |
| bee.dutyOn | Start work | |
| bee.dutyOff | Stop work | |
| bee.newJob | New visit | |
| bee.accept | Accept | |
| bee.decline | Not now | |
| bee.arrived | I have arrived | |
| bee.enterCode | Enter the customer's code | |
| bee.finish | Slide to finish | |
| bee.sos | Hold for help | |
| bee.payday | Payday is Friday. {amount} so far this week. |
Custom Iconography System
12 custom task icons + 4 trust icons. Built on a strict 24 px grid, 1.75 stroke, round terminals, with optional 14% Mint hexagonal cell backdrop.
12 Custom Task Icons
4 Core Trust Icons
Skill & Milestone Badges
Mascot: Pip
Pip is TidyBee's geometric mascot. Pointy-top hex body (Honey with two Deep Teal stripes), Mint teardrop wings, and dot eyes. No human mouth or limbs.
Critical Mascot Rules & Non-Negotiables
- Empty states (“No Bees free right now”, “Not in your area yet”)
- Loading spinners and network recovery banners
- Physical door hangers (“A TidyBee is buzzing inside”)
- Merchandise, stickers, and onboarding cheer moments
- Real Bees are professional adults with names, faces, and verified bios.
- Never replace a Bee portrait or avatar with Pip.
- Pip is an abstract brand mascot, not an illustration of a worker.
- Never show Pip holding mops or kneeling at customers' feet.
Motion Principles & Physics
Settle, don't snap (cubic-bezier(0.22, 1, 0.36, 1)). Breathe, don't tick (8 s cycle). Grow like a hive.
1. Honeycomb Fill
480 msTap anywhere inside the room. Hexagons pop outward from your touch point with distance-based delay.
2. Hex Breathing Timer
8000 ms loopInner cell breathes on an 8 s sine wave (4 s in, 4 s out). No rapid ticking panic; calm, organic reassurance.
3. Hex Matching Radar
1600 ms cycleThree hexagon rings expand outward while matching nearest available Bee at the neighbourhood Hive Hub.
Brand Motion Timing Tokens
Exported from src/brand/theme.ts. Reduced-motion fallbacks built into all components.
Physical Mockup Gallery
12 physical branding touchpoints specified in 07-physical-branding-spec.md. Configured with swap-ready slots for Phase 5 assets.
Bee at the door
Editorial documentary photo of a Bee standing at an apartment door in Bengaluru with kit caddy, soft morning corridor light.
Uniform flat lay
Folded Mint tunic with Honey mandarin collar, Deep Teal apron, ID card on Mint lanyard, enamel pin, microfibre cloths.
Tunic front & back
65/35 poly-cotton pique tunic, embroidered hexagon mark on left chest, back yoke wordmark embroidery, hive hem band.
ID card + lanyard
CR80 vertical PVC card with hex-cropped portrait, Aadhaar/Police verification ticks, QR back, on 20 mm Mint polyester lanyard.
Kit caddy (hero item)
Deep Teal recycled PP open-top caddy wrapped in Mint hexagon-pattern fabric sleeve with 3 bottle bays and cloth compartment.
Spray bottles ×3
Colour-coded 500 ml bottles: Mint trigger (Surface Spray), Honey trigger (Glass & Mirror), Deep Teal flip-cap (Floor Concentrate).
Hive Hub exterior
Neighbourhood hub storefront in HSR Layout: Deep Teal fascia with backlit acrylic logo, frosted glass with hex band, e-cycle parked.
Hive Hub interior
Rest hub interior: Deep Teal feature wall with Mint hex pattern, on-shift Bee board, charging lockers, bench with water dispenser.
Society poster in lobby
A3 poster on Gurugram society notice board: 'The help that always shows up. Now in Palmyra Heights.' with floor plan graphic and QR.
Door hanger on door
Die-cut 90 × 250 mm card on apartment handle: 'A TidyBee is buzzing inside' (Side A) / 'Your home, a little tidier' (Side B).
Billboard: Every Bee has a name
40 × 20 ft highway hoarding: dignified portrait of Lakshmi in uniform: 'Police-verified. Trained. Insured. Paid every Friday.'
Merch set: tote, bottle, pin
Heavy canvas tote with full-bleed Mint hex pattern, 750 ml powder-coated Mint water bottle with laser mark, 22 mm gold enamel pin.