4 min read
Refined Interface Design
Kevin's standing standard for UI work: stop producing generic AI dashboards, aim for the refined feel of Linear, Notion, Arc, and Apple Health. Detailed prompts alone don't get there — the fix is committing to a named design direction with concrete tokens before writing code. Source: User, 2026-06-21
Design Position
| Field | Value |
|---|---|
| Design family | Category router and quality gate |
| Use when | Use when UI work needs the Refined Interface Design (Avoiding AI-dashboard Slop) rules, defaults, or quality gate. |
| System map | Design System Map |
| Proof path | Rendered screenshots or design-review checks should confirm the rule changes visible UI behavior. |
The problem: AI-dashboard slop
No matter how detailed the prompt, default AI output regresses to the same mush. The tells Kevin wants eliminated Source: User, 2026-06-21:
- Cramped layouts — no breathing room; everything fights for attention.
- Card soup — too many cards; every element boxed and bordered.
- Default Tailwind styling —
#3b82f6blue, default Inter, stock shadows. - Generic icons — emoji-as-icon or undifferentiated icon-pack filler.
- Weak visual hierarchy — no clear primary; the eye has nowhere to land.
- Inconsistent spacing — no spacing system; ad-hoc margins.
- Dashboard clichés — rounded-card + colored left-border, purple→pink→blue gradients, fake stat tiles.
Root cause (per Frontend and Design Skills): picking aesthetics in a vacuum. AI defaults are the average of training data — averaging every brand together yields something that reads as "yet another AI page," with no identity. Source: ConardLi/garden-skills, 2026-06-21
The target: refined product feel
| Principle | What it means | Concrete technique |
|---|---|---|
| Minimalist | Every element earns its place ("delete it — does the design get worse?") | ≤4 colors, ≤2 font families, remove decorative chrome |
| Spacious layouts | Whitespace as a material, not wasted space | 8pt spacing scale (4/8/12/16/24/40/64/96); generous section padding |
| Strong typography | Type is the hierarchy | display weight 600 + tight tracking (-0.02em); title/body ratio ≥ 2.5×; text-wrap: pretty, clamp() |
| Subtle motion | Snappy, not bouncy | ease-out ~150ms hover; 350–450ms layout with cubic-bezier(0.22,1,0.36,1); respect prefers-reduced-motion |
| Restrained colour | One accent, used sparingly | accent on <5% of pixels (focus/active/pills); neutral ground; derive variants with oklch() |
| Thoughtful hierarchy | Squint test passes; one clear primary | elevation via hairline borders + barely-there shadows, not heavy cards |
| Polished micro-interactions | Considered hover/focus/press feedback | scale(0.96) on press, cross-fade icons, staggered enter (~100ms), interruptible transitions |
Reference products (what each teaches)
- Linear — quiet luxury for tools: warm-dark
#08090A, hairlinergba(255,255,255,0.06)borders everywhere, purple#5E6AD2accent on <5% of pixels, radius ≤16, no glow, keyboard-first. Concrete recipe:web-design-engineer/references/style-recipes/linear.md. - Notion — calm document surface; restraint, generous line-height, content-first (recipe
notion-pre-ai.md). - Arc — playful-but-controlled chrome, spatial motion, a single confident accent.
- Apple Health — data made legible and humane: clear hierarchy, soft depth, color used semantically not decoratively (recipe
apple-hig.md).
How to actually get there (operational)
- Commit to a named direction before coding. Don't free-style. Use Frontend and Design Skills: for an anchor ("Linear-style") read the one
style-recipes/<anchor>.md; for a vague brief use its Design Direction Advisor (3 directions from different schools). - Declare the design system first (palette / type / spacing / radius / shadow / motion) and confirm before building; ship a placeholder v0 to course-correct early.
- Layer the polish with Frontend and Design Skills (concentric radius, optical alignment, tabular-nums, shadows-over-borders) and design-engineering-polish (motion/component taste).
- Critique before delivery — score philosophy / hierarchy / craft / functionality / originality; if any element doesn't earn its place, cut it.
The throughline: constraints over defaults. A specific, opinionated system applied consistently beats a detailed prompt rendered with AI defaults — the same Taste as a Moat logic Kevin applies elsewhere.
Timeline
- 2026-07-01 | Design category refresh added this page to the Category router and quality gate family, linked it to Design System Map, and kept it standalone because Refined Interface Design (Avoiding AI-dashboard Slop) owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-21 | Page created from Kevin's articulated standard (anti-AI-dashboard anti-patterns + the Linear/Notion/Arc/Apple Health refined aesthetic), paired with the Frontend and Design Skills skill he added to operationalize it. Source: User, 2026-06-21