TRZECIAK LABORATORIES · DESIGN SYSTEM · V1
Trzeciak
Laboratories
Wetland Dark palette · Art deco geometry · Detroit industrial typography.
Flat, sophisticated, engineered. All tokens in tl.css.
FastAPI · Jinja2 · tl.css
Raspberry Pi · Docker
The art deco vocabulary. Geometry is structural — every element signals content hierarchy. This is what differentiates TL from a simple dark theme.
Content continues after the hr
Panel
Default container for any content block.
Featured
Border + outline. Hero instruments and primary content.
Corners
L-bracket marks at opposing corners. Dashboards and hero panels.
Placing .tl-rule as the panel heading embeds the title into the horizontal line treatment. The line reads as panel chrome rather than a separator. Works best inside featured or corner panels where the outer border provides framing context.
Panel content follows the hr.
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.
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.
Structure and chrome. Panel borders, headings, rules, buttons, logo. The art deco skeleton of every layout.
Panel Title
Live data only. Sensor readings, level meters, real-time values. Teal means "this is being measured right now."
Interactive elements. Links, focus states, selected items, action buttons. "This responds to input." Also the input focus color.
Configuration and mode. Effects chains, automation rules, settings panels. "This controls behavior, not signal." From Wetland's lupine lavender.
› Effects chain active
Channel One
Wetland Dark
Signal Monitor
Bold, condensed, geometric. References industrial Midwest signage. App names, panel headers, section labels.
Input · Output · Routing · Settings
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.
Last updated 07 May 2026 · Raspberry Pi 4 · Docker
440.0 Hz
−6.2 dBFS 21.4 °C 0x4A9A9A
Primary = gold. Secondary = gold-dim (significantly darker — clearly distinct). Action = blue. Hover fills with border color.
Wetland Dark — sourced from Michigan wetland ecology.