01
Visual theme & atmosphere
Warm cream paper, dark cocoa outlines, hard offset shadows, one loud orange, and pastel metric stickers. The system makes status data feel physical and humorous while preserving a strict reading order.
Time since the last blessing
21 hours ago
02
Color palette & roles
Paper
#fff4dd
Card
#fffdf7
Ink
#26201a
Active orange
#ff5c2b
Sun yellow
#ffd84d
Rose
#ffb9cc
Sky
#a5dcff
Calendar empty
#f1e3c4
03
Typography rules
The waiting game
Friendly display type carries the joke. Neutral system sans keeps operational copy quick to scan.
Last 26 weeks · 39 resets · 8.3d avg.
04
Layout principles
Resets39
Avg. wait8.3d
Longest67.7d
05
Depth & elevation
Outlined2px ink frame · no shadow
Sticker3px hard offset shadow
Hero6px hard offset shadow
06
Component styling
Physical actions
Speech bubble
Every announcement, preserved for history.
Watch state
Reset watch
64%
64%
Active data cell
07
Do's & don'ts
Do
- Keep the cream-and-cocoa base intact.
- Use one dominant status figure.
- Give pastel colors stable metric roles.
- Keep labels, dates, and axes in mono.
Don't
- Don't add blurred shadows or glass panels.
- Don't use Baloo 2 for long body copy.
- Don't make every surface orange.
- Don't rotate wrappers or nested text.
08
Responsive behavior
640px
The single compact breakpoint tightens page and card padding, reduces chart cells to 15px, shortens metric labels, stacks section headings, and keeps the three summary tiles visible side by side.
09
Agent prompt guide
Build a compact operational tracker with warm cream paper (#fff4dd), cocoa ink (#26201a), Baloo 2 display type, system-sans body copy, and mono metadata. Use 2px ink outlines and unblurred 3–6px offset shadows. Make one yellow-highlighted status figure dominant; reserve orange for active events and rose/sky for supporting metrics. Buttons physically depress by translating to their shadow offset. Avoid gradients, glassmorphism, blurred shadows, and extra accent colors.
10
Core token table
| Token | Value | Role |
|---|---|---|
--paper | #fff4dd | Page canvas |
--card | #fffdf7 | Raised surfaces |
--ink | #26201a | Text, borders, shadows |
--accent | #ff5c2b | Active events and link emphasis |
--border | 2px solid ink | Primary object frame |
--shadow | 4px 4px 0 ink | Sticker elevation |
--radius | 14px | Primary card radius |
--measure | 58ch | Readable body width |