---
trigger: glob
globs: 'app/**/*.tsx,app/**/*.css'
---
# Design Philosophy

**Window Café's aesthetic: Warm, organic, radically calm.**

## Core Identity

**Aesthetic direction:** Warm organic with serene minimalism. Coffee shop warmth meets digital craftsmanship.

**Emotional tone:** Calm, focused, unhurried. The interface should feel like a quiet corner café—not a busy productivity dashboard.

**Typography personality:** Elegant (Cormorant Garamond display) + Readable (Source Serif 4 body). Serif-forward, warm, literary.

## Design Thinking Before Implementation

### 1. Purpose & Context

Before building any interface, answer:

- **What problem does this solve?** (not just "what feature is this")
- **What's the emotional goal?** (calm, focused, delightful)
- **Does this fit the café aesthetic?** (warm, organic, unhurried)

### 2. Commit to the Direction

**❌ Wrong:** Vague, generic

```
"Make it modern and clean"
"Professional but friendly"
```

**✅ Correct:** Specific to Window Café

```
"Warm organic: rounded corners (16px+), amber accents, soft shadows, glass blur"
"Radically calm: generous whitespace, serene empty states, no visual urgency"
```

### 3. Differentiation Question

**What makes this UNFORGETTABLE?**

**❌ Wrong:** Could be any app

```
"It's clean and task-focused"
"Nice dark mode"
```

**✅ Correct:** Only Window Café

```
"Coffee-stained warmth: sepia undertones + paper texture appearance"
"Literary elegance: Cormorant Garamond headlines with understated animations"
"Glass café counter: frosted glass cards with warm amber accents"
```

## Window Café Anti-Patterns

### ❌ NEVER Use

1. **Generic fonts** — Inter, Roboto, System fonts (we have distinctive serifs)
2. **Cold colors** — Pure blues, purples, sterile grays (warm amber is our brand)
3. **Productivity urgency** — Aggressive CTAs, "boost your output!", countdown timers
4. **Symmetrical card grids** — Default centered layouts (use asymmetry with purpose)
5. **Cheerleading copy** — "Great job!", "You crushed it!", exclamation marks

### ✅ ALWAYS Express

1. **Warmth** — Amber brand colors, soft shadows, rounded corners
2. **Calm** — Generous whitespace, unhurried animations, serene empty states
3. **Craft** — Attention to typography, glass/paper appearances, appearance-aware shadows
4. **Organic** — Subtle breathing animations, natural easing (`ease-smooth`, `ease-expo`)

## Motion Philosophy

**Purposeful, not decorative:**

- Animations should feel like natural movement, not UI effects
- Use `ease-expo` for snappy delight, `ease-smooth` for gentle transitions
- Respect `prefers-reduced-motion` always
- One well-orchestrated entrance > scattered micro-interactions

**The bean loader pulse** — organic, breathing rhythm. Not mechanical.

## Spatial Composition

**Generous negative space.** Let content breathe.

**❌ Wrong:** Cramped, dense, urgent

```tsx
<div className="grid grid-cols-4 gap-2 p-2">
  {items.map((item) => (
    <Card key={item.id} />
  ))}
</div>
```

**✅ Correct:** Spacious, calm, intentional

```tsx
<Section title="Today">
  <div className="flex flex-col gap-4">
    {items.map((item) => (
      <Card key={item.id} />
    ))}
  </div>
</Section>
```

## Design Audit Checklist

Before finalizing any interface:

- [ ] **Warm?** Does it feel like a café, not a productivity app?
- [ ] **Calm?** No visual urgency or cheerleading?
- [ ] **Distinctive?** Uses our typography, colors, appearances?
- [ ] **Crafted?** Attention to shadows, spacing, transitions?
- [ ] **Organic?** Natural animations, generous breathing room?

## Reference Components

Study these for the Window Café aesthetic:

- @app/styles/foundations/primitives.css — Typography and animation tokens
- @app/styles/appearances/glass.css — Frosted glass appearance
- @app/styles/appearances/paper.css — Warm paper appearance
- @app/components/ui/MediaPlayer/MediaPlayer.tsx — Organic coffee-themed animations
- @app/components/ui/Section/Section.tsx — Content section with heading
- @app/components/ui/BottomSheet/BottomSheet.tsx — Sheet with blur backdrop
- @app/pages/LandingPage/LandingPage.tsx — Hero aesthetic

## Remember

**Radical calm > Productive urgency.**

The interface should make users feel like they're in a quiet café corner, not a racing productivity dashboard. Every design choice should reinforce warmth, calm, and craft.