🌸 Zen Design System¶
"A cherry blossom tree, not a jungle."
The Zen Design System is the foundational design philosophy for aguidetocloud.com. Every colour, line, space, and element follows one principle: everything earns its place.
The Metaphor¶
Imagine a Japanese home with a zen garden. The family inside has wonderful skills and knowledge (our tools, guides, courses). But the house they lived in was chaotic — rainbow walls, cluttered shelves, neon signs everywhere, every room a different colour.
Now they're moving to a new home. A Japanese garden home — clean lines, natural materials, breathing room everywhere. The family leaves behind their chaotic clothes and embraces linen and simple attire. Nothing looks out of place. Every cup, table, and mat is purposeful and deliberate.
The products inside are excellent. The home they live in must match that quality.
Core Principles¶
1. Content is King 👑¶
The reading experience, tool usage, practice tests, study guides — these are the products. Everything else gets out of their way. Navigation, chrome, decoration — all serve the content, never compete with it.
2. Everything Earns Its Place 🎋¶
Before adding any element, ask: "Does this serve the user?" If it's decorative, remove it. If it's informational, simplify it. If it's functional, make it invisible until needed.
3. Consistent, Not Unique 🏯¶
All tools look the same. All pages breathe the same. Visual identity comes from the system, not from individual elements. Like Notion — you know you're in Notion regardless of which page you're on.
4. Deliberate, Not Accidental 🎯¶
Every colour has a semantic role. Every font size has a purpose. Every spacing value follows the grid. Nothing is "close enough" — it's exact or it's wrong.
5. Room for Growth 🌱¶
The system is strict but not rigid. New components can be added if they follow the rules. Think of it like a garden — you can plant new trees, but they must harmonise with existing ones.
Quick Links¶
| Document | Purpose |
|---|---|
| Philosophy & Principles | The "why" behind every decision |
| Colour Palette | Light mode, dark mode, accents, semantics |
| Typography | Font choices, scale, hierarchy |
| Spacing & Layout | Grid system, max widths, section padding |
| Components | Cards, buttons, navigation, sidebar patterns |
| Guardrails | Rules that MUST be followed — the "do not cross" lines |
| Implementation Phases | Phased rollout plan with continuation prompts |
| Z4 Migration Playbook | Lessons learned from migrating 53 tool pages — the 5 traps, token mapping, detection commands |
| Licensing Reading Rooms | 3-column layout for 50 licensing pages — planning doc + progress tracker |
| Phase 7: Guided Alignment | Full Zen alignment of the Guided Astro platform — token swap, unified nav, reading rooms |