TodoXP · design system

Your life, as a game you win.

The design record, as exported: every card the system is described by, grouped as the record groups them, and the interactive mobile kit built from the same tokens. Light is the canonical theme and dark is a real second one; coral is the primary action, purple the social one. Names in the sample data are fictional.

Brand

Icon library — PhosphorRegular / Bold / Fill weights via CDN
MotionIdle breathe, pop-in, slide-up toast
WordmarkNo logo mark provided — plain type lockup

Colors

Brand accentsCoral primary, purple secondary, semantic states
Quest tier colorsRare / Epic / Legendary badge colors
Dark theme surfacesdesk / screen / panel / inset / line / ink
Light theme surfacesdesk / screen / panel / inset / line / ink
Tint pairsIcon-tile bg+fg per Care/category color

Components

App — task row, Care card, nav
Core — Button, Badge, Chip
Data viz — rings & bars

Spacing

Radius scale9 / 14 / 16 / 18 / 20 / 26 / pill
ShadowsCard, meter & CTA glow shadows

TodoXP Mobile App

TodoXP — interactive UI kitOpen full screen →

Type

Body — InterCopy, meta, captions
Display — PoppinsHeadings, numerals, titles