The pieces behind Buvvo.
Tokens, controls, and chat-native primitives — all built around one personality: mint, charcoal, and a button that tilts when you hover it.
The bones of Buvvo.
Mint-on-charcoal energy. Naira-friendly type scale. Radii that lean into the WhatsApp roundness without going cartoony.
Color tokens
Two greens, one mint, a charcoal, and a small accent palette borrowed from the testimonial avatars.
Type scale
One family — Geist — across the whole system. Tight tracking on display, generous leading on body. Italics ('actually') reserved for emphasis.
Spacing scale
4px base. Component-level steps go up to 32; section padding lives at 56 / 80 / 120.
Radii
Buttons hover-shift their top-left corner from 12 → 4 — that's the Buvvo signature.
Buttons that wink, inputs that listen.
Every control has the same hover personality: a small lift, a -2° tilt, and a corner that sharpens to 4px on the top-left.
Button
Five kinds × three sizes. The signature hover (lift + tilt + corner shift) applies to primary, secondary, mint, and on-dark.
Text input
Mint focus ring is the focus state across the whole system. Click in to feel it.
Textarea
Same skin as the input. Used for AI prompts and order notes.
Select
Custom dropdown — keyboard-light, mint check on the active option, mint-wash on selected.
Toggle
Mint pill on green track when on. Used heavily — most Buvvo settings are toggles.
Checkbox & Radio
Both stay quiet until selected — green fill for check, mint-on-green ring for radio.
Cards, badges, pills.
The chrome that holds everything else. Borrowed from the landing — same hover signature carries through.
Card
Three flavours: plain (info), tilt (interactive), mintHover (call-to-engage). Hover any of them.
Auto-replies sent
Sync your catalog
Connect Shopify, Woo or a Sheet. Stock auto-updates.
Turn AI on →
Approve drafts at first, then let Buvvo run.
Drafts before send
Buvvo writes a reply, you tap to send. Train the AI by approving — it gets quieter every week.
Badge
Tiny labels for state. The mint AI badge is the only one Buvvo uses with an icon — keep it that way.
Pill
Section eyebrows. Always uppercase, always above the H2.
Tag
Filterable chips for catalog facets, customer tags, and AI labels.
Getting around.
Compact, clear, never decorative. Top nav matches the site exactly so the library and the marketing page feel like one product.
Top nav
Sticky bar across every Buvvo page. The Start CTA carries the same hover signature as primary buttons.
Nav with simple submenu
One column dropdown — best for groups of 3–6 related links. Title + one-line description, mint hover wash on items. Closes on click-outside or Escape.
Nav with complex submenu (mega menu)
Multi-column panel for product-level navigation. Two columns of categorised links + a featured card on the right. Use when a single submenu spans more than ~6 items, or when items need context.
Mobile · simple submenu in drawer
Inside the slide-in drawer, a single nav item becomes an accordion. Tap the row, chevron rotates, child items slide down. Best for groups of 3–6 related links.
Mobile · mega submenu in drawer
Same accordion shape as the simple version, but with sub-section headers and an optional featured card. Use when the desktop submenu spans 6+ items or has categorised groups.
Tabs
Underline for primary navigation, pill for binary toggles (e.g. monthly/yearly pricing).
Breadcrumbs
Used inside the dashboard. Last crumb is the current page — bold, no underline, no link.
Telling the user what just happened.
Quiet by default, mint when good news, warm when something needs attention.
Toast
Slides in from the corner when something completes. Auto-dismiss after ~4s in production.
Banner
Lives at the top of dashboards or above modals. Stronger than a toast, weaker than a full-screen state.
Modal
Centered, soft scrim, mint corner accent. The shape is the give-away — radius 4 / 22 / 22 / 22, mirroring the testimonial bubble.
Tooltip
Hover any of these. Charcoal pill, small caret, slide-up entry.
The chat is the product.
Specific to Buvvo: how a real WhatsApp message looks rendered inside the app, with the AI lane on top.
Chat bubble
Incoming = paper. Outgoing = WhatsApp green. Tail on the matching corner.
Typing indicator
Three mint dots inside a green bubble. Same animation used in the AI feature card.
AI tag
The little mint flag that says 'this came from Buvvo, not the human'. Always to the LEFT of the bubble it labels.
Live AI playback
The whole pattern in motion — incoming customer, typing, typewriter reply with caret.
Page-level blocks.
Lifted directly from the Buvvo landing — drop-in modules for any future page.
Hero CTA pair
The signature pairing — primary green pill + ghost link.
Feature card
Lifts -8px on hover. Mix dark and light variants in a 3-up grid.
Confirms, notifies, done.
Buvvo takes payments, confirms transfers, and updates your buyer in chat — automatically.
Always in stock. Never sold twice.
Import products so Buvvo never sells what you don't have.
Drafts that sound like you.
Trained on your last 30 days of chats. Approve and ship.
Testimonial card
Quoted, with a colored avatar circle. Used inside the marquee carousel.
We replaced three apps with Buvvo. Reply time dropped from two hours to under a minute.
Buvvo confirms transfers before I even open my phone. My buyers love the instant 'received' message.
Pricing card
Three tiers. Active = charcoal fill with mint name. 'Most popular' floats above.
- ✓ 1 number
- ✓ 100 AI replies
- ✓ Catalog up to 25
- ✓ 1 number
- ✓ Unlimited AI
- ✓ Unlimited catalog
- ✓ Shopify / Woo sync
- ✓ 5 numbers
- ✓ 5 team seats
- ✓ Custom AI training
Glyph chips.
Rounded-square buttons that lift and tilt on hover. Use for socials, quick actions, or any letter-mark glyph. Born in the footer; reusable everywhere.
Surface variants
Same shape across four surface treatments — pick the one that reads on your background.
Sizes
Four steps — radius and font scale together so the proportions stay tight.
Glyph grid
Letter-marks for socials and short symbols for utility actions. Two characters max keeps it readable at 36.
Built for the small screen first.
Half of Buvvo's shoppers are on a phone. These are the pieces that make the responsive layouts work — collapsible nav, slide-in drawer, bottom tabs, sheets, sticky bars.
Mobile top bar
The desktop nav collapses to this at ≤900px. Logo on the left, hamburger on the right — the hamburger gets the same wink as the primary CTA.
Slide-in drawer
Slides in from the right on hamburger tap. Deep-green panel, scrim behind it, mint links on hover. Tap the demo to open/close.
Bottom tab bar
In-app primary navigation on phones. Active tab fills deep-green with mint text. Mint badge for unread/pending counts.
Bottom sheet
Slide-up action sheet for contextual options. Drag-handle on top, full-width rows, the destructive row turns soft red.
Mobile filter bar
Horizontally-scrolling category chips paired with a full-width search. Scroll snaps to each chip; scrollbar hidden.
Floating action button
Primary in-app shortcut. Hovers above the bottom tab bar. Pure mint by default — flips to deep-green on hover with the same wink.
Inbox3 new