The brand identity and UI kit for DoDumpling, an all-in-one task-management app built for ADHD brains. It fights task paralysis with a playful, low-pressure, dopamine-rewarding experience, led by a mascot named Momo — a round, squishy soup-dumpling with real emotional range. Tone reference: Duolingo.
"Pick one dumpling. Just one. We'll go from there."
This project is consumed as a design system: link styles.css for tokens + fonts, and load
_ds_bundle.js for the React components (window.DoDumplingDesignSystem_07f919).
- Brand package —
uploads/DoDumpling_Brand_Package.docx(the authoritative brand brief: mascot DNA, palette, voice, UI principles). Distilled throughout this system. - Mascot art —
uploads/momo-final.png(the 6-expression Momo sheet). Cropped intoassets/momo/. - Founder UI mockups — 8 reference screens; patterns captured in
guidelines/_ui-reference-notes.md. - Product codebase — github.com/amberbeaumont/dodumpling (private). React 18 + TS + Vite
- Tailwind PWA, Supabase backend. Read for product structure (Today / Brain Dump / Focus / Side Quests), channel colours, and the Outfit type stack. Explore it to build higher-fidelity product recreations.
- Spec:
docs/DoDumpling_Brief_v1.md· Build plan:docs/DoDumpling_Build-Plan_v1.md
- Brand kit reference — github.com/amberbeaumont/brandkit (private; Outfit origin).
Note: the live codebase predates the Momo rebrand — it ships a cat mascot and a orange→pink→purple "candy" gradient. This design system supersedes that: Momo the dumpling and a warm cream/orange palette with no purple. Follow this system, not the old code, for anything brand-facing.
Voice in one line: the friend who texts "okay, just do ONE thing — I believe in you." Warm, playful, a little cheeky, always on your side.
- Person & address: speak to the user as "you"; Momo is "Momo" (third person) or the warm "we" of a teammate ("we'll go from there"). Never corporate "the user".
- Casing: sentence case everywhere. Display headings can be punchy. Reserve ALL-CAPS for genuine celebration only ("YOU DID IT!", "GREAT JOB!").
- Length: short, human, real-friend sentences. One clear action per screen.
- Lead with permission, not pressure: "Just one thing" beats "Complete your tasks."
- Never shame. Delete "failed", "overdue (red)", "streak broken!" from the vocabulary. Missed states are warm: "New day, fresh dumpling. No guilt."
- Celebrate the start, not only the finish — beginning is the hardest part for this user.
- Australian English. No em-dashes (per the product's own working rules).
- Emoji: used very sparingly as a tiny delight accent (✨ on a reward), never as bullets or to carry meaning. The mascot carries personality, not emoji.
The dumpling vocabulary: side quests (distracting little tasks), brain dump / the swirl (offloading chaos), one tiny dumpling (one small step), puff up (the reward / growth), Momo.
Tone flexes by moment: starting → hype-friend; completing → celebration; stalling → deadpan-but-loving; missed → gentle, zero guilt; evening → calm.
| Instead of… | Say… |
|---|---|
| "You have 7 overdue tasks." | "A few things are waiting. Want to start with the tiniest one?" |
| "Streak broken!" | "Streak paused. No drama — let's start a fresh one today." |
| "Task failed to complete." | "Didn't happen today — totally fine. It'll keep." |
Palette — warm, appetising, never neon. Cream base, coral-salmon action warmth, warm-sunrise
reward sparkle, soft mint calm, cocoa (never pure black) for ink.
Action #F98477 · Action press #E8705E · Warm sunrise #FFCF80 · Champagne #FFE894 ·
Cream #FCEBCF · Canvas #FFF6E6 · Surface #FFFDF8 · Mint #6EC4BE · Cocoa #4A3528. See tokens/colors.css.
- Reward is sacred — reserve warm sunrise for genuine celebration so it keeps its dopamine punch.
- Accessible text variants (
--action-ink,--mint-ink, …) pass WCAG AA on cream; pairs documented in the "Accessible pairs" card.
Type — Fredoka (rounded, bouncy display / wordmark / big numbers), Outfit (friendly
headings, buttons, and all body copy). Generous sizing and line-height;
low-friction reading is an accessibility requirement. Scale + weights in tokens/typography.css.
Backgrounds — a calm canvas: cream base with soft, fixed radial washes of peach / gold /
mint light from the edges (see tokens/base.css). No busy patterns, no full-strength gradients,
no photography. Delight comes in bursts, not in the backdrop.
Shape & corners — everything is round. No sharp corners anywhere. Inputs/chips 16px,
cards 20px, heroes/sheets 26px, buttons & toggles fully pill (999px).
Borders & cards — hairline warm borders (--line, cocoa-tinted, never grey/blue). Cards are
soft surfaces with gentle cocoa-tinted shadows (--shadow-card), optionally a cream or mint/gold
tone. Avoid the "rounded card + coloured left-border" trope.
Shadows — soft and warm-tinted only (rgba cocoa). The one loud shadow is --shadow-reward,
a warm peach glow reserved for celebration.
Motion — soft, squishy, bouncy. Default settle --ease-soft; squishy overshoot
--ease-bounce. The signature is Momo's puff-up (momo-puff, scale .86→1.18→1) on task
completion; idle Momo breathes. Buttons press-scale to ~0.95; checks spring in; cards lift
gently on hover. All motion honours prefers-reduced-motion via a global token rule.
Hover / press — hover = subtle brightness(0.96) and/or a gentle lift; press = squishy
scale-down. No harsh colour inversions.
Transparency / blur — used lightly: modal scrims use a translucent cocoa overlay; otherwise surfaces are opaque and calm. No heavy glassmorphism.
Imagery vibe — warm, soft-3D, kawaii. Momo is the hero image; supporting illustration is a small "dumpling world" (steamer baskets, sparkles, side-quest scrolls) used as delight, never clutter.
- System: a custom sticker-style icon set that shares Momo's DNA — soft 3D-feeling
shapes, rounded silhouettes, intrinsic brand colours (no greys, no
currentColorreliance). Use theIconcomponent everywhere instead of emoji or a third-party set. Available glyphs:calendar·today·brain-dump·focus·rewards·fire·star·list·timeline·check. - API: just
name+size. Colour is baked in — don't restyle via CSScolor. Bottom nav default 24px; inline meta 18px; hero stats 32–40px+. - Active-state pattern: since icons stay bright in all states, signal "active" with a pill behind the icon and a colour change on the label (never grey the icon out).
- Emoji / unicode as icons: never. Cross-OS inconsistency breaks the brand.
- The mascot is the primary "icon" — use the
Momocomponent for personality and empty states.
Root
styles.css— the single entry point consumers link (import manifest only).tokens/—colors.css,typography.css,spacing.css(radii/shadow/motion),fonts.css(Fredoka/Outfit via Google Fonts),base.css(element styles + calm-canvas background).assets/momo/— Momo's 8 expressions (happy, hype, reward, deadpan, sleepy, inlove, sad, sidequest). Approved full-body assets: happy, sad, sidequest + two sitting poses. Stand-ins in use for hype, reward, deadpan, sleepy, inlove — replace when new 3D PNGs arrive.assets/logo/—logo_horizontal_primary_transparent-bg.png,logo_horizontal_primary_cream-bg.png,logo_stacked_primary_transparent-bg.png,logo_appicon_primary_cream-bg.png, andlogo.card.html(all lockups).⚠️ Inverse (white on dark) logos not yet created.
Components (window.DoDumplingDesignSystem_07f919)
components/momo/— Momo (mascot, 8 expressions + puff/breathe), MomoBubble (voice).components/core/— Button, IconButton, Card, Badge, Tag, Avatar, Divider, Tooltip, TaskCard.components/icons/— Icon (custom on-brand sticker set: calendar, today, brain-dump, focus, rewards, fire, star, list, timeline, check).components/forms/— Input, Textarea, Select, Checkbox, Switch.components/feedback/— ProgressBar, RewardBurst, EmptyState, Toast, Modal, BottomSheet.
Guidelines & specimen cards (guidelines/) — Colors, Type, Spacing and Brand cards that
populate the Design System tab, plus _ui-reference-notes.md (founder mockup patterns).
Templates (in templates/): three UI inspiration frames — inspiration-mobile/ (~430px, Momo-icon top nav, bottom nav), inspiration-tablet/ (~820px, stacked logo, two-column grid), and inspiration-desktop/ (~1280px+, large stacked logo, sidebar nav, two-column main area). Reference layouts showing the full sweep of components in one frame — inspiration only, not the source of truth for product screens. Each consumes the DS via a sibling ds-base.js.
<link rel="stylesheet" href="styles.css">
<script src="_ds_bundle.js"></script>
<script type="text/babel">
const { Button, Momo, Icon, RewardBurst } = window.DoDumplingDesignSystem_07f919;
// <Momo expression="happy" base="assets/momo" /> — set `base` to the path to assets/momo
</script>Reference values via CSS custom properties (var(--action), var(--r-lg), var(--shadow-card))
rather than hard-coded hex. Build with the voice in mind: make starting the easy part.