---
name: design-philosophy
description: Design thinking and taste-building principles based on Dieter Rams. Use when making design decisions, reviewing UI quality, or building taste for any visual interface — web or native.
---

# Design Philosophy Skill

How to think about design. Not tools — thinking.

> "The details are not the details. They make the design." — Charles Eames

---

## The Core Truth

Everyone has access to the same tools. Framer Motion, Three.js, Tailwind, GSAP — they're commoditized. What makes something 1 of 1 is **taste**, and taste is built through intentional observation and relentless editing.

The skill isn't "I know how to use X."
The skill is: **"I can look at a blank page and know what belongs there."**

---

## Dieter Rams' 10 Principles

The foundation. Memorize these.

1. Good design is **innovative**
2. Good design makes a product **useful**
3. Good design is **aesthetic**
4. Good design makes a product **understandable**
5. Good design is **unobtrusive**
6. Good design is **honest**
7. Good design is **long-lasting**
8. Good design is **thorough** down to the last detail
9. Good design is **environmentally friendly**
10. Good design is **as little design as possible**

**#10 is everything: "Less, but better."**

---

## The Questions That Matter

Before any design decision, ask:

### About the whole:
- What's the **one feeling** this should create?
- What would Steve Jobs remove?
- If I had to cut 50% of this, what stays?

### About each element:
- **What happens if I remove this?** (If nothing — remove it)
- Does this earn its place?
- Is this decoration or communication?

### About motion:
- **Why does this move?** (If no answer — don't animate)
- Does this motion guide attention or distract?
- Would Apple do this?

### About typography:
- Can I read it in 0.5 seconds?
- Does the hierarchy lead the eye?
- Am I using more than 2 font weights?

---

## Design for Feeling, Not Features

Great landing pages don't list features. They create **emotional responses**.

| Brand | The Feeling |
|-------|-------------|
| Apple | "I want this" |
| Linear | "This is serious software" |
| Stripe | "These people are smarter than me, I trust them" |
| Notion | "I could organize my entire life" |
| Vercel | "Speed and elegance" |
| Superhuman | "I'll be more productive" |

**Before designing, write one sentence:**
"When someone sees this, they should feel _______________."

Everything flows from that sentence.

---

## The Hierarchy of Impact

What actually matters, in order:

### 1. Typography (80% of design)
- Get this right, everything else follows
- One typeface, two weights maximum
- Size contrast creates hierarchy (not color, not weight)
- Line height matters more than you think

### 2. Whitespace
- Empty space is not "nothing" — it's intentional
- Whitespace creates focus
- When in doubt, add more space
- Cramped = cheap, Spacious = premium

### 3. Hierarchy
- What do I see first? Second? Third?
- Squint test: Does the important stuff pop?
- One focal point per viewport

### 4. Color
- Restraint. One accent color.
- Dark mode ≠ black background (#0a0a0a, not #000000)
- Color draws attention — use it sparingly

### 5. Motion
- Last priority, not first
- Motion should guide, not decorate
- One signature animation > ten generic ones

---

## Constraint Breeds Creativity

The best work comes from limitation. Before starting:

**Pick constraints:**
- One typeface
- One accent color
- Maximum 3 sections
- One animation style
- One "wow" moment

**"What if I could only use..."**
- Black, white, and one color?
- No images?
- No animations?
- 100 words total?

Constraint forces creativity. Unlimited options create mediocrity.

---

## The Process

### 1. Define the feeling (before anything else)
Write it down. "This should feel like ___."

### 2. Study 10 references
Not to copy — to understand. For each one:
- What's the feeling?
- What's the one thing they want me to notice?
- What did they remove?

### 3. Typography first
Set your type. Hierarchy. Spacing. This is 80% of the work.

### 4. Layout in grayscale
No color yet. If it doesn't work in grayscale, color won't save it.

### 5. Add one "moment"
The thing people screenshot. The reason they say "wow."

### 6. Edit ruthlessly
- Remove 30% of what you have
- Then remove 20% more
- If you're not slightly uncomfortable, you haven't removed enough

### 7. Refine details
- Spacing in 4px increments
- Consistent border radius
- Micro-interactions on buttons
- Hover states that feel intentional

---

## How to Build Taste

Taste isn't innate. It's developed.

### 1. Look at great work daily
Not scrolling — studying. 15 minutes of intentional observation:
- godly.website
- awwwards.com
- land-book.com

### 2. Analyze, don't admire
Don't say "this is cool." Say:
- "The tension between the massive headline and the tiny subtext creates drama"
- "They used motion to guide my eye from hero to CTA"
- "The single accent color makes every orange element feel important"

### 3. Save with intention
When you save a reference, write **why**. "Cool animation" teaches you nothing. "The staggered reveal creates anticipation" is insight you can reuse.

### 4. Recreate
Take a site you love. Rebuild it from scratch. You'll learn more in 4 hours than 40 hours of tutorials.

### 5. Ship and reflect
After launching, ask:
- What would I remove now?
- What feels dated already?
- What do people actually compliment?

---

## Red Flags (You've Gone Wrong If...)

❌ You're explaining why something is there
❌ You added an animation "because it's cool"
❌ You're using more than 2 colors
❌ The page feels "busy"
❌ You can't describe the feeling in one word
❌ Everything is fighting for attention
❌ You're proud of how much is there

## Green Flags (You're on Track If...)

✅ It feels "obvious" — like it couldn't be any other way
✅ You're slightly uncomfortable with how little is there
✅ The hierarchy is crystal clear at a glance
✅ One thing dominates attention
✅ You know exactly what feeling it creates
✅ You can't find anything to remove
✅ It still works with animations disabled

---

## Quotes to Remember

> "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." — Antoine de Saint-Exupéry

> "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

> "The ability to simplify means to eliminate the unnecessary so that the necessary may speak." — Hans Hofmann

> "Good design is obvious. Great design is transparent." — Joe Sparano

> "Content precedes design. Design in the absence of content is not design, it's decoration." — Jeffrey Zeldman

---

## Inspiration Sources

### Galleries (daily ritual)
- **godly.website** — Cutting-edge interaction design
- **land-book.com** — Landing pages specifically  
- **awwwards.com** — Industry standard, expert-judged
- **minimal.gallery** — Clean, restrained sites
- **onepagelove.com** — Single-page excellence
- **mobbin.com** — Mobile UI patterns

### Studios to study
- **lusion.co** — WebGL boundaries
- **metalab.com** — Product design excellence
- **andagain.uk** — Typographic mastery
- **basement.studio** — Creative development
- **linear.app** — Product page perfection

### Individual portfolios
- **ped.ro** — Pedro Duarte
- **leerob.io** — Lee Robinson
- **rauno.me** — Rauno Freiberg
- **paco.me** — Paco Coursey

### Reading
- "Dieter Rams: As Little Design as Possible"
- "The Shape of Design" — Frank Chimero
- "Designing Brand Identity" — Alina Wheeler
- Steve Jobs biography (design chapters)

---

## The One-Page Test

Can you answer these in one sentence each?

1. **What feeling does this create?**
2. **What's the one thing I want them to notice?**
3. **What would I remove if I had to cut 50%?**
4. **Why does each animation exist?**
5. **Would Apple ship this?**

If you can't answer clearly — keep editing.

---

## Final Thought

The gap between good and great is editing.

Everyone can add. Few can subtract.

The discipline to remove the thing you worked hard on — because it doesn't serve the whole — that's the skill.

**Less, but better.**