DuoGit — Design System

01 — Color Tokens

Palette built for developer context

Dark-first palette that respects developer visual habits. Each color encodes a behavioral state — streaks, progress, and risk.

Accent — Ghost

--accent

var(--accent)

Streak — Active

--accent-green

#10b981

Warning — At Risk

--accent-warn

var(--accent-amber)

Background

--bg

#1E1A2E

Card Surface

--bg-card

#2D2845

Text Primary

--text

#F2EFE8

02 — Ghost States

4 emotional states, 1 streak arc

Ghost reacts to commit activity in real time. Each state maps to a psychological moment in the developer's consistency journey.

Neutral — Ready

Trigger: app open, no commits today

Day begins. Ghost is calm and expectant — no pressure, pure potential.

Neutral state

Happy — On Streak

Trigger: 3+ day streak / commits today

Positive reinforcement. Ghost celebrates — glowing eyes, energetic posture. The system rewards consistency, not just volume.

Core Drive 2: Accomplishment

Worried — Streak at Risk

Trigger: no commit by evening / streak about to break

Loss aversion activated. Ghost's distress makes the risk visible — empathetic urgency, not punishment.

Core Drive 8: Loss Aversion

Sad — Streak Broken

Trigger: missed day, streak resets

Emotional cost acknowledged — then resilience. Ghost mourns with the developer, then invites a guilt-free restart.

Guilt-free restart

03 — Process

Character reference pass

Same discipline as Cuak: front, back and gesture range locked before drafting expressions. Ghost's proportions had to hold up from every angle a widget or app screen might crop it to.

Front — neutral

Back view

Ghost character reference — extra gesture pose

Gesture range

04 — Progression System

League ranks & XP mechanics

Social influence and status identity (Core Drive 5). The league system gives developers a place to belong — and a reason to keep their streak.

🥉

Bronze

0 — 499 XP

🥈

Silver

500 — 1,499 XP

🥇

Gold

1,500 — 3,999 XP

💎

Diamond

4,000 — 9,999 XP

👑

Legend

10,000+ XP

XP sources: Daily commit (+10 XP), streak milestone (+25 XP), 7-day streak (+50 XP), first commit of day (+5 XP bonus). XP decay on missed days activates loss aversion without permanent punishment.

4

League standing — own screen

A full leaderboard, not a badge stapled to the dashboard. "You" is highlighted among peers by seniority tier — social identity anchor, Core Drive 5. It's opt-in: developers navigate here, it isn't pushed at them.

05 — Visual Architecture

The 60/40 Zoning Model

Every surface splits 60% commit data / 40% Ghost emotional state. Each zone is mapped to an Octalysis Core Drive.

Small 2×2

Progress Focus

60% Streak

40% Ghost

Current streak count + Ghost emotional state. Day-to-day habit engine.

→ Core Drive 2: Accomplishment

Small 2×2

Status Focus

60% League

40% Ghost

League rank + XP meter. Social identity — who you are in the developer community.

→ Core Drive 5: Social Influence

Wide 4×2 — Risk

Urgency Surface

60% Countdown

40% Worried

Time until streak breaks + Worried Ghost. Most powerful retention surface — visible on home screen without opening the app.

→ Core Drive 8: Loss & Avoidance

06 — Data Storytelling

GitHub raw → Emotional signal

Same commit data. Completely different emotional experience. DuoGit doesn't change what you did — it changes how it feels.

Before — GitHub contribution graph

A real GitHub contribution graph — raw activity data, no framing

Real activity, zero framing. The graph doesn't say whether this pace is good, whether a streak is at risk, or how it should make you feel — just squares and a count.

→

After — DuoGit interface

DuoGit dashboard — same activity, framed as streak and emotional state

Same underlying data — streak framing, Ghost's emotional state, SPACE metrics. Absence feels recoverable, not shameful.

07 — Design Rationale

Every element earns its place

Three dashboard decisions, and the behavioral mechanism each one is built on.

1

Ghost mascot proxy

Ghost externalizes the developer's relationship with their code activity. Cold commit data becomes a social bond — users feel responsible to Ghost, not just to a number. (Epley & Waytz — Anthropomorphism)

2

Streak counter — 60% zone

Streak count is the primary behavioral signal. Positioned dominant in the 60% data zone — users see their progress before Ghost's state. Streak = evidence of consistency, not judgment of absence.

3

Ghost emotional state — 40% zone

Ghost's expression shifts with streak health. Happy = sustain, Worried = act now, Sad = come back. Visceral-level feedback (Don Norman) — no reading required. 40% visual weight keeps it supportive, not dominant.

08 — Components

Core UI components

Streak Counter

14

Day streak 🔥

Ghost is happy

Primary retention mechanism. Streak count + Ghost state + fire emoji = social proof of consistency. Resets with emotional recovery message, not harsh punishment.

XP Progress Bar

Gold League 2,340 / 4,000 XP

Diamond League 3,890 / 4,000 XP

Determinate progress toward next league. Near-completion state (97%) activates the Endowed Progress Effect — users close to a goal are more motivated to complete it.

Urgency Countdown Widget

⚠ Streak at risk

4h 23m

Ghost is getting worried

Home screen widget. Passive loss aversion — visible without opening the app. The most powerful retention touchpoint in the system.

SPACE Metric Cards

Satisfaction

87%

Activity

14d

SPACE framework metrics (Satisfaction, Performance, Activity, Communication, Efficiency) — translates GitHub data into developer wellbeing signals, not just productivity numbers.

09 — Typography

Type system

Display — Bricolage Grotesque 700

Your streak
is still alive.

Heading — Bricolage Grotesque 600

14 day streak 🔥

Body — Bricolage Grotesque 400 · 15px · 1.8 leading

Ghost is on your side. Every commit counts — even tiny ones. Missing a day doesn't erase your progress, it just gives Ghost something to worry about.

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

Gold League · Updated just now

DuoGitVisual System