AyronSantos
12d419de7c
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
61 lines
3.7 KiB
Markdown
61 lines
3.7 KiB
Markdown
# Product register
|
||
|
||
When design SERVES the product: app UIs, admin dashboards, settings panels, data tables, tools, authenticated surfaces, anything where the user is in a task.
|
||
|
||
## The product slop test
|
||
|
||
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?
|
||
|
||
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.
|
||
|
||
## Typography
|
||
|
||
- **One family is often right.** Product UIs don't need display/body pairing. A well-tuned sans carries headings, buttons, labels, body, data.
|
||
- **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.
|
||
- **Tighter scale ratio.** 1.125–1.2 between steps is typical. More type elements here than on brand surfaces; exaggerated contrast creates noise.
|
||
- **Line length still applies for prose** (65–75ch). Data and compact UI can run denser; tables at 120ch+ are fine.
|
||
|
||
## Color
|
||
|
||
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.
|
||
|
||
- State-rich semantic vocabulary: hover, focus, active, disabled, selected, loading, error, warning, success, info. Standardize these.
|
||
- Accent color used for primary actions, current selection, and state indicators only, not decoration.
|
||
- A second neutral layer for sidebars, toolbars, and panels (slightly cooler or warmer than the content surface).
|
||
|
||
## Layout
|
||
|
||
- Responsive behavior is structural (collapse sidebar, responsive table, breakpoint-driven columns), not fluid typography.
|
||
|
||
## Components
|
||
|
||
Every interactive component has: default, hover, focus, active, disabled, loading, error. Don't ship with half of these.
|
||
|
||
- Skeleton states for loading, not spinners in the middle of content.
|
||
- Empty states that teach the interface, not "nothing here."
|
||
- Consistent affordances across the surface. Same button shape. Same form-control vocabulary. Same icon style.
|
||
|
||
## Motion
|
||
|
||
- 150–250 ms on most transitions. Users are in flow; don't make them wait for choreography.
|
||
- Motion conveys state, not decoration. State change, feedback, loading, reveal: nothing else.
|
||
- No orchestrated page-load sequences. Product loads into a task; users don't want to watch it load.
|
||
|
||
## Product bans (on top of the shared absolute bans)
|
||
|
||
- Decorative motion that doesn't convey state.
|
||
- Inconsistent component vocabulary across screens. If the "save" button looks different in two places, one is wrong.
|
||
- Display fonts in UI labels, buttons, data.
|
||
- Reinventing standard affordances for flavor (custom scrollbars, weird form controls, non-standard modals).
|
||
- Heavy color or full-saturation accents on inactive states.
|
||
- Modal as first thought. Modals are usually laziness. Exhaust inline / progressive alternatives first.
|
||
|
||
## Product permissions
|
||
|
||
Product can afford things brand surfaces can't.
|
||
|
||
- System fonts and familiar sans defaults (Inter, SF Pro, system-ui stacks).
|
||
- Standard navigation patterns: top bar + side nav, breadcrumbs, tabs, command palettes.
|
||
- Density. Tables with many rows, panels with many labels, dense information when users need it.
|
||
- Consistency over surprise. The same visual vocabulary screen to screen is a virtue; delight is saved for moments, not pages.
|