The Lovable of WhatsApp
Brand
Design
System
The complete visual language for Green Pages — the WhatsApp commerce platform, and the team that built Paige. Build in minutes, launch to millions.
Logo
The Green Pages mark pairs a WhatsApp speech-bubble silhouette with a friendly storefront awning. Use the full lockup wherever space allows.
Clear Space
Reserve an exclusion zone around the mark equal to half the icon's height (x/2) on every side. This keeps nearby text, imagery, or UI from crowding the logo.
x/2x/2x/2x/2Do
- •Use the full lockup (mark + wordmark) as primary
- •Icon mark alone is fine for app icons and favicons
- •Place on white, grey-50, or navy backgrounds
- •Maintain clear space of at least half the icon's height
Don't
- •Never stretch, rotate, or skew the mark
- •Never recolor the green disc to another hue
- •Never place on busy photography or patterns
- •Never separate the awning from the storefront
Logo Motion Spec
A three-beat sequence built around the chat-bubble + storefront mark. Use it for splash screens, first-load reveals, and product onboarding.
PAGES
Build → Launch → Ring
Total runtime ~2.4s. Honors prefers-reduced-motion — collapses to a 0.3s fade.
Bubble Pop
0s → 0.6sThe navy rounded-square frame scales in with spring physics (stiffness 220, damping 18). The green disc inside pops a beat later — like a notification arriving.
Storefront Unfurl
0.6s → 1.4sThe navy awning sweeps down from the top of the disc, then the storefront card slides up to meet it. The speech-tail flicks in last with a soft green flash.
Wordmark Reveal
1.4s → 2.4sGREEN PAGES letter-staggers in from the right (0.05s per letter, ease-out expo). A faint green underline sweeps left-to-right under the wordmark to settle.
Timing reference
| Beat | Duration | Easing |
|---|---|---|
| Bubble pop | spring | stiffness 220, damping 18 |
| Disc pop | spring | stiffness 260, damping 16 |
| Awning unfurl | 0.5s | expo out [.22,1,.36,1] |
| Tail flick | spring | stiffness 300, damping 14 |
| Letter stagger | 0.05s × 9 | ease out cubic |
Soft Curves, Confident Corners
The mark is the only sharp geometric element. Everything around it breathes — rounded containers, pill badges, and gentle wave dividers keep the system feeling friendly without losing structure.
Rounded Containers
Use 16px on small surfaces, 24–32px on cards and panels. Reserve 999px (pill) for badges and CTAs.
Pill Badges
Status, counts, and tags ride on fully-rounded pills. Pair coloured backgrounds with one shade darker on hover — never opacity.
Wave Dividers
Soft arcs replace hard horizontal rules between major sections. Use sparingly — one per page is plenty.
Do
- •Use rounded containers with 16–32px radius
- •Pill shapes for tags, badges, and primary CTAs
- •Let the logo be the only geometric anchor
- •Pair brand colors with one shade darker on hover
Don't
- •Use sharp 90° corners on interactive surfaces
- •Separate sections with thin horizontal rules
- •Stack multiple wave dividers in sequence
- •Use opacity-based hover (use darken instead)
Buoyant, Not Bouncy
Movement should feel like a notification landing — soft entrance, gentle settle. Avoid clinical or snappy easing. Everything decelerates.
Fade Up
opacity 0→1, y 24→0 · 0.5s expoBouncy Pop
spring · stiffness 260, damping 18Staggered Cascade
delay: i × 0.08sHover Lift
scale 1.04, y -2 · cubicSoft Float
±8px · 4.5s loopGlow Pulse
opacity 0.6→1 · 3s loopTiming reference
| Context | Duration | Easing |
|---|---|---|
| Micro (hover, toggle) | 0.15–0.2s | ease-out |
| Standard (fade, slide) | 0.4–0.6s | expo out [.22,1,.36,1] |
| Emphasis (pop, bounce) | spring | stiffness 200–300, damping 15–20 |
| Dramatic (hero, page) | 0.7–1.0s | expo out |
Rules
- • Never use linear easing — everything decelerates
- • Exits run faster than entrances (0.2–0.3s)
- • Stagger max 6 items — beyond that, batch in groups
- • No spinning, flipping, or 3D rotations
- • Always respect
prefers-reduced-motion
Click any swatch to copy
Three brand colors anchor the system. Neutrals are keyed to a cool grey ramp that complements navy. Status colors stay close to the brand — success is the brand green itself.
Brand
Neutrals
Status
Semantic Mapping
--primary--primary-foreground--secondary--background--foreground--muted--muted-foreground--accent--borderTwo faces, three roles
Buvera carries the brand voice — wide, confident display type for headlines. Geist Sans does the heavy lifting across the product. Geist Mono labels code, tokens, and metadata.
Hero headlines, the wordmark, and section titles. Use ExtraBold at hero scale; SemiBold for section heads.
font-family: "Buvera", system-ui;Default UI font. Used for navigation, forms, buttons, body copy, and product chrome.
font-family: "Geist", system-ui;Code blocks, CSS variables, hex values, API keys, file paths.
font-family: "Geist Mono", monospace;Type Scale
The glue between everything
Gradients, shadows, radii, and motion utilities that bring the system to life.
shadow-softshadow-heroshadow-navyrounded-mdrounded-lgrounded-xlrounded-fullfloatbtn-bouncepaper-grainRecurring building blocks
Combinations of the primitives above that show up across the Green Pages landing page, marketing surfaces, and in-product moments.
Badges
Feature Card
WhatsApp-Native
Sell, support, and broadcast — all inside the chat your customers already use.
Build in Minutes
Describe your flow in plain English. Paige writes the bot, you ship it.
Meta-Verified
Official Cloud API. Real templates, real delivery, real trust.
Pricing Pill
CTA Group
Ready to launch?
Build your WhatsApp commerce flow in minutes. No code. No credit card.
Navigation Bar