Heldinhow/frontend-design

Frontend Design

Overview

Create frontend designs that are distinctive, production-grade, and avoid generic "AI slop" aesthetics. Focus on unique typography, cohesive color schemes, and meaningful animations.

Process

1. Choose Design Direction

• Commit to one clear aesthetic vision
• Avoid generic patterns everyone uses
• Consider asymmetry, overlap, unexpected layouts

2. Typography

• Use distinctive fonts (not Inter/Roboto/system)
• Import from Google Fonts or premium typefaces
• Establish clear type scale

3. Color Scheme

• Define cohesive palette with CSS variables
• Choose dominant accent color
• Build supporting neutrals

4. Spatial Composition

• Break grid conventions thoughtfully
• Use whitespace actively
• Create visual hierarchy

5. Animations

• Add meaningful transitions (150-200ms)
• Animate on load
• Hover states and micro-interactions

6. Atmospheric Effects

• Subtle gradients
• Noise textures
• Depth with shadows

Examples

• Landing Page: Hero section with bold typography + gradient overlay
• Dashboard: Card-based layout with subtle shadows + hover lifts
• Mobile App: Bottom navigation + smooth page transitions

Limitations

• Don't over-animate - can slow down UX
• Avoid too many fonts - performance + readability
• Don't sacrifice usability for aesthetics
• May need fallbacks for older browsers