◆ Trzeciak Laboratories Design System ◆
One CSS framework shared by every TL app. Headers, footers, panels, buttons, fonts, and color tokens live here once — apps link this stylesheet at runtime, so a change made here rolls out everywhere on a hard refresh. No build step, no per-app copies to keep in sync.
◆ Use it in an app ◆
Pick a theme on <html>, link the stylesheet, load the three fonts,
then use the .tl-* classes shown in the demos.
<html data-tl-theme="deco"> <link rel="stylesheet" href="https://style.trzeciak.cloud/tl.css"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700&family=Jost:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
◆ Two themes ◆
Deco
Dark, art-deco, Detroit-industrial. Gold structure on near-black.
The default — dashboards, instrument panels, anything technical.
View demo →
Garden
Light, emerald-on-cream, organic. Chrome (green) structure with gold
accents. Trackers, journals, anything botanical.
View demo →
◆ What it provides ◆
Components
Header & footer, panels (plain / featured / corners), cards, buttons,
badges, rules, data readouts, and level meters — all as .tl-* classes.
Tokens
Color palette, the three role-locked accents (teal=data, blue=interactive, magenta=config), and the three fonts — as CSS custom properties you can reference directly.
◆ Files ◆