Philosophy & Principles¶
"The Japanese garden is not about having less. It's about having exactly what matters."
Origin Story¶
On 26 April 2026, after building 53 free tools across aguidetocloud.com, the site had become a "rainbow jungle" — every tool with its own accent colour, neon glows everywhere, glassmorphism on every surface, 4 different design languages competing on one page.
The products inside were excellent. But the home they lived in was chaotic.
The decision was made: strip everything back to essentials. Not remove products — remove the visual noise around them. Move from a cluttered house to a Japanese garden home where every element is purposeful.
The Five Principles¶
1. 👑 Content is King¶
The user comes to: read a blog post, use a tool, take a practice exam, study for a cert. Those are the experiences. Everything else — navigation, branding, decoration — serves those experiences. If it doesn't serve, it goes.
Test: Cover the nav and footer. Can the user still accomplish their task? If yes, the content is king. If no, something is blocking them.
2. 🎋 Everything Earns Its Place¶
Before any element exists on a page, it must answer: "What user need does this serve?"
- ❌ "It looks nice" → not a reason
- ❌ "Other sites have it" → not a reason
- ❌ "It fills empty space" → especially not a reason
- ✅ "It helps the user find what they need" → yes
- ✅ "It provides context for a decision" → yes
- ✅ "It shows the user their progress" → yes
Empty space is not empty. It's breathing room. Never fill space just because it exists.
3. 🏯 Consistent, Not Unique¶
Every tool page looks the same. Every blog post reads the same way. Every card has the same style. Visual identity comes from the system, not from making each page special.
The Notion test: Can a user navigate from the Prompt Library to the ROI Calculator to a blog post and feel like they never left the same product? That's the goal.
What this kills: - 53 unique tool accent colours - Per-tool hero sections with unique gradients - Different card styles for different sections - Special typography per page
4. 🎯 Deliberate, Not Accidental¶
Every design token has a name, a value, and a reason:
| Instead of... | Use... |
|---|---|
color: #3B82F6 (random blue) |
color: var(--accent) (the system's accent) |
padding: 23px (arbitrary) |
padding: var(--space-6) (24px from the grid) |
border-radius: 18px (why 18?) |
border-radius: var(--radius-md) (10px, the system's medium) |
font-size: 0.82rem (oddly specific) |
font-size: var(--text-sm) (14px, the system's small) |
If a value doesn't come from a design token, it shouldn't exist.
5. 🌱 Room for Growth¶
The system allows new components — but they must follow the rules:
- Use only existing colour tokens (or propose a new semantic role with justification)
- Use only existing spacing values
- Use only existing border radii
- Follow the typography scale
- Work in both light and dark mode
New doesn't mean different. A new tool component should look like it was always part of the system.
Design References¶
These three sites embody what we're building:
| Site | What We Take |
|---|---|
| Notion | Tool consistency — every page feels like the same product. Clean, elegant, visual identity through sameness. |
| Linear | Sharp typography, generous spacing, disciplined colour use. One accent colour used with purpose. |
| Stripe Docs | Reading experience — left sidebar navigation, content on the right, optimal line length, breathing room. |
What We're Leaving Behind¶
These design patterns are permanently retired:
| Pattern | Why It's Gone |
|---|---|
Glassmorphism (backdrop-filter: blur()) |
Decorative. Adds visual noise. Performance cost. |
Neon colours (#66ffff, #ff66ff, #39ff14) |
Attention-seeking, not purposeful. |
| Text shadow glow effects | Decorative noise. |
| Per-tool accent colours (53 unique hues) | Creates visual chaos. Prevents system consistency. |
| Gradient backgrounds on sections | Decorative. Solid colours are cleaner. |
| Cursor glow / shimmer animations | Decorative motion. Adds no value. |
| Watermark numbers on cards | Decorative. The number is already in the text. |
| "Cards mania" — grids of cards everywhere | Information overload. Curate, don't dump. |
| Rainbow tag colours | Use one accent. Tags differentiate by text, not colour. |
The Acid Test¶
When reviewing any page, ask these questions:
- Can I remove this element without losing function? → If yes, remove it.
- Does this colour serve a semantic purpose? → If it's just "looks nice", use a neutral.
- Is there enough breathing room? → If elements feel crowded, add space.
- Would this look right on every page? → If it's special to one page, it violates consistency.
- Does this work in both light and dark mode? → If not, it's not in the system.