frontend-design

Commit to a specific aesthetic direction before coding, choose distinctive display fonts instead of Inter or Roboto, and use dominant colors with sharp accents. Add orchestrated load animations and atmospheric backgrounds like gradient meshes or grain overlays.

Use the Motion library for React to create scroll-triggered reveals and hover states. For plain HTML, prefer CSS-only animations with staggered animation-delay values for page load sequences, which create more impact than scattered micro-interactions.

Avoid overused generic fonts like Inter, Roboto, Arial, and system defaults, which signal template-like design. Pair a distinctive display font with a refined body font, and vary choices across projects rather than converging on popular options like Space Grotesk.

Yes, the design guidelines apply to any implementation stack including plain HTML/CSS/JS, React, and Vue. The aesthetic principles for typography, color, motion, and composition are framework-agnostic; only the animation tooling differs.

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs require restraint and precise attention to spacing, typography, and subtle details.