Prototype Library

Color

Forest green replaces Ecology's teal; score amber and parchment cartography carry the Suitability Tool's map-and-meter language. Spoke ramps (--bca-*) feed the semantic roles components actually read.

Spoke ramps

Raw material, prefixed --bca-* because they have no hub equivalent. The forest-green ramp feeds the primary chain; the amber ramp drives the 0–100 suitability meters; parchment is the map terrain palette (tiles are muted toward it with CSS filters).

Forest green — primary
50
100
200
300
500
700
800
900
950
Score amber — suitability meters
100
300
500
700
track
Parchment — cartography
50
100
200
sage
water

Semantic roles

What components reference. The Biochar theme re-points these off the ramps above — each swatch below renders live from its token, so it reflects exactly what ships.

--color-primary #234a31 Forest green (green/800) — the "Evaluate suitability" CTA. Buttons, links, focus rings chain off this.
--color-primary-subtle #f0f5ec Tinted fills for selected/hover states (green/50).
--color-primary-border #c8dabe Borders on primary-tinted surfaces (green/200).
--color-secondary #4e7d52 Lighter forest green (green/500) for secondary emphasis.
--color-success #2e7d4f Positive feedback — suitable, saved, complete.
--color-warning #c77f1f Caution — the score amber doubles as warning.
--color-info #3a7ca5 Informational feedback; also the user-provided provenance blue.
--color-text-primary #33312a Body text — warm field-notebook gray with a slight olive cast.
--color-text-secondary #54514a Supporting text.
--color-text-muted #807c73 Meta text — timestamps, captions.
--color-border #ddd9d0 Hairline dividers, warm to match the neutrals.
--color-background #faf9f6 Page background — warm paper, not white.
--color-surface-sunken #f3f1ea Sunken panels, stat tiles, control wells.

Cartography & provenance accents

Single-purpose spoke tokens for the map layer and data-provenance signals. Provenance matters here: NRCS users need to see at a glance whether a soil value came from SSURGO or from their own lab test.

--bca-field-stroke #234a31 Selected field outline on the map.
--bca-recommended-bg #e2ecda Background tint behind the recommended biochar.
--bca-recommended-text #1b3b27 Text on the recommended tint.
--bca-provenance-ssurgo #6a665e "Auto-derived from SSURGO" provenance badge.
--bca-provenance-user #3a7ca5 "User-provided soil test" provenance badge.

Theming

One [data-theme="biochar"] block in theme-biochar.css overrides the semantic layer; primitives never move. Because the hub chains --color-text-link and the focus-ring tokens off --color-primary, re-pointing primary alone re-skins links and focus states too.

Neutral chain — the full neutral chain (--color-text-primary, -secondary, -tertiary, -muted, the borders, and --color-background) is re-pointed to warm field-notebook grays with a slight olive cast, so the whole app reads as paper in the field rather than the hub's cooler neutrals. --color-warning is deliberately the score amber — caution and mid-range suitability share one hue.