Design System

Cuak
Visual System

The behavioral design system behind Cuak — color tokens, mascot emotional states, 60/40 zoning architecture, and annotated UI components. Every pixel has a psychological purpose.

Mascot UX Fintech Behavioral Design ESA Framework
01 — Color Tokens

Palette built for emotional clarity

Each color maps to an emotional state. No decorative choices — every token has a behavioral role.

Accent — Happy

--accent

#6fba96

Warning — Worried

--accent-warn

#fbbf24

Sad — Reset

--accent-sad

#9B8FD4

Background

--bg

#1E1A2E

Card Surface

--bg-card

#2D2845

Text Primary

--text

#F2EFE8

02 — Mascot States

4 emotional states, 1 behavioral arc

Each state maps to a psychological moment in the user's credit journey. The duck reacts — the user feels seen, not judged.

Cuak neutral, waiting state

Neutral — Ready

Trigger: app open, no recent activity

Pure potential. No pressure. Cuak waits with expectation — not judgment.

Neutral state
Cuak happy, on track state

Happy — On Track

Trigger: credit usage healthy / improving

Positive reinforcement. Cuak celebrates consistency — the system rewards, not just records.

Core Drive 2: Accomplishment
Cuak worried, at-risk state

Worried — At Risk

Trigger: approaching credit threshold

Loss aversion activated. Cuak's distress makes risk visible and empathetic — not punitive. Most powerful retention state.

Core Drive 8: Loss Aversion
Cuak alert, reset state

Sad — Reset

Trigger: threshold crossed

Emotional cost of loss, followed by resilience. Cuak mourns with the user — then invites them back without shame.

Guilt-free restart
03 — Process

Reference pass, and what got cut

Before the states shown above shipped, the character went through a reference pass — front, back and a raised-arm gesture — to lock proportions before drafting expressions. Not every take made it in.

Cuak character reference — front view

Front — neutral

Cuak character reference — back view

Back view

Cuak character reference — arms raised gesture

Gesture range

Explored — raised-hand worried
Discarded worried pose with raised hand

Read as alarm, not concern — closer to a warning gesture than an emotional cue. Worked against the "empathetic, not punitive" principle the Worried state is built on (see Annotated UI, below).

→
Shipped — quiet worried
Shipped worried state, calmer pose

Same trigger, no gesture. The expression alone carries the state — arms stay down so it reads as concern, not alert.

04 — Visual Architecture

The 60/40 Zoning Model

Every surface — full screen or home widget — splits 60% data / 40% emotional state. Each zone activates a specific Octalysis Core Drive.

Small 2×2

Progress Focus

60% Credit Data
40% State

Usage % + current emotional state. Minimal surface, maximum signal.

→ Core Drive 2: Accomplishment

Small 2×2

Status Focus

60% Score
40% State

Credit score tier + awareness metric. Contextual identity — who you are financially right now.

→ Core Drive 5: Social Influence

Wide 4×2 — Risk

Urgency Surface

60% Countdown
40% Worried

Real-time countdown to threshold + Worried Cuak. Activates loss aversion passively.

→ Core Drive 8: Loss & Avoidance

05 — Data Storytelling

Raw data → Emotional signal

Same financial information. Completely different emotional experience. This is the core design problem Cuak solves.

Before — Credit card statement
📄 Raw statement screenshot Add from Figma export

Cold numbers, no context. User sees debt — feels anxiety.

→
After — Cuak interface
🦆 Cuak screen export Add from Figma export

Same data, mascot emotional proxy. User sees progress — feels in control.

06 — Annotated UI

Every pixel has a purpose

Strategic annotations connecting each UI element to its psychological function.

📱 Main Cuak screen — export from Figma Drop annotated screen here
1

Mascot proxy

Cuak externalizes financial anxiety into a character — reducing cognitive load. Users process emotion through the duck, not through raw numbers. (Epley & Waytz — Anthropomorphism)

2

Usage % indicator — 60% zone

Credit utilization shown as percentage, not currency. Relative framing reduces anxiety vs absolute debt amounts. Positioned in the dominant 60% data zone.

3

Emotional state color — 40% zone

Background color shifts with Cuak's state. Green = safe, yellow = at risk, purple = reset. Visceral-level feedback (Don Norman) — no reading required.

4

Action nudge

Context-aware CTA that changes with emotional state. Cuak suggests — never commands. (Thaler & Sunstein — Nudge Theory)

07 — Components

Core UI components

Reusable components built around the emotional states. Each one has a defined behavioral role.

Emotional State Badge

Neutral On Track At Risk Reset

Color + label encode the current state. Used in widgets, notifications, and cards. Always paired with mascot visual.

Credit Usage Progress Bar

Credit used 42%
Credit used 78%

Determinate progress — communicates exactly where the user stands. Color shifts at threshold to signal state change.

Action Card

Cuak suggests

Pay $80 to drop below 30%

→ This keeps me happy 🦆

Nudge card that appears when usage approaches a threshold. First-person mascot voice — empathetic, not punitive.

Countdown Widget (Urgency)

⚠ Payment due

3d 14h

Before Cuak gets worried

Real-time countdown activates Core Drive 8 (Loss Aversion) passively. Lives on home screen widget — visible without opening the app.

08 — Typography

Type system

Display — Bricolage Grotesque 700

Your credit
is doing well.

Heading — Bricolage Grotesque 600

Credit usage: 42%

Body — Bricolage Grotesque 400 · 15px · 1.8 leading

You're using 42% of your available credit. Cuak recommends keeping this below 30% for the best credit score impact.

Label / Caption — Bricolage Grotesque 500 · 11px · 0.1em tracking

Credit utilization · Updated now