The Lovable of WhatsApp
The complete visual language for Green Pages, the team that built Paige, the Lovable of WhatsApp. Build in minutes, launch to millions.
The Green Pages mark pairs a WhatsApp speech-bubble silhouette with a friendly storefront awning. Use the full lockup wherever space allows. The paige product wordmark is its own sub-mark — rules below.
The wordmark used inside the paige app header. Lowercase paige in brand green + [beta] in beta blue. Geist Mono only.
[beta] until paige hits v1. [beta] is the only place blue appears in the brand — once paige leaves beta, the suffix and the colour both retire.Used only when both brands are an explicit subject — e.g. an about page, an investor deck, a press release. Default is parent mark left, separator, product mark right. Reserve a clear space of x/2 around the lockup.
×paige[beta]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/2Below these sizes the mark loses fidelity. Switch to the icon mark (or paige wordmark) at small scales rather than shrinking the full lockup.
| Variant | Minimum | Typical usage |
|---|---|---|
| Full lockup | 120 px wide | Web headers, marketing hero, decks, print |
| Full lockup (print) | 30 mm wide | Business cards, swag, event signage |
| Icon mark | 32 px | Favicons, app icons, social avatars, in-product header |
| Icon mark (print) | 10 mm | Embroidered swag, foil stamp |
| Paige product mark | 14 px text | Product header, marketing wordmark callouts |
Concrete examples of what not to ship. If your draft resembles any of these, revert to a primary variant from the cards above.
A three-beat sequence built around the chat-bubble + storefront mark, now driven by the traced lockup paths. Use it for splash screens, first-load reveals, and product onboarding.
Total runtime ~2.4s. Each element animates as a real traced path — what builds here is the asset designers ship. Honors prefers-reduced-motion — collapses to a 0.3s fade.
0s → 0.8sThe icon arrives as a unit — scale 0.85 → 1, spring (220, 18). The white speech bubble + tail pop in together at a quarter-beat, like a notification landing.
0.8s → 1.6sGreen disc pops on top of the bubble. The mint and white storefront halves slide up into the disc. The navy awning drops down last to crown the storefront.
1.6s → 2.6sGREEN letter-staggers in (brand green), then PAGES (white) — 0.05s per letter, ease-brand. A green underline sweeps left-to-right to settle the lockup.
| Beat | Duration | Curve |
|---|---|---|
| Icon arrive | spring | stiffness 220, damping 18 |
| White bubble pop | spring | stiffness 260, damping 16 · delay 0.25s |
| Green disc pop | spring | stiffness 280, damping 16 · delay 0.55s |
| Storefront slide | 0.50s | ease-brand · delay 0.85s |
| Awning drop | 0.55s | ease-brand · delay 1.15s |
| Letter stagger | 0.05s × 9 | ease-brand · from delay 1.55s |
| Underline sweep | 0.60s | ease-brand · delay 2.15s |
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.
Use 16px on small surfaces, 24–32px on cards and panels. Reserve 999px (pill) for badges and CTAs.
Status, counts, and tags ride on fully-rounded pills. Pair coloured backgrounds with one shade darker on hover — never opacity.
Soft arcs replace hard horizontal rules between major sections. Use sparingly — one per page is plenty.
Movement should feel like a notification landing — soft entrance, gentle settle. Avoid clinical or snappy easing. Everything decelerates.
opacity 0→1, y 24→0 · 0.5s expospring · stiffness 260, damping 18delay: i × 0.08sscale 1.04, y -2 · cubic±8px · 4.5s loopopacity 0.6→1 · 3s loop| 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 |
prefers-reduced-motionThree brand colors anchor the system, with Beta Blue scoped to the paige product mark. Neutrals follow a cool grey ramp that complements navy. Status colors stay close to the brand — success is the brand green itself.
Used only inside the paige product wordmark. Do not introduce blue anywhere else.
Five-stop scale per brand color. Use 50/200 for surfaces and washes, 500 as the base, 700/900 for hover states, depth, and on-color text. Always pick from the scale — never use ad-hoc shades.
base #131D37base #81D741base #DCF8C6Tokens map differently depending on surface. Marketing surfaces lead with brand green as primary; in-product chrome (the paige app) leads with a neutral primary and treats brand colors as accents. Both maps share the same hex palette.
--primaryGreen — CTAs, links, accents--primary-foregroundNavy — text on green--secondaryNavy — secondary CTAs, dark surfaces--secondary-foregroundWhite — text on navy--backgroundWhite — page base--foregroundInk — primary text--accentGreen Soft — highlight panels--mutedGrey 50 — subtle backgrounds--muted-foregroundGrey 500 — captions, hints--borderGrey 200 — dividers, outlines--primaryNeutral dark — primary buttons, headers--primary-foregroundWhite — text on primary--brandNavy #131D37 — brand-accent buttons (Send, Deploy primary)--successGreen — Deploy succeeded, confirmations--accentGreen Soft — chat bubbles, subtle highlights--backgroundWhite — app canvas--foregroundNear-black — primary text--mutedGrey 100 — subdued surfaces--muted-foregroundGrey 500 — captions, placeholders--borderGrey 200 — dividersContrast ratios for the most common pairings. Aim for AA on body text and AAA where possible. Anything marked Fail must not ship.
| Pairing | Ratio | WCAG | Usage |
|---|---|---|---|
| Aa sample | 15.6 : 1 | AAA | Body & headlines on navy |
| Aa sample | 15.6 : 1 | AAA | Body & headlines on white |
| Aa sample | 8.4 : 1 | AAA | Text on green CTAs |
| Aa sample | 13.1 : 1 | AAA | Text in chat bubbles |
| Aa sample | 5.4 : 1 | AA | Accent text & paige wordmark on navy |
| Aa sample | 4.5 : 1 | AA | [beta] suffix on white |
| Aa sample | 3.4 : 1 | AA Large | [beta] suffix on navy — large text only |
| Aa sample | 1.9 : 1 | Fail | Never — white on green is unreadable |
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 the paige product wordmark.
Hero headlines, the wordmark, section titles. ExtraBold at hero scale; SemiBold for section heads. Never below 24 px.
font-family: "Buvera", system-ui;Default UI font across marketing and product. Navigation, forms, buttons, body copy, in-product chrome.
font-family: "Geist", system-ui;Code, CSS variables, hex values, file paths, eyebrow tags — and the paige product wordmark.
font-family: "Geist Mono", monospace;A live composition at real scale. Eyebrow in Geist Mono, headline in Buvera ExtraBold, body in Geist Regular, in-line accents in Geist Mono.
Paige turns plain English into production-grade WhatsApp commerce flows. Set a price in settings.json and deploy from the same conversation that built the bot. No code ceremony, no infrastructure.
Marketing sizes use Buvera; UI sizes use Geist Sans; eyebrow tags use Geist Mono. Stay on the ladder — don't invent intermediate sizes.
A visual showcase of the shadcn primitives used inside the paige app. Same components, same variants. Reach for these instead of native HTML or hand-rolled equivalents.
Status labels, tags, counts
Hover hint for every interactive button
Toggle on/off — never a native checkbox
Text fields, file uploads
Single-value dropdown — replaces native <select>
Action menu on click
Tabbed interfaces
Forms and informational modals
Destructive / irreversible confirmations
Transient feedback — never window.alert()
If you're about to write window.alert(), a native <select>, or a hand-rolled hover style — stop, and reach for the matching primitive above. Consistency across paige and the marketing site starts here.
Gradients, shadows, radii, and motion utilities that bring the system to life.
shadow-softshadow-heroshadow-navyrounded-mdrounded-lgrounded-xlrounded-fullfloatbtn-bouncepaper-grainCombinations of the primitives above that show up across the Green Pages landing page, marketing surfaces, and in-product moments.
Sell, support, and broadcast — all inside the chat your customers already use.
Describe your flow in plain English. Paige writes the bot, you ship it.
Official Cloud API. Real templates, real delivery, real trust.
Build your WhatsApp commerce flow in minutes. No code. No credit card.
Playful but precise. The voice of someone who knows the product cold and respects the reader's time. Lovable's warmth, Linear's economy. If a sentence sounds like a press release, rewrite it.
Say the thing. Don't dress it up. If the sentence sounds like a brochure, rewrite it as if you were telling a friend.
Vary length, but lean short. Long sentences belong in the README, not the hero. Use periods like fences.
"Deploy in under a minute" beats "Fast and reliable." Numbers, nouns, verbs — not adjectives stacked on adjectives.
A little wink is fine. Punching down isn't. We are not the smartest thing in the room — paige is.
Talk about APIs, deploys, flows — but assume the reader sells things, not ships infrastructure. Define unusual terms once, then use them.
Same brand, four registers. The dial moves; the voice stays.
Confident, slightly cheeky. Says what's true, not what's safe.
Quiet, descriptive, never pleading. Buttons say what they do.
Acknowledge, explain, give a next step. No "oops", no winking.
Warm, direct, accountable. Name the problem, name the fix, name the timeline.
Real rewrites. Use these as a calibration tool — if your draft sounds like the left column, push it toward the right.
Revolutionize your business with AI-powered conversational commerce.
Sell on WhatsApp. Without writing the bot.
Unlock the power of WhatsApp at scale.
Launch to millions on the messaging app they already use.
Oops! Something went wrong. Please try again.
We couldn't save that. The connection dropped — your last edit is still in the editor.
Click here to learn more.
See the pricing breakdown
We are excited to announce that paige now supports broadcast templates.
Broadcasts are live. Send templated messages to anyone who's opted in.
Game-changing AI that supercharges your team's productivity.
Describe a flow in English. Paige builds the bot, writes the code, ships it.
Your free trial is ending soon!
Trial ends in 3 days. Add a card to keep your bot live.
These signal a press release, not a person. If you find one in a draft, swap it for the alternative on the right.
A paragraph that's all medium sentences sounds robotic. A paragraph that's all short sentences sounds breathless. Aim for a mix — most short, the occasional longer one to give the reader a place to breathe. Read everything aloud. If you run out of air, the sentence is too long.
Sanctioned lines you can drop into ads, video, social, decks. Anything not on this list needs to clear the voice principles in the previous section before it ships.
Single-line hero tagline. Used in marketing site hero, decks, primary ads.
For ads, social posts, deck slides, video openers. Use the closest match to the context — don't rewrite without running it past the voice principles.
paige in body copy. "Paige" capitalised is only OK at the start of a sentence.[beta] in the visual wordmark. In body copy, drop the suffix.End-of-email, video outro, and footer lines. Keep them dry — the farewell is not where the brand strains for personality.
The product is the imagery. Most of what we ship is a paige screenshot in a brand-treated device mockup. No business-people stock, no generic startup photography. When we need atmosphere, we use abstract shapes and the navy/green glow — not models in offices.
The hero formula: paige screenshot inside a stylised phone frame, against a navy backdrop with a soft green ambient glow. Works on landing, social, video, and decks.
Three backdrops, ranked by frequency. Navy ambient is the default; white minimal is for product-doc surfaces; green-soft accent is reserved for chat-focused stories.
Categories that explicitly do not belong on any Green Pages or paige surface. If a draft uses one, swap it for a product screenshot or an abstract shape composition.
When a screenshot won't do the job, reach for an illustration — never a stock vector. Spot illustrations are geometric, drawn only from the brand palette, and live in marketing surfaces (never the in-app UI).
Built from circles, rounded rectangles, and the speech-bubble silhouette. No gradients except the brand hero. No skeuomorphism.
Navy, Green, Green Soft, plus one neutral. Never introduce a colour outside the palette to make an illustration “pop.”
Use the paper-grain utility for atmosphere on hero compositions. Skip texture for in-line spot illustrations.
Five placeholder marks reserved as the spot-illustration anchors. Final art will be drawn in a follow-up pass — these stubs lock the slot, scale, and palette.
Three image categories, three jobs. Don't substitute one for the other.
| Use this | When | Don't use it for |
|---|---|---|
| Screenshot | Showing what paige actually does | Hero atmosphere or abstract concepts |
| Illustration | Anchoring a concept (commerce, reach, conversations) | Replacing a real product UI demo |
| Abstract shape | Background atmosphere, section breaks, decks | Standing in for an icon or illustration |
Icons are Lucide React, full stop. Same shape across paige and marketing. Stroke widths are consistent; sizes are fixed. Other icon libraries are off-limits.
Three icon sizes cover 95% of cases. Inline with text uses 16 px; standalone or paired with a single label uses 20 px; large feature callouts use 24 px. Don't invent intermediate sizes.
Lucide ships at stroke-width="2" by default. Don't override unless an icon is >48 px — at which point step down to 1.5.
stroke-width="2"stroke-width="1.5"Never bold strokesIcons inherit from currentColor. Default navy on light, white on navy, destructive on destructive surfaces. Don't tint icons green unless they pair with a green CTA.
The everyday roster. If your feature needs an icon, look here first and reuse the existing meaning before introducing a new one.
SendBellSearchSettingsRocketMessageSquarePlusTrash2Edit2EyeExternalLinkCopyChevronDownCheckXAlertCircleLoader2DownloadFilterUserLogOutMixing icon libraries breaks visual consistency instantly — the stroke, corner radius, and grid all subtly differ. Stick to Lucide.
Every animation on every Green Pages surface uses the same easing curve and pulls its duration from the same four-step scale. Same dial, same drift — across web, video, and the in-product UI.
cubic-bezier(0.22, 1, 0.36, 1)An ease-out curve with a snappy entrance and a long, soft tail. Things appear quickly, settle slowly. Already the default in every framer-motion transition on the site.
Pick the closest step. Don't invent durations between rungs — half-measures dilute the rhythm.
Elements arrive fast and settle, then leave the way they came. ease-brand is already ease-out — flip the curve for exits (or use ease-in ).
Sibling elements animate in sequence, not at once. 50 ms for small lists, 80–100 ms for hero-scale staggers.
Specs a video editor or motion designer can replicate in After Effects / Premiere / a browser. Same brand curve, same scale, different durations.
Square, vertical, horizontal. Each ad pulls its headline from the Tagline library, its CTA from the in-app brand variants, and its backdrop from the imagery system. Below each preview: the layout spec a designer can replicate in Figma or Canva.
Click Show safe areas to overlay the layout grid: logo zone, headline zone, CTA zone, and the 8% safe-area inset that keeps content clear of platform UI (Stories caption, Reels icons).
Describe the flow in English — paige builds, codes, and ships it.
Paige writes the bot for you.
Conversations that ship product.
Pixel values for the production-size template (not the scaled preview above). Match these in Figma at 1× and the artwork translates cleanly to every channel.
| Format | Safe-area inset | Headline size | Logo | CTA |
|---|---|---|---|---|
| 1 : 1 · 1080² | 80 px (~8%) | 96 px Buvera ExtraBold | Top-left · 60 px tall | Bottom-left · green pill |
| 9 : 16 · 1080 × 1920 | 160 px top / 240 px bottom (caption + reactions safe zone) | 108 px Buvera ExtraBold | Top-centre · 56 px tall | Centre-aligned above safe-area |
| 16 : 9 · 1920 × 1080 | 120 px (~6%) | 120 px Buvera ExtraBold | Top-left · 72 px tall | Bottom-right · green pill |
hero variant (green pill) on light ads; hero-secondary on green-soft.Four reusable beats every video needs: an intro to open, an outro to close, a lower-third for talking heads, and a subtitle treatment that survives autoplay-muted viewing. Replicate the specs in After Effects, Premiere, or a browser-based render.
Opens every video — landing-page demos, ads, customer stories. Logo blurs in, settles, ambient green glow expands. Hold on final frame for ~600 ms before content begins.
Closes every video. Logo enters first, URL fades in 200 ms later, tagline 400 ms later. Final frame holds 1.5 s before fade-out for editor handoff.
For customer-story or interview videos. Pill enters from the left, holds while the speaker introduces themselves, exits the way it came. Lives in the lower-left quadrant — clear of subtitle area.
Most viewers watch autoplay-muted. Every produced video ships with burned-in subtitles in this style. Never bottom-aligned to the frame — always 8% safe-area inset.
cubic-bezier(0.22, 1, 0.36, 1)for entrance andcubic-bezier(0.7, 0, 0.84, 0)for exit.One marketing template for outbound comms, one product template for in-product / transactional. Both are mobile-first, both lean on the type scale and palette already defined. Self-contained HTML — download, fill in copy, send.
Lead with the Green Pages parent mark. Bold display headline, generous spacing, single green pill CTA. Use for product launches, newsletters, partnership news.
Lead with the paige product wordmark in the header bar. Dense layout, monospace metadata, flat navy CTA. Use for transactional and product-system emails.
-apple-system, Segoe UI, Arialtakes over. Buvera is never used in email.Everything you need to apply the brand off-site. Logos, the font family, email templates. Hand this URL to agencies and contractors so they pull from a single source.
PNG plus self-contained SVG (font embedded) for every variant.
Display face — licensed for use by external collaborators on Green Pages and paige projects.
Self-contained HTML — open, fill in copy, send. Inline CSS, mobile-tested.
1:1, 9:16, 16:9 layouts. Figma source to be added.
Figma source file lands here once the working file is ready. In the meantime, the on-page previews in section 17 are pixel-true wireframes — replicate at 1× and the artwork translates.
New collaborator? Agency working on an ad? Video editor cutting an intro? Point them here. The brand stays consistent because everyone pulls from the same standard.