Design Principles — the 8-principle rubric
:::note Contenido en inglés Esta página del wiki se sincroniza desde la base de conocimiento en inglés y todavía no está traducida. :::
canonical· designer · updated 2026-09-05 · source
Source: Apple WWDC26 "Principles of great design" (Apple Design Evangelism) — https://www.youtube.com/watch?v=Xa9L2yx_QH8 · Adapted to tedos (apps/admin first). Design = making something with intention. Every feature asks people for time, attention, and trust — choosing what to build is mostly deciding what NOT to include.
These principles are the Designer's rubric for both specs (before Frontend implements) and
reviews (pass/fix verdict after). They complement — never override — tokens
(foundation-ui-conventions.md), routing (design-routing.md), and engineering guardrails
(frontend-guardrails.md). Principles can tension against each other; resolving the trade-off is
the design decision — name it in the spec.
The principles
| # | Principle | Core idea | tedos checks |
|---|---|---|---|
| 1 | Purpose | Build only what serves the person; every element earns its place | Spec states the user goal; cut features/elements that don't serve it — say what was excluded and why |
| 2 | Agency | People in control: choices, their own pace, no forced paths | No predetermined wizard when free exploration works; undo over warning; confirm only truly destructive actions (delete, send, publish) — never routine ones |
| 3 | Responsibility | Act in people's best interest: privacy + safety | Ask for data at the moment of use, only what's needed, say what it's for (no launch-time permission walls). AI features: anticipate wrong/unexpected output — previews, confirmations, or cut the feature if risk > value |
| 4 | Familiarity | Build on what people know: metaphor + consistency | Standard metaphors mean standard things (trash = delete, never decorate). Same look ⇒ same behavior; same action ⇒ same placement across screens. Reuse components/ui/ patterns before inventing |
| 5 | Flexibility | Adapt to real contexts, devices, abilities, preferences | Spec covers breakpoints + input modes in scope; consider novice↔pro range; where one layout can't fit all, spec personalization (reorder/hide) instead of forcing one answer |
| 6 | Simplicity | Strip the unnecessary so the core purpose shines — simple ≠ minimal | Plain language, no jargon, fewest steps. Hierarchy via order/spacing/contrast: the most important thing is the most obvious. Burying functions to look minimal is a fail; sometimes simple = ADD context (progress, where-am-I) |
| 7 | Craft | Detail-level execution that inspires confidence | Tokens only (type/color/radius from @theme), aligned icons (HugeIcons), fluid transform/opacity motion, no jank, layouts survive resize. The 4 states (loading/empty/error/success) are craft, not extras |
| 8 | Delight | The emotional result of getting 1–7 right — not confetti | Spec names the target emotion (calm, confident, capable, playful) and where the design reinforces it. Playfulness is a wanted brand quality (José, 2026-06-10) — personality in motion, microcopy that smiles. Never tack on flourishes at the end; delight is designed in, through the system |
How the Designer uses this
- Spec time: run the spec against the table; principles in tension (e.g. flexibility vs. simplicity) get an explicit trade-off note — that's the decision, not an accident.
- Review time: the pass/fix verdict cites the violated principle(s) by name with the concrete fix ("Fix — Familiarity: the archive icon behaves as delete; use the standard metaphor").
- Metaphor test: not too literal, not too abstract — does it let people predict what happens? If a common action exists, use the convention; don't reinvent.
- Forgiveness pattern: prefer undo to interruptions; interrupt only before real disasters. People who can recover explore more.
Known tensions in tedos (resolved)
- Simplicity vs. Flexibility → admin defaults to the simple opinionated layout; flexibility lands as personalization later, not as day-one option soup.
- Familiarity vs. Brand → brand expression lives in marks + matiz (color/type/motion), never in repurposing standard UI metaphors.
- Craft vs. Speed → the 4 states and token discipline are the floor, not polish to defer
(
frontend-guardrails.md). - Restraint vs. Delight → restraint governs ornament, not joy. Playfulness lands through the system (motion with character, warm microcopy, delightful empty/success states) — clutter and "AI sparkle" remain banned; they're noise, not play.