DoDumpling — Design Language Reference

"Pick one dumpling. Just one. We'll go from there."

Living design document. Distilled from brand references, UI mockups, and the Momo character asset sheet. Use alongside styles.css and the component library.

Brand essence

DoDumpling exists to fight task paralysis for ADHD brains. Every design decision asks: does this reduce anxiety or add to it?

Three feelings the product must always produce:

Safe to start — beginning feels easy, low-stakes
Worth celebrating — finishing, even tiny things, feels genuinely good
No shame in stopping — missed tasks met with warmth, never red alerts

Momo — the mascot

Momo is a round, squishy soup-dumpling (xiao long bao) with real emotional range. She is the brand's primary emotional guide in the UI — not decoration.

Anatomy

Feature	Detail
Body	Soft matte dough skin `#F0E5D0`–`#E8D8B8`, warm gradient
Pleats	Gathered twist on top — the "crown"
Steam	Two–three wispy curls, off-white/translucent
Eyes	Galaxy/iridescent — deep purple-blue with sparkle flecks
Cheeks	Round rose blush, soft-edged
Mouth	Small, expressive — varies by emotion
Limbs	Stubby rounded nubs: two arms, two feet. No fingers
Shadow	Soft warm diffuse when floating; contact ellipse when grounded

Expression set

Name	When	Key signal
Happy	Default / home	Open smile, bright eyes
Hype	Starting a task	Wide open mouth, arms raised
Reward	Task complete / puff-up	Glowing golden, euphoric
Sleepy	Evening / wind-down	Half-closed eyes
In love	Streaks, favourites	Heart pupils, happy blush
Deadpan	User stalled	Flat line mouth — never mean
Thinking	Loading / planning	Finger on chin, question bubble
Surprised	Unexpected / delight	Wide eyes, open mouth
Sad	Missed task	Downturned mouth, single tear
Silly	Delight / humour	Tongue out, winking, sparkles
Worried	Error / are you sure?	Worried brows, sweat drops
Confused	Unclear state	Question mark bubble
Supportive	Encouragement	Clasped hands, hearts
Side-quest distracted	Off-task	Eyes following a butterfly

Momo rules

Never aggressive. Even Angry Momo is "huffy", not threatening
Steam always present except when sleeping or very sad
Scale with emotion — Reward Momo is physically larger (puffed); Deadpan is slightly squished
Momo is the primary illustration — never add generic clipart alongside her

Puff-up reward sequence (3 stages)

Normal — standard Momo, task-done, light steam
Gathering energy — slightly flattened, orange + teal energy rings orbit
Golden puff-up — enlarged ~30%, warm golden glow, confetti stars burst, euphoric

Animation: 520ms (--t-puff). Keyframe momo-puff: scale .86 → 1.18 → 1. Gate on @media (prefers-reduced-motion: no-preference).

Asset files

Naming: momo_[pose]_[expression]_[bg].png (all lowercase, underscores between segments).

File	Use
`assets/momo/momo_jumping_happy_transparent-bg.png`	Happy — default / home (✓ approved full-body)
`assets/momo/momo_jumping_happy_cream-bg.png`	Happy on cream bg (✓ approved)
`assets/momo/momo_standing_sad_transparent-bg.png`	Sad — missed task / gentle nudge (✓ approved full-body)
`assets/momo/momo_standing_distracted_transparent-bg.png`	Side-quest / distracted (✓ approved full-body)
`assets/momo/momo_sitting_waving-faceon_transparent-bg.png`	Sitting + waving, face-on (✓ approved)
`assets/momo/momo_sitting_waving-side_transparent-bg.png`	Sitting + waving, side (✓ approved)

Stand-ins in use for: hype, reward, deadpan, sleepy, inlove — awaiting new full-body 3D PNGs (arms + legs + steam, transparent bg).

Logo

Wordmark

Typeface: Fredoka 700
Text: "Do Dumpling" — title case, two words
Colour: Cocoa #4A3528 on light; cream #FBEFDD on dark

Lockups

Naming: logo_[layout]_[variant]_[bg].png (all lowercase, underscores between segments, hyphens within a segment).

Variant	File
Primary horizontal	`assets/logo/logo_horizontal_primary_transparent-bg.png`
Primary horizontal on cream	`assets/logo/logo_horizontal_primary_cream-bg.png`
Stacked	`assets/logo/logo_stacked_primary_transparent-bg.png`
App icon	`assets/logo/logo_appicon_primary_cream-bg.png`

⚠️ Inverse (white-on-dark) lockups not yet created.

Rules

Minimum width: 120px (use icon only below this)
Clear space: height of the "D" on all sides
Never stretch, rotate, shadow, or outline the logo
Never place on busy photographic backgrounds without a scrim

Colour system

Full tokens in tokens/colors.css / styles-full.css.

Brand palette

Token	Hex	Role
`--canvas`	`#FFF6E6`	App canvas / page background
`--surface`	`#FFFDF8`	Card / panel background
`--cream`	`#FCEBCF`	Mascot body, warm card surfaces
`--cocoa`	`#4A3528`	Primary ink — never `#000`
`--action`	`#F98477`	Primary action — button, checkbox, key UI
`--action-press`	`#E8705E`	Pressed / active state
`--mint`	`#6EC4BE`	Calm / rest / done — the only cool hue
`--reward`	`#FFCF80`	Reward only — warm sunrise, dopamine signal
`--reward-light`	`#FFE894`	Champagne — glowing reward card bg

Action colour

Token	Hex	Note
`--action`	`#F98477`	Coral salmon — warm, inviting, never terracotta
`--action-press`	`#E8705E`	Pressed state — deeper coral
`--action-tint`	`#FFE4DE`	Soft tint — chip bg, hover bed

Why salmon? Sits between peach and coral — warm and appetising, pink enough to never read as orange or terracotta.

Sacred rules

Reward is sacred. --reward (warm sunrise) only for genuine celebration. Overuse kills the dopamine punch.
No pure black. Cocoa #4A3528 is the darkest ink.
No purple. Old codebase had a candy-purple gradient — superseded entirely.
No pink. Removed from the palette — not an approved brand hue.
Status colours are warm. No harsh reds. --urgent is a warm amber nudge.
Accessible text variants (--action-ink, --mint-ink, etc.) pass WCAG AA on cream.

Calm canvas (background)

Three soft fixed radial washes over the cream base:

Peach wash from top-right
Gold warmth from top-left
Mint coolness from bottom-centre

Typography

Two families only. Tokens in tokens/typography.css.

Role	Family	Used for
Display	Fredoka	Hero headings, wordmark, reward numbers, Momo speech
Everything else	Outfit	Body copy, UI labels, buttons, captions, metadata

Type scale

Token	Size	Weight	Use
`--fs-display`	56px	600 Fredoka	Hero / reward numbers
`--fs-h1`	38px	600 Fredoka	Screen title
`--fs-h2`	28px	700 Outfit	Section header
`--fs-h3`	22px	600 Outfit	Card title
`--fs-lg`	18px	500 Outfit	Lead / emphasis
`--fs-body`	16px	400 Outfit	Default UI text
`--fs-sm`	14px	500 Outfit	Secondary / meta
`--fs-xs`	12px	600 Outfit	Caption / label
`--fs-btn`	16px	600 Outfit	Button label

Rules

Minimum 16px body text — accessibility requirement
Sentence case everywhere. ALL-CAPS only for celebration ("GREAT JOB!")
No Inter, no Roboto, no Arial

Layout & spacing

Spacing scale (4px base)

4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64px Use gap: with flex/grid — never bare margins between siblings.

Radii — everything round

Token	Value	Use
`--r-xs`	8px	Tiny chips, tooltips
`--r-sm`	12px	Tags, small badges
`--r-md`	16px	Inputs, form controls
`--r-lg`	20px	Standard cards
`--r-xl`	26px	Hero cards, bottom sheets
`--r-2xl`	34px	Large feature panels
`--r-pill`	999px	Buttons, toggles, avatars

Minimum tap target: 44px (--tap-min).

Motion

Easing

Token	Curve	Feel
`--ease-soft`	`cubic-bezier(0.22,1,0.36,1)`	Gentle settle
`--ease-bounce`	`cubic-bezier(0.34,1.56,0.64,1)`	Squishy overshoot
`--ease-out`	`cubic-bezier(0.16,1,0.3,1)`	Fast out

Duration

120ms fast · 200ms base · 320ms slow · 520ms puff

Signature keyframes

Name	Use
`momo-puff`	Task complete — scale `.86 → 1.18 → 1`
`momo-bob`	Idle float — `translateY 0 → -5px → 0`
`momo-breathe`	Resting — `scale 1 → 1.025 → 1`
`sparkle-pop`	Reward stars — scale + rotate in
`xp-float`	Score floats up and fades

Rules

All motion gated on @media (prefers-reduced-motion: no-preference)
No infinite decorative loops on content elements
Button press: scale(0.95) on :active
Card hover: translateY(-2px) + --shadow-lift

Component patterns

Buttons

Variant	Bg	Text	Use
Primary	`--action` `#F98477`	White	Main CTA
Secondary	`--surface`	`--text`	Secondary action
Soft	`--action-tint`	`--action-ink`	Tertiary / inline
Ghost	Transparent	`--text`	Minimal / nav
Reward	`--reward`	`--text-on-gold`	Celebration CTA only

All buttons: pill radius, 48px min height, Outfit 600.

Cards

Background: --surface default, --surface-cream for warmth
Border: 1px --line — warm, never grey
Shadow: --shadow-card; --shadow-lift on hover
Radius: --r-lg standard, --r-xl hero
No coloured left-border accent

Focus Timer

Background: --cream-light
Ring: --mint stroke, stroke-linecap: round
Track: --mint-tint
Timer digits: Fredoka, --fs-display+, --cocoa
Momo sits inside the ring

Reward / celebration

Background: --gold or --gold-tint
Momo: puffed-up, --shadow-reward glow
Stars: sparkle-pop animation, multi-colour
Headline: Fredoka 700, ALL-CAPS

Iconography

System: custom sticker-style icon set (components/icons/Icon.jsx) — shares Momo's DNA, intrinsic brand colours, no currentColor reliance
Glyphs: calendar · today · brain-dump · focus · rewards · fire · star · list · timeline · check
API: <Icon name="…" size={n} /> — that's it. Colour is baked in, don't restyle
Size: 18px inline meta · 24px bottom nav · 32–56px feature
Active state: colour the label, never grey the icon — keep all icons bright
No emoji as icons, no Lucide, no Material Icons

Voice

Moment	Tone	Example
Starting	Hype-friend	"Let's go! One dumpling, coming right up."
Mid-task	Calm focus	"You're in it. Momo's watching."
Completing	Celebration	"YOU DID IT! Momo puffed up — big time."
Stalling	Deadpan-loving	"Still here. No rush. Just… here."
Missed	Zero guilt	"New day, fresh dumpling. No guilt."
Error	Warm	"Something went sideways. Want to try again?"

Always: sentence case · Australian English · no em-dashes · no emoji bullets.

File map

styles.css              ← entry point (link this in consumers)
styles-full.css         ← single-file consolidated build
design.md               ← this document
skill.md                ← how to use this DS to build new work
CLAUDE.md               ← Claude project memory

tokens/
  fonts.css             ← Google Fonts (Fredoka + Outfit)
  colors.css            ← palette + semantic aliases
  typography.css        ← type scale, families, weights
  spacing.css           ← spacing, radii, shadows, motion keyframes
  base.css              ← resets + calm-canvas background

assets/
  logo/                 ← horizontal, stacked, app-icon, no-bg variants
  momo/                 ← 6 core expression PNGs + sitting + hero + grids

components/             ← source components → _ds_bundle.js
  core/                 Button, IconButton, Card, Badge, Tag, Avatar, Divider, Tooltip, TaskCard
  icons/                Icon (custom sticker-style set)
  forms/                Input, Textarea, Select, Checkbox, Switch
  feedback/             ProgressBar, RewardBurst, EmptyState, Toast, Modal, BottomSheet
  momo/                 Momo, MomoBubble

guidelines/             ← @dsCard HTML cards for the Design System tab

templates/              ← UI inspiration frames (mobile / tablet / desktop)
  inspiration-mobile/   InspirationMobile.dc.html (~430px)
  inspiration-tablet/   InspirationTablet.dc.html (~820px)
  inspiration-desktop/  InspirationDesktop.dc.html (~1280px+)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DoDumpling — Design Language Reference

Brand essence

Momo — the mascot

Anatomy

Expression set

Momo rules

Puff-up reward sequence (3 stages)

Asset files

Logo

Wordmark

Lockups

Rules

Colour system

Brand palette

Action colour

Sacred rules

Calm canvas (background)

Typography

Type scale

Rules

Layout & spacing

Spacing scale (4px base)

Radii — everything round

Motion

Easing

Duration

Signature keyframes

Rules

Component patterns

Buttons

Cards

Focus Timer

Reward / celebration

Iconography

Voice

File map

FilesExpand file tree

design.md

Latest commit

History

design.md

File metadata and controls

DoDumpling — Design Language Reference

Brand essence

Momo — the mascot

Anatomy

Expression set

Momo rules

Puff-up reward sequence (3 stages)

Asset files

Logo

Wordmark

Lockups

Rules

Colour system

Brand palette

Action colour

Sacred rules

Calm canvas (background)

Typography

Type scale

Rules

Layout & spacing

Spacing scale (4px base)

Radii — everything round

Motion

Easing

Duration

Signature keyframes

Rules

Component patterns

Buttons

Cards

Focus Timer

Reward / celebration

Iconography

Voice

File map