| 1 | # Product register |
| 2 | |
| 3 | When design SERVES the product: app UIs, admin dashboards, settings panels, data tables, tools, authenticated surfaces, anything where the user is in a task. |
| 4 | |
| 5 | ## The product slop test |
| 6 | |
| 7 | Not "would someone say AI made this." Familiarity is often a feature here. The test is: would a user fluent in the category's best tools (Linear, Figma, Notion, Raycast, Stripe come to mind) sit down and trust this interface, or pause at every subtly-off component? |
| 8 | |
| 9 | Product UI's failure mode isn't flatness, it's strangeness without purpose: over-decorated buttons, mismatched form controls, gratuitous motion, display fonts where labels should be, invented affordances for standard tasks. The bar is earned familiarity. The tool should disappear into the task. |
| 10 | |
| 11 | ## Typography |
| 12 | |
| 13 | - **One family is often right.** Product UIs don't need display/body pairing. A well-tuned sans carries headings, buttons, labels, body, data. |
| 14 | - **Fixed rem scale, not fluid.** Clamp-sized headings don't serve product UI. Users view at consistent DPI, and a fluid h1 that shrinks in a sidebar looks worse, not better. |
| 15 | - **Tighter scale ratio.** 1.125–1.2 between steps is typical. More type elements here than on brand surfaces; exaggerated contrast creates noise. |
| 16 | - **Line length still applies for prose** (65–75ch). Data and compact UI can run denser; tables at 120ch+ are fine. |
| 17 | |
| 18 | ## Color |
| 19 | |
| 20 | Product defaults to Restrained. A single surface can earn Committed (a dashboard where one category color carries a report, an onboarding flow with a drenched welcome screen), but Restrained is the floor. |
| 21 | |
| 22 | - State-rich semantic vocabulary: hover, focus, active, disabled, selected, loading, error, warning, success, info. Standardize these. |
| 23 | - Accent color used for primary actions, current selection, and state indicators only, not decoration. |
| 24 | - A second neutral layer for sidebars, toolbars, and panels (slightly cooler or warmer than the content surface). |
| 25 | |
| 26 | ## Layout |
| 27 | |
| 28 | - Responsive behavior is structural (collapse sidebar, responsive table, breakpoint-driven columns), not fluid typography. |
| 29 | |
| 30 | ## Components |
| 31 | |
| 32 | Every interactive component has: default, hover, focus, active, disabled, loading, error. Don't ship with half of these. |
| 33 | |
| 34 | - Skeleton states for loading, not spinners in the middle of content. |
| 35 | - Empty states that teach the interface, not "nothing here." |
| 36 | - Consistent affordances across the surface. Same button shape. Same form-control vocabulary. Same icon style. |
| 37 | |
| 38 | ## Motion |
| 39 | |
| 40 | - 150–250 ms on most transitions. Users are in flow; don't make them wait for choreography. |
| 41 | - Motion conveys state, not decoration. State change, feedback, loading, reveal: nothing else. |
| 42 | - No orchestrated page-load sequences. Product loads into a task; users don't want to watch it load. |
| 43 | |
| 44 | ## Product bans (on top of the shared absolute bans) |
| 45 | |
| 46 | - Decorative motion that doesn't convey state. |
| 47 | - Inconsistent component vocabulary across screens. If the "save" button looks different in two places, one is wrong. |
| 48 | - Display fonts in UI labels, buttons, data. |
| 49 | - Reinventing standard affordances for flavor (custom scrollbars, weird form controls, non-standard modals). |
| 50 | - Heavy color or full-saturation accents on inactive states. |
| 51 | - Modal as first thought. Modals are usually laziness. Exhaust inline / progressive alternatives first. |
| 52 | |
| 53 | ## Product permissions |
| 54 | |
| 55 | Product can afford things brand surfaces can't. |
| 56 | |
| 57 | - System fonts and familiar sans defaults (Inter, SF Pro, system-ui stacks). |
| 58 | - Standard navigation patterns: top bar + side nav, breadcrumbs, tabs, command palettes. |
| 59 | - Density. Tables with many rows, panels with many labels, dense information when users need it. |
| 60 | - Consistency over surprise. The same visual vocabulary screen to screen is a virtue; delight is saved for moments, not pages. |
| 61 |