add design notes

DESIGN.md

@@ -246,6 +246,37 @@ db.close();
 Run with `tsx scripts/backup.ts` from cron. Keep ~30 days. That's the entire
 disaster-recovery plan, and it's enough.
 
+## 12. CSS Design Tokens
+
+All colours live in `:root` as custom properties. No other values should be hardcoded.
+
+```css
+:root {
+  /* Surfaces */
+  --color-bg:           #F2E8D5; /* aged parchment — page background */
+  --color-surface:      #EAD9BE; /* light oak — cards, panels */
+  --color-border:       #C4A882; /* tan grain — dividers, input borders */
+
+  /* Wood tones */
+  --color-wood-dark:    #4A2810; /* dark mahogany — nav, headings */
+  --color-wood-mid:     #8B5E3C; /* medium walnut — buttons, interactive */
+  --color-wood-light:   #B5842A; /* brass — hover states, focus rings */
+
+  /* Text */
+  --color-text:         #2C1A0E; /* near-black brown — body copy */
+  --color-text-muted:   #7A5C42; /* faded oak — labels, secondary info */
+  --color-text-on-dark: #F2E8D5; /* parchment — text on dark backgrounds */
+
+  /* Status */
+  --color-status-open:      #8B5E3C; /* walnut */
+  --color-status-inprogress:#B5842A; /* brass */
+  --color-status-done:      #5C7A42; /* muted forest green */
+  --color-status-paid:      #3D5C2A; /* deeper green */
+}
+```
+
+Typography: system serif stack for headings (`Georgia, 'Times New Roman', serif`), system sans for body (`system-ui, sans-serif`). No web font downloads — keeps it fast and offline-friendly.
+
 ## 11. Future (explicitly deferred)
 
 Only if actually needed: photo attachments per clock (the software's "Images" tab),