UI/UX Design Guide

**Judgement:** Strong, opinionated UI/UX reference for modern web/mobile apps, especially Tailwind + Shadcn/ui + Next.js stacks. It’s well-structured, practical, and covers core disciplines (layout, color, type, accessibility, micro-interactions) with actionable rules rather than vague advice. **Best used when:** - You’re designing or reviewing interfaces for web or mobile products and want consistent, modern patterns. - You’re bootstrapping a design system (tokens for colors, type, spacing) that maps cleanly to Tailwind utilities. - You’re setting up or standardizing a Next.js + Tailwind + Shadcn/ui codebase and need opinionated defaults. - You need a checklist for accessibility (WCAG 2.2) and for pre-build design planning. **Key strengths / benefits:** - Mobile-first guidance with explicit breakpoints, spacing multiples, and layout patterns (flex/grid, auto-fit). - Concrete design tokens: color scales, semantic colors, type ramp, and spacing units that are implementation-ready. - Built-in accessibility focus (contrast ratios, keyboard nav, focus visibility, ARIA labeling). - Practical setup steps for Shadcn/ui + Tailwind, including component commands and best practices (tokens, dark mode). - Micro-interaction rules that encourage tasteful, performant animations (transform/opacity, short durations). **Risks / limitations:** - Opinionated: teams with an existing design system or different breakpoints/type scales may need to adapt or override many defaults. - Strongly web-centric and Tailwind/Next.js oriented; less directly applicable to native mobile or non-Tailwind stacks. - Future-dated “2026 design trends” and last-updated info cannot be independently verified; trend-specific guidance should be treated as suggestive rather than authoritative. **Recommended scenarios:** - New product teams or solo developers who lack a designer and want a solid baseline for modern UI/UX. - Engineering-led teams who want guardrails before coding: design checklists, accessibility rules, and responsive patterns. - Audits or refactors of existing UIs to standardize spacing, hierarchy, and accessibility while integrating with Tailwind/Shadcn. - As a quick reference alongside Figma and code when refining the polish of interactions, feedback states, and component consistency.