design-expert

Responsive design requires reusing existing components and tokens. Use color, spacing, typography, and motion tokens from your global stylesheet; apply mobile-first breakpoints; ensure 44px tap targets; maintain semantic HTML with sufficient text contrast; and respect motion preferences to keep layouts consistent and accessible across devices.

Leverage existing patterns like .container, .nav, .btn, .card, and .hero before writing new styles. Apply mobile-first breakpoints at 640px, 768px, and 1024px; use flex and grid with wrapping to avoid horizontal overflow; and pull spacing and typography values from shared tokens in your root stylesheet.

Define all color tokens in light theme at :root, then layer .dark overrides only when needed. This preserves the default aesthetic while allowing theme switching; reuse existing token names and avoid creating redundant color variables.

Yes. Use semantic tags with visible focus states, ensure text contrast at 4.5:1 or higher, set tap targets to 44px minimum, animate only with transform and opacity while respecting prefers-reduced-motion, and avoid horizontal scroll on mobile—all without additional wrapper elements.

Horizontal overflow breaks mobile usability and accessibility. Wrap content in .container, use flex and grid with wrapping, and test at mobile-first breakpoints to prevent scroll; prioritize vertical scrolling on devices under 640px.

Yes. Pairing serif fonts for headings and sans-serif for body text creates visual hierarchy and improves readability across breakpoints. Define both in tokens and reuse consistently across all pages and components to maintain coherent typography at every scale.