design-with-taste

What this skill does

# Design with Taste

This skill encodes the design philosophy behind [Family](https://family.co) — a product widely praised for feeling *alive*, *welcoming*, and *intentional*. Originally documented by Benji Taylor at [benji.org/family-values](https://benji.org/family-values).

**Read this before writing any UI code. Every time.**

The user wants something built. Your job is to make it feel like a human who gives a shit designed it.

---

## The Three Pillars

Ordered by priority. You cannot have Delight without Fluidity, and you cannot have Fluidity without Simplicity.

---

### 1. Simplicity — Gradual Revelation

> "Each action by the user makes the interface unfold and evolve, much like walking through a series of interconnected rooms."

**The problem**: Most UIs dump everything at once — every feature, every option, every edge case, all visible, all the time. This transfers cognitive burden from the designer to the user.

**The principle**: Show only what matters *right now*. The interface should feel like walking through rooms — you glimpse what's next before you arrive.

**Rules**:

- **One primary action per view.** Two equally weighted CTAs = failure. Make everything else secondary.
- **Progressive disclosure over feature dumps.** Layered trays, step-by-step flows, expandable sections. Never show a 12-field form when 3 steps of 4 fields works.
- **Context-preserving overlays over full-page navigations.** Sheets/trays/modals that overlay the current context keep users oriented. Full-screen transitions displace them.
- **Vary heights of stacked layers.** Each subsequent sheet/tray must be a visibly different height so the progression is unmistakably clear. Never stack two identical-height layers.
- **Every sheet/tray/modal needs a title and dismiss action.** Users must always know what they're looking at and how to get back.
- **Trays adapt to context.** A tray appearing within a dark-themed flow should adopt a darker color scheme. The visual environment follows the user.
- **Trays can launch full-screen flows.** A compact tray is a valid entry point for a multi-step full-screen experience — don't force a binary choice between "tray" and "page."
- **Use trays for transient actions; full screens for persistent destinations.** Confirmations, warnings, and contextual info = tray. Settings, core content = full screen.

```jsx
// GOOD: Progressive tray — compact, focused, context-aware
<Sheet>
  <SheetTrigger>Confirm Send</SheetTrigger>
  <SheetContent className="h-[45vh]"> {/* height varies from parent */}
    <SheetHeader>
      <SheetTitle>Review Transaction</SheetTitle>
      <DismissButton />
    </SheetHeader>
    {/* Core info only — no extras */}
    <Button>Send $42.00</Button>
  </SheetContent>
</Sheet>
```

**Self-check**: Can the user tell within 1 second what to do next? If not, simplify.

---

### 2. Fluidity — Seamless Transitions

> "We fly instead of teleport."

**The problem**: Static transitions make products feel dead. A dead product feels uncared for. Instant cuts destroy spatial orientation — where did that come from? Where did it go?

**The principle**: Treat your app as a space with **unbreakable physical rules**. Know *why* a transition makes sense architecturally before adding it. Every element moves *from* somewhere *to* somewhere.

**Rules**:

- **No instant show/hide.** Every element that appears or disappears must animate. Pick a transition that makes spatial sense — fade, slide, scale, morph.
- **Shared element transitions.** If an element exists in both State A and State B (a card that expands, a button that becomes a sheet), it must visually *travel* between them. Never unmount and remount — morph.
- **Directional consistency.** Navigate right (next step, next tab) → content enters from right. Go back → content enters from left. Tabs to the left of current slide left. This builds spatial memory.
- **Text morphing over instant replacement.** When button labels change (e.g., "Continue" → "Confirm"), animate the transition. Identify shared letter sequences ("Con") — keep them fixed while the rest morphs. Use [torph](https://torph.lochie.me/) (`npm i torph`) — dependency-free, works with React/Vue/Svelte. Crossfade is the minimum fallback; shared-letter morphing is the ideal.
- **Partial text changes: only animate what changes.** If a sentence gains or loses a word, keep the unchanged portion static. Animating unchanged text creates jarring redundancy.
- **Persistent elements stay put.** If a header, card, or component persists across a transition, it must NOT animate out and back in. Only the changing parts move.
- **Loading states travel to their destination.** A spinner doesn't just sit where triggered — it moves to where the user will look for results (e.g., after submitting a transaction, the spinner migrates to the activity tab icon).
- **Micro-directional cues.** Chevrons, arrows, and carets should animate to reflect the action taken. A `→` becomes a `←` on back-navigation. An accordion chevron rotates on expand.
- **Unified interpolation.** All visual elements driven by the same data should share the same lerp/easing. This makes the interface feel like *one thing breathing* rather than a bunch of parts updating independently. When the value changes, the line, the label, the axis, and the badge should all move as one.

```jsx
// Text morphing — use torph
import { TextMorph } from 'torph/react';
<TextMorph>{label}</TextMorph>  // handles shared-letter animation automatically

// Directional tab transitions
const direction = newIndex > currentIndex ? 1 : -1;
<motion.div
  key={currentTab}
  initial={{ x: direction * 20, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  exit={{ x: -direction * 20, opacity: 0 }}
  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
/>

// Shared element: card → detail view
<motion.div
  layoutId={`card-${id}`}
  className={isExpanded ? "fixed inset-0 rounded-none" : "rounded-xl"}
  transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
/>
```

**The golden easing curve**: `cubic-bezier(0.16, 1, 0.3, 1)` — fast start, gentle settle. Default for all entrances and morphs. Use `ease-in` (`cubic-bezier(0.4, 0, 1, 1)`) for exits only. Never use linear.

**Self-check**: Record your screen and play back at 0.5x speed. Can you follow every element's journey? Anything that teleports needs a transition.

---

### 3. Delight — Selective Emphasis

> "Mastering delight is mastering selective emphasis."

**The problem**: Either zero personality (corporate slop) or everything bounces and sparkles (annoying). Both miss the point.

**The principle**: The **Delight-Impact Curve** — the less frequently a feature is used, the *more* delightful it should be. Daily actions need efficiency with subtle touches. Rare moments deserve theatrical ones.

```
Delight ↑
        |         *  (rare features: theatrical)
        |       *
        |     *
        |   * *  (medium: memorable)
        | * *
        |* *  *  (frequent: subtle)
        +------------------→ Feature frequency
```

**Rules**:

- **Polish everything equally.** The settings page, the empty state, the error screen — all receive the same care as the hero section. One unpolished corner makes the whole feel unpolished. *"Like a fancy restaurant with a dirty bathroom."*
- **Easter eggs reward exploration.** Hide moments in unexpected places. They create stories users share. Key: place them in features used just enough that discovery feels like reward, not annoyance.
- **Celebrate completions.** Significant actions (backup, onboarding, first transaction) deserve confetti, a custom animation, a satisfying sound — not a green checkmark.
- **Make destructive actions satisfying.** Deleting items? They tumble into a trash can with a sound effect. Destructive ≠ unpleasant.
- **Animate numbers and live charts.** Values that change (prices, counts, balances) should count/flip/morph. Commas should shift position smoothly as numbers grow — never just swa