Design System Garden · Wetland Light

TRZECIAK LABORATORIES · GARDEN ATLAS · V1

Garden
Atlas

Wetland Light palette · Multi-year plot mapping · Crop rotation history. Records what grew where and when, so beds can be rotated by family. All tokens in tl.css.

Seasons

2021 — 2026

Beds tracked

6 plots · 412 sq ft

Geometry

The art deco vocabulary, ported to light — but with a structural color swap. Dark uses gold for both line-work and headings. On cream that mashes both jobs onto one weak-contrast color. Light splits them: forest-green chrome draws the geometry, gold stays for typography.

tl-rule · section dividers
Diamond — primary section break
Named — section title inside the line
South Bed
tl-hr — subtle in-panel separator

Content continues after the hr

Panel variants
Standard · 1px border

Panel

Default container for any content block.

Featured · double border
Corners · diagonal accent marks

Corners

L-bracket marks at opposing corners. Dashboards and hero panels.

Rule-as-header — panel title inside the gold line
Plot Map

The garden equivalent of the dark theme's mixer: a grid of cells, each tracking what's planted where. Teal is data, family stripes are status, blue is selection. Same instrument language, different domain.

example · plot grid — South Bed, Spring 2026
Rotation

The same bed across four years, side-by-side. Family stripes make it easy to spot legume → brassica → solanum cycles. This is the atlas's reason for existing.

example · South Bed · 2023 → 2026
South Bed · Crop Rotation
2023
Tomato
Cherokee Purple · Solanum
Yield
42.0lb
Days to harvest
88 d
First frost
06 Oct
Solanum
2024
Beans
Provider · Legume (N-fix)
Yield
18.4lb
Days to harvest
55 d
First frost
11 Oct
Legume
2025
Kale
Lacinato · Brassica
Yield
28.7lb
Days to harvest
65 d
First frost
04 Oct
Brassica
2026
Mixed
Solanum + Legume + Cucurbit
Yield · in progress
6.2lb
Days planted
42 d
Frost (est.)
08 Oct
Growing
3-year rotation respected · next: Allium
example · South Bed dashboard — all four accent colors working together
Color Roles

Light theme splits gold's two dark-theme jobs. Chrome (forest green, from the painting's foliage outlines) takes the structural role — borders, rules, frames. Gold (deep amber, the painting's susan centers) stays for typographic emphasis — headings, links, buttons, the logo. Teal, blue, and magenta carry the same roles as the dark variant.

Chrome #1f4a35

Structural line-work. Panel borders, rule lines, nav division, panel corner marks. The geometric frame of every layout.

South Bed

Teal #1a7575

Live data only. Soil sensors, days-since-planted, yield-to-date, harvest dates. Teal means "this is being measured."

Soil Moisture
62%
Blue #1f5a9c

Interactive elements. Links, focus states, selected cells, action buttons. "This responds to input."

Selected
Magenta #6e4aaa

Configuration. Companion-planting rules, rotation policies, frost-date settings. "This controls behavior, not data." From Wetland's lupine lavender.

Three Sisters Basil

› Rules active

Typography
Big Shoulders Display · 700 · display headings

Garden Atlas

Big Shoulders Display · 400 · secondary headings

Wetland Light

Big Shoulders Display · 400 · panel headings

South Bed · Spring 2026

Industrial Midwest · Albert Kahn fascia energy · Google Fonts

Same display face as the dark variant — only the palette changes. Bed names, year headers, section labels.

Jost · 500 · UI labels, navigation

Plot · Rotation · Sensors · Rules

Jost · 400 · body text

Records what grew where and when, so beds can be rotated by family. A multi-year atlas of one garden, kept in a spreadsheet for too long.

Jost · 300 · secondary text

Last edited 24 May 2026 · Zone 6a · Detroit

Space Mono · data readouts only

21.4 °C

65 sqft    pH 6.4    28 d

Components
tl-btn · button variants

Primary = deep gold. Secondary = lighter gold (less contrast = less prominent — inverts the dark theme's relationship). Action = blue. Hover fills with border color.

form inputs · focus border uses blue
tl-badge · all variants
Live Harvested Growing Failed Selected Companion Rule Fallow
Palette

Wetland Light — pale cream wash with the painting's vivid hues deepened just enough for AA contrast.

Chrome — structural
Chrome
#1f4a35
Chrome Dim
#4a6e58
UI Accents — typographic & data
Gold
#a87800
Gold Dim
#c89820
Teal
#1a7575
Teal Dim
#4a9a9a
Blue
#1f5a9c
Blue Dim
#4c82ba
Magenta
#6e4aaa
Magenta Dim
#8e6dad
Status
Green
#2d8055
Orange
#c25a18
Red
#b81e3a
Backgrounds & Surfaces
BG
#fdf8e9
BG Mid
#f2e5be
Surface
#fffdf3
Highlight
#e6d294
Border
#dccc9c