Design tokens
Extracted from noosu.ca and held in @noosu/shared. Admin and mobile consume the same source; the gate fails if a pair drops below WCAG AA contrast.
Colour
| Token | Value | Swatch | Contrast on surface |
|---|---|---|---|
| Brand | #12a068 | 3.36:1 | |
| Brand strong | #096146 | 7.47:1 | |
| Brand deep | #002919 | 15.78:1 | |
| Brand soft | #e8fff5 | 1.05:1 | |
| Mint | #46ffb0 | 1.30:1 | |
| Ink | #0e0e0e | 19.30:1 | |
| Ink muted | #333333 | 12.63:1 | |
| Ink subtle | #5c5c5c | 6.69:1 | |
| Surface | #ffffff | 1.00:1 | |
| Surface muted | #f7f7f8 | 1.07:1 | |
| Border | #d5d5d5 | 1.47:1 | |
| Border strong | #6f7579 | 4.67:1 | |
| Focus | #002919 | 15.78:1 | |
| Danger | #b3261e | 6.54:1 | |
| Success | #146c2e | 6.53:1 | |
| Warning | #7a4b00 | 7.41:1 | |
| Info | #0b4f9c | 8.04:1 |
Type and spacing
| Step | Size | Sample |
|---|---|---|
| xs | 12px | Consistent support, every visit |
| sm | 14px | Consistent support, every visit |
| md | 16px | Consistent support, every visit |
| lg | 20px | Consistent support, every visit |
| xl | 25px | Consistent support, every visit |
| 2xl | 31px | Consistent support, every visit |
| 3xl | 39px | Consistent support, every visit |
Spacing steps: 0, 2, 4, 8, 12, 16, 24, 32, 48, 64 px. Minimum target size: 44px.