Living Brand Document
Tokens, type, components, voice, and identity rules for everything built under the Garden OS name.
The one-paragraph brief that everything else should feel consistent with.
Garden OS is a local-first raised bed garden planning system and narrative strategy game. It reads like a garden journal, not a SaaS dashboard. It is warm, grounded, and organic — but precise underneath. Every pixel either explains something or gets out of the way.
No cloud. No login. No tracking. Just dirt, data, and decisions. The system earns trust by being transparent: every score shows exactly why, every action is reversible, every file is yours.
Four families. One intentional light theme. Click any swatch to copy its hex value.
| Token | Value | Preview | Use for |
|---|
Three typefaces. One for narrative, one for prose, one for data.
4px base unit. Always use tokens — never write arbitrary pixel values.
--r-sm · 4px--r-md · 8px--r-lg · 12px--r-fullLive examples of every reusable element. All behaviour is in-page, no framework.
Garden OS speaks like a knowledgeable friend, not a SaaS dashboard or a textbook.
The voice is direct and helpful. It doesn't over-explain, doesn't use filler phrases like "Great choice!", and doesn't hedge with "you might want to consider."
Numbers have context. "Score: 8.4" alone is not enough — "sun fit: 9, season fit: 7" explains it. Always show the reason behind the number.
Use plain English. Horticultural terms are allowed when they're more precise (e.g. "bolting", "allium", "trellis zone") — but always explain them on first use.
Season Engine narrators speak in the first person with a fixed voice and consistent point of view. Each line references at least one live game signal — score, event severity, crop status, or resource level.
"The basil held its line. Your companion layout paid off — the nightshade row took zero pest pressure this week. Harvest window opens in 12 days."
"Third dry week. The cucumbers are pulling ahead of your water budget. You'll need to choose between them and the bean row before Friday's commit."
The wordmark, usage rules, and clear space requirements.
"Warm, grounded, organic.
Reads like a garden journal,
not a SaaS dashboard."
Copy these directly into any Garden OS page's :root block.
:root {
/* ── Soil ── */
--soil-900: #0f0804; --soil-800: #1a0f07; --soil-700: #2d1a0e;
--soil-600: #3d2210; --soil-500: #5c3d1e; --soil-400: #7a5230;
--soil-300: #9a6b42; --soil-200: #c8a882; --soil-100: #e8d5b8;
/* ── Leaf ── */
--leaf-900: #0d1f10; --leaf-800: #1a3520; --leaf-700: #2a5030;
--leaf-600: #3a6b42; --leaf-500: #52924a; --leaf-400: #6aaa60;
--leaf-300: #8aba80; --leaf-200: #b8d8b0; --leaf-100: #dff0dc;
/* ── Sun / Amber ── */
--sun-900: #3d2000; --sun-800: #6a3800; --sun-700: #9a5800;
--sun-600: #c8781a; --sun-500: #e8a030; --sun-400: #f5c14a;
--sun-300: #f8d470; --sun-200: #fbe8a8; --sun-100: #fdf5dc;
/* ── Cream ── */
--cream-900: #2a2018; --cream-800: #4a3828; --cream-700: #6a5540;
--cream-600: #8a7258; --cream-500: #aa9070; --cream-400: #c8b090;
--cream-300: #ddd0b8; --cream-200: #ede5d8; --cream-100: #f7f2ea;
--cream-50: #faf8f4;
/* ── Semantic ── */
--bg: var(--cream-50); --bg-panel: var(--cream-100);
--text: var(--soil-700); --text-mid: var(--soil-400);
--text-dim: var(--cream-600); --border: var(--cream-300);
--accent: var(--sun-600); --good: var(--leaf-600);
--warn: #c85820; --bad: #b02a1e;
/* ── Fonts ── */
--font-display: 'Fraunces', serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'DM Mono', monospace;
/* ── Spacing ── */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
--sp-12:48px; --sp-16:64px;
/* ── Radius ── */
--r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
}