design-with-taste

Design with Taste

This skill encodes the design philosophy behind Family — a product widely praised for feeling alive, welcoming, and intentional. Originally documented by Benji Taylor at 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.

// 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 (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.

// 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 swap. For real-time line charts, use liveline (npm i liveline) — one canvas, no dependencies beyond React 18, 60fps interpolation. For 60fps value overlays, update the DOM directly rather than through React state to avoid re-render overhead.
• Empty states are first impressions. An animated arrow pointing toward the create button, a floating illustration, a warm message. Never "No items yet" with nothing else.
• Sound design amplifies physicality. Completion sounds, subtle interaction feedback. Sound reinforces reward and makes actions feel real.
• Drag-and-drop should feel satisfying. Stacking animations, smooth reorder, visual feedback on lift. Reordering items should feel better than the result deserves.

Delight pattern library — concrete moments proven to work:

// Animated number with smooth comma shifting
function AnimatedNumber({ value }) {
  const spring = useSpring(value, { stiffness: 80, damping: 20 });
  return <motion.span>{useTransform(spring, v => Math.round(v).toLocaleString())}</motion.span>;
}

// Real-time chart — liveline handles interpolation, momentum arrows, scrub, theming
import { Liveline } from 'liveline';
<div style={{ height: 200 }}>
  <Liveline
    

---

*Content truncated.*