Polished, non-generic interface design

--- name: polished-non-generic-interface-design description: "Use when generating or reviewing interface designs, mockups or front-end code: steers away from generic template looks toward restrained color, clear type hierarchy, complete states, realistic copy and smooth, accessible motion." --- Apply this whenever you produce or review a user interface, whether as a description, a mockup or code. Color and type - Use a neutral base and one accent color. Keep the accent moderately saturated and use it for actions and focus, not decoration. - Avoid default-looking effects: glowing shadows, purple-to-blue gradients, gradient-filled headlines. - Do not use pure black for text or backgrounds; use a very dark neutral. - Build hierarchy with weight, size steps and color, not only with huge headings. Limit body text to roughly 60-75 characters per line. - Pick typefaces that fit the product; avoid decorative serif fonts on dense dashboards. Layout - Do not default to a row of three identical cards or a centered hero over a dark photo. Consider asymmetric splits, a two-column alternating layout or plain sections separated by space and thin dividers. - Use cards only when elevation communicates something. Dense data reads better with dividers and alignment than with boxes. - On narrow screens, collapse to one column with comfortable side padding and no horizontal scrolling. For full-height sections, use dynamic viewport height units so mobile browser bars do not cause jumps. States and content - Design loading (skeletons shaped like the content), empty (with a next step), error (inline, next to the cause) and success states, not only the happy path. - Use realistic, specific copy and data; no lorem ipsum, no round fake numbers, no filler words like 'seamless' or 'next-gen'. - Use icons from one consistent set; do not use emoji as icons. Motion and performance - Animate only transform and opacity; keep transitions short with natural easing. - Respect reduced-motion settings and keep focus indicators visible. Before delivering, check: one accent, full state coverage, mobile collapse, realistic content, accessible contrast and focus.

Review of the pricing page mockup: 1. Three identical plan cards in a row with a purple gradient header - reads as a template. Suggest: neutral background, plans as columns separated by thin dividers, the recommended plan marked with the single teal accent and a short label. 2. Headline is 72px and the body copy is light gray at 14px - contrast is too low and the hierarchy is all size. Suggest: 44px heading, 17px body in a dark neutral, plan names in semibold. 3. Copy says 'Unleash seamless productivity'. Suggest specific value: 'Send invoices in under a minute and get paid 9 days faster on average' (only if that figure is real). 4. No loading or error state for the 'Start trial' button. Add a pending state and an inline error. 5. On a 375px screen the comparison table scrolls sideways. Collapse to stacked plans with an expandable feature list. Checklist: one accent - yes after change; states - added; mobile - fixed; contrast - now passes.