ui-polish

Topics in the source

• UI Polish
• 1. Read the room first
• 2. Pick a direction, not defaults
• 3. Fundamentals checklist
• 4. Responsive — mobile first
• 5. Every interactive element has all its states
• 6. Motion (subtle)
• 7. Verify visually

Detect the stack: Tailwind (tailwind.config. / @import "tailwindcss"), CSS Modules, styled-components, shadcn/ui (components/ui/), plain CSS. Reuse existing design tokens: colors, fonts, spacing, radius, existing components. Never invent a second button style when one exists. If there's no design system, set one small set of tokens (CSS variables or Tailwind theme) before writing components. Before coding, decide in one line: the mood (e.g. "calm editorial", "bold startup", "warm local business") and what that means for type, color and density. Avoid the generic look: centered purple gradient hero, three identical icon cards, everything rounded-2xl shadow-lg. Typography Max 2 font families. Body 16–18px, line-height 1.5–1.7; headings tighter (1.1–1.25). Line length 60–75 characters (max-w-prose / max-width: 65ch). Clear scale (e.g. 14/16/20/24/32/48) — don't pick random sizes. Spacing & layout One spacing scale (4/8px based). Related things closer together than unrelated things. Generous section padding (64–128px desktop, 48–64px mobile). Use CSS Grid/Flex with gap, not margins on children. Align to a container width (e.g. 1120–1280px) consistently. Color 1 primary, 1 accent max, p

This is an excerpt. Refer to the complete source and its current requirements.