Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic aesthetics and deliver a deliberate visual direction.

When to Use

• •Building a new component, page, or interface
• •Redesigning UI for stronger visual character
• •Implementing UI with high aesthetic polish
• •Reviewing and improving visual consistency

Design Thinking

Before coding, establish:

• •Purpose: What problem the interface solves and who uses it
• •Tone: Choose a clear aesthetic direction (e.g., brutalist, editorial, retro-futuristic, luxury)
• •Constraints: Framework, performance, accessibility requirements
• •Differentiation: The one memorable element that stands out

Implementation Priorities

• •Use production-ready code (HTML/CSS/JS, React, Vue, etc.)
• •Keep the visual system cohesive and intentional
• •Match implementation complexity to the chosen aesthetic

Aesthetics Guidelines

Typography

• •Use characterful fonts
• •Pair a distinctive display font with a refined body font

Color & Theme

• •Commit to a cohesive palette
• •Use CSS variables for consistency
• •Prefer bold accents over timid palettes

Motion

• •Use motion for high-impact moments
• •Prefer CSS animations when possible
• •Add staggered reveals for delight

Spatial Composition

• •Consider asymmetry, overlap, diagonal flow, or grid-breaking elements
• •Use deliberate negative space or controlled density

Backgrounds & Visual Details

• •Add depth with gradients, textures, or layered transparencies
• •Use decorative borders, dramatic shadows, or grain overlays when appropriate

Avoid

• •Generic fonts (Arial, Inter, Roboto)
• •Cliché color schemes or predictable layouts
• •Cookie-cutter component patterns without context

Output

Deliver working code with a clear, memorable aesthetic point-of-view.