Design Language v1 — bubbly in shape, premium in restraint.
One water hue. One rounded voice. Coral only where money moves.
The mascot is the messenger, and nobody ever needs to chat.
01 · Color
One hue family, three registers
Default blue (hue 210–225 — Bootstrap, Tailwind, every AI template) is the NPC zone.
Water lives at hue 190–205: cyan-shifted, luminous, actually aquatic.
Neutrals are blue-tinted, ink is petrol not black, and the accent is scarce enough to mean something.
Deep End — the app shell & feed. Dark-first, because the product is video.
Canvas
#0A141A
Surface
#10202A
Primary
#3EC6FF
Tint
#12303F
Ink on dark
#E9F4F9
Ink muted
#8FB0C0
Splash — light surfaces: order sheets, dashboards, onboarding.
Canvas
#F5FAFC
Card
#FFFFFF
Primary
#00A8E8
Pressed
#0086C2
Tint
#D9F3FF
Ink
#0B2836
Signals — the two colors with fixed meanings, everywhere.
Coral = money.
Prices, payouts, earnings, the Pay button. #FF6B57 on dark, #FF5B45 on light. It appears nowhere else — so when a business sees coral, it costs; when a creator sees coral, they earn.
Mint = done.
Success, approvals, delivered states. #2BD9A8. Never competes with coral, never used decoratively.
Gradient = brand moments.
135°, #00D5C8 → #0795E8. Splash screen, onboarding, mascot celebrations, the wordmark. Never on UI controls — the Messenger lesson.
02 · Shape & type
Bubbly is a radius floor and a weight ceiling
Token
Value
Rule
Type family
Nunito (variable 400–900)
One family only, weight-only hierarchy — the Airbnb rule. Body 16–17/500 · emphasis 700 · display 24–28/800–900. This page previews with your system's rounded face; the app ships Nunito.
Radius
12 / 16 / 20 / 999
Nothing sharper than 12px, ever. Chips, search and mascot bubbles are full pills. The contrast between radii is the hierarchy.
Spacing
4px grid — 4/8/12/16/24/32/48/64
Tight inside groups, generous between them.
Depth
Two systems only
(a) pressable 4px bottom-edge on buttons · (b) one soft shadow tier for floating cards (0 4px 16px @ 8%). Never both on one element.
Motion
150 / 250 / 400ms
Taps 150 · transitions 250–300 · celebrations 400–500. Springs with overshoot for mascot & celebration; plain decelerate for navigation.
Icons
Lucide, 1.5–2px stroke
Rounded caps to echo the radius language. No emoji as icons.
03 · Feel
Press these
The single highest-leverage trick from Duolingo: a flat fill with a 4px solid darker
bottom edge. Press it and the button physically sinks. Paired with a ripple — one of
only two water motifs in the whole app (the other is the liquid-fill meter). Ripple + fill, nothing else.
Everywhere-water is a theme park; two motifs are a brand.
Your balance
S$480 pending · S$1,240 available
Fills as jobs complete — Carousell pending-psychology, rendered as liquid.
04 · The mascot
A courier, not a clown
The droplet is the communication layer — businesses and creators never talk;
both talk to it. Flat vector, one highlight, big eyes, no blush marks, no stick limbs
(that's children's-app territory). Built in Rive: ~15× smaller than Lottie, real-time
state blending, interruptible.
It owns one surface — the message/inbox layer. Never floats over the feed, forms or payment. Predictable presence is what separates Duo from Clippy.
Fact before personality. First line is always the payload: "Approved — S$80 incoming." Character copy never buries the news.
Every message ends in a button. View brief · Fix & resubmit · See payout. A courier, not a chatbot.
Bad news: concerned state, sender role. "This one wasn't a match — here's what they're looking for." The droplet is on the creator's side against an abstract outcome. Never sad/crying — users shouldn't manage the mascot's feelings.
Errors and crashes are plain UI. The mascot is never the face of a malfunction.
Celebration is rationed. Full splash + confetti: first approval, payments, streaks. Everything else gets a small bounce. Rarity keeps delight premium.
It never sells. One promo delivered by the droplet and its neutrality — the entire trust model — is dead.
Two registers, one voice. Playful with creators, efficient-warm with businesses. Guilt-tripping lives only in push notifications, never in-app.
05 · The five screens
Blueprint, pattern by pattern
Feed — TikTok mechanics, marketplace trust
Top tabs: Content Creator | Business Owner — the TikTok Following/FYP pattern. Not a settings fork: anyone swipes between both sides. Transparency by design — creators study competitors' prices, businesses browse the other side for reference
3-player recycling pool, ~2s prefetch, autoplay at 30% visibility
Orientation: portrait-locked on phones; on wide screens (tablet / web) the 9:16 video holds a centered column with ambient blurred wings from the video's own edges — TikTok-web pattern, no side-cropping needed
Order sheet — the video is the brief
Half-sheet slides over the still-playing video
Fiverr-style tier tabs + rush toggle with inline price delta
One required input: paste your IG / website / Maps link — AI builds the brief
Must-say limit: 3 chips × 80 chars. No scripts, no PDFs, structurally.
Final total always visible on the sticky pay button
Job board — creators come for money
Balance header card is the first pixel (Grab wallet pattern)
Zone 1: active orders strip · Zone 2: tile grid · Zone 3: recommendations
Creator: pending → available state machine, "+S$150 pending" animates in the moment a client pays
Auto-release if client silent past review window (paused if revision opened)
Onboarding — zero friction, Airbnb-gated
No fork, no quiz, no signup wall. The app opens straight into the live feed — the feed IS the onboarding
Role comes from the top tab, not a settings choice. The + button is contextual: on the Creator tab it creates a listing, on the Business tab it posts a request
Auth appears only at the moment of action — publish a listing, place an order, apply to a job. Browse forever anonymously, exactly like Airbnb
The droplet's tour shrinks to 3 contextual hints on first scroll — advance by doing, dismiss by scrolling
Dashboards personalize once signed in; until then the right tab shows what a dashboard will look like, with real numbers blurred
06 · The never list
Rules that keep it premium
No "make offer" button. Fixed prices are what keep chat dead.
No fee surprises. The first total is the final total.
No urgency theater. No countdown timers, no "someone just bought" toasts.
No 4th nav tab. Scroll · + · Dashboard. The constraint is the design.
No mascot on errors or promos. Courier neutrality is the trust model.
No brand color carpet-bombing. Neutrals do 90% of the work; cyan is the reward.
No hue 210–225. The NPC zone stays banned in perpetuity.
No gradients on controls. Brand moments only.
No signup before value. Auth exists only at publish, order, or apply — never at the door.