Pace foundations
Palette, light
#f5f8f4 --sk-bg#ffffff --sk-surface#cfdcd3 --sk-border#173528 --sk-ink#52665a --sk-muted#23724e --sk-accent#ffffff --sk-on#1a6e44 --sk-success#8a5a00 --sk-warning#b3261e --sk-danger#255f9e --sk-infoPalette, dark
#111a15 --sk-bg#18241d --sk-surface#2b3d32 --sk-border#e6f1ea --sk-ink#a2b7a9 --sk-muted#83d4a1 --sk-accent#0b2417 --sk-on#7fd69b --sk-success#f0c36d --sk-warning#f29b94 --sk-danger#8fbfee --sk-infoBrand green is an action color. Success also leans green, so status always pairs a label and icon with the color. Pace never borrows other templates' palettes.
Contrast (WCAG 2.2, computed from the tokens)
| Pair | Light | Dark |
|---|---|---|
| Ink on background | 12.4:1 | 15.3:1 |
| Ink on surface | 13.3:1 | 13.9:1 |
| Muted on background | 5.8:1 | 8.4:1 |
| Muted on surface | 6.2:1 | 7.6:1 |
| On-accent text on accent (buttons) | 5.9:1 | 9.3:1 |
| Accent text on background (links) | 5.5:1 | 10.1:1 |
| Accent on surface | 5.9:1 | 9.1:1 |
| Success, warning, danger, info text on background | 5.5 to 6.1:1 | 9.2 to 10.8:1 |
Every text pair clears 4.5:1 (AA). Focus rings use the accent, 2px with a 3px offset, and also clear 3:1 against both surfaces. tests/pace-system.cjs recomputes these numbers from studio-systems.css.
Typography
Spacing, shape and elevation
4px base grid, gaps 8/12/16/24px, card padding 16 to 24px. Radius: 12px cards, 6px controls, 28px phone frame, 999px avatars and switches. 1px borders; shadows only on overlays and the phone frame. No gradients on controls.
Icons
24px grid, 1.75px round stroke, currentColor. Search and pick one to copy its markup.
Accessibility
Labels on every input, visible error text, 40px minimum touch targets on member screens, keyboard focus on every control, native dialogs with Escape, charts with captions and SVG labels, reduced motion respected.