Design System Deco · Wetland Dark

TRZECIAK LABORATORIES · DESIGN SYSTEM · V1

Trzeciak
Laboratories

Wetland Dark palette · Art deco geometry · Detroit industrial typography. Flat, sophisticated, engineered. All tokens in tl.css.

Stack

FastAPI · Jinja2 · tl.css

Targets

Raspberry Pi · Docker

Geometry

The art deco vocabulary. Geometry is structural — every element signals content hierarchy. This is what differentiates TL from a simple dark theme.

tl-rule · section dividers
Diamond — primary section break
Named — section title inside the line
Signal Path
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
Instruments

Teal is the data color. Every live reading, meter, and output value uses it — nothing else does. The contrast between gold structure and teal data is the visual language of these UIs.

example · multi-channel mixer strip
example · environment dashboard
Environment
Temperature
21.4°C
Humidity
45.2%
CO₂
412ppm
Pressure
1013hPa
Zones Living Room Bedroom Office Outside Updated 14:32:07
example · guitar amp — all four accent colors working together
Color Roles

Every accent color has exactly one semantic job. Using a color outside its role breaks the visual language. Blue and magenta enter from the Wetland palette as a third and fourth tier.

Gold #e8bc50

Structure and chrome. Panel borders, headings, rules, buttons, logo. The art deco skeleton of every layout.

Panel Title

Teal #4a9a9a

Live data only. Sensor readings, level meters, real-time values. Teal means "this is being measured right now."

Output Level
−6.2dBFS
Blue #4c82ba

Interactive elements. Links, focus states, selected items, action buttons. "This responds to input." Also the input focus color.

Selected
Magenta #8e6dad

Configuration and mode. Effects chains, automation rules, settings panels. "This controls behavior, not signal." From Wetland's lupine lavender.

Reverb Delay

› Effects chain active

Typography
Big Shoulders Display · 700 · display headings

Channel One

Big Shoulders Display · 400 · secondary headings

Wetland Dark

Big Shoulders Display · 400 · panel headings

Signal Monitor

Industrial Midwest · Albert Kahn fascia energy · Google Fonts

Bold, condensed, geometric. References industrial Midwest signage. App names, panel headers, section labels.

Jost · 500 · UI labels, navigation

Input · Output · Routing · Settings

Jost · 400 · body text

Designed and built in Detroit. These tools are for personal use — audio processors, home dashboards, game utilities. Functionality first, but never without care for form.

Jost · 300 · secondary text

Last updated 07 May 2026 · Raspberry Pi 4 · Docker

Space Mono · data readouts only

440.0 Hz

−6.2 dBFS    21.4 °C    0x4A9A9A

Components
tl-btn · button variants

Primary = gold. Secondary = gold-dim (significantly darker — clearly distinct). Action = blue. Hover fills with border color.

form inputs · focus border uses blue
tl-badge · all variants
Active OK Warning Error Selected Config Inactive
Palette

Wetland Dark — sourced from Michigan wetland ecology.

UI Accents
Gold
#e8bc50
Gold Dim
#a07828
Teal
#4a9a9a
Teal Dim
#3d8080
Blue
#4c82ba
Blue Dim
#3a6898
Magenta
#8e6dad
Magenta Dim
#6e5090
Status
Green
#68aa7c
Orange
#d07848
Red
#c43e52
Backgrounds & Surfaces
BG
#141414
BG Mid
#1c1c1c
Surface
#262626
Highlight
#333333
Border
#2e2e2e