frontend-design

Commit to a clear aesthetic direction before coding, choose distinctive display fonts instead of Inter or Roboto, and use dominant colors with sharp accents. Add atmospheric details like gradient meshes, noise textures, and staggered load animations for a designed feel.

Describe the purpose, audience, and desired tone of the page, then request a specific aesthetic direction such as brutalist, editorial, or retro-futuristic. The output is working HTML/CSS/JS or React code with intentional typography, color, and motion choices.

It supports plain HTML/CSS/JS as well as frameworks like React and Vue. For React projects, the Motion library is recommended for animations, while CSS-only solutions are preferred for plain HTML.

Avoid overused font families like Inter, Roboto, Arial, and system fonts, plus cliched schemes such as purple gradients on white backgrounds. Pair a distinctive display font with a refined body font and commit to a cohesive palette using CSS variables.

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects, while minimalist designs need restraint, precise spacing, and subtle typographic detail. Both work when executed with intentionality.