Integrate Nature palette from styles/nature.py into CSS design system #54

New Issue

kert · 2026-03-21T18:19:56Z

kert commented

2026-03-21 18:19:56 +00:00

Problem

The Nature-conformant accessible palette lives in styles/nature.py (P10) but the CSS files still use the old hex values. The design system should have a single source of truth.

Plan

Add Nature palette colours as CSS custom properties in the root design system file
Map existing --tb-blue etc. to closest Nature palette equivalents
Use the Paul Tol bright scheme for data visualisation elements (charts, badges, status indicators)
Keep the deep-navy background palette unchanged (it already passes WCAG)
Update styles/nature.py to also export CSS custom property declarations (for build tooling)

Palette mapping:

Nature (Paul Tol)	Current CSS	Usage
`#4477AA` (blue)	`--tb-blue: #3366cc`	Primary action, links
`#EE6677` (red)	`--tb-red: #cc2244`	Alerts, errors
`#228833` (green)	`--tb-green: #44aa44`	Success, positive
`#CCBB44` (yellow)	`--tb-yellow: #ddaa33`	Warnings
`#66CCEE` (cyan)	— (new)	Info, highlights
`#AA3377` (purple)	— (new)	Secondary accent
`#BBBBBB` (grey)	`--tb-steel: #5a7090`	Muted text
`#EE8866` (orange)	— (new)	Tertiary accent

Decision needed:

Keep --tb- prefix (minimal diff) or migrate to --ds- (design system)?

## Problem The Nature-conformant accessible palette lives in `styles/nature.py` (P10) but the CSS files still use the old hex values. The design system should have a single source of truth. ## Plan 1. Add Nature palette colours as CSS custom properties in the root design system file 2. Map existing `--tb-blue` etc. to closest Nature palette equivalents 3. Use the Paul Tol bright scheme for data visualisation elements (charts, badges, status indicators) 4. Keep the deep-navy background palette unchanged (it already passes WCAG) 5. Update `styles/nature.py` to also export CSS custom property declarations (for build tooling) ### Palette mapping: | Nature (Paul Tol) | Current CSS | Usage | |---|---|---| | `#4477AA` (blue) | `--tb-blue: #3366cc` | Primary action, links | | `#EE6677` (red) | `--tb-red: #cc2244` | Alerts, errors | | `#228833` (green) | `--tb-green: #44aa44` | Success, positive | | `#CCBB44` (yellow) | `--tb-yellow: #ddaa33` | Warnings | | `#66CCEE` (cyan) | — (new) | Info, highlights | | `#AA3377` (purple) | — (new) | Secondary accent | | `#BBBBBB` (grey) | `--tb-steel: #5a7090` | Muted text | | `#EE8866` (orange) | — (new) | Tertiary accent | ### Decision needed: - Keep `--tb-` prefix (minimal diff) or migrate to `--ds-` (design system)?

kert added this to the P11: Design System — WCAG, branding, marimo dashboard milestone 2026-03-21 18:19:56 +00:00

kert added the styles label 2026-03-21 18:19:56 +00:00

kert referenced this issue from a commit

2026-03-21 18:27:47 +00:00

rebrand theme: throwback → loch, --tb- → --ds-, drop Press Start 2P

kert referenced this issue

2026-03-21 18:28:04 +00:00

P11: Loch design system — rebrand, font swap, --ds- prefix #56

kert closed this issue

2026-03-21 18:37:01 +00:00

Sign in to join this conversation.