Frontend Design
Create distinctive, production-grade frontend interfaces with real working code and exceptional attention to aesthetic details.
Design Philosophy
- •Intentionality over intensity: Bold maximalism and refined minimalism both work -- the key is intentionality, not intensity.
- •Context-driven aesthetics: Understand purpose, audience, tone, and constraints before writing code.
- •Differentiation focus: Every design should have one memorable, unforgettable element.
Aesthetic Priorities
Typography
- •Choose distinctive fonts that avoid generic defaults
- •Pair display and body fonts thoughtfully
- •Use font size, weight, and spacing as design tools
Color & Theme
- •Build cohesive palettes using CSS variables
- •Use a dominant color with sharp accents
- •Consider dark/light mode from the start
Motion
- •CSS animations and transitions for impactful moments
- •Scroll-triggered interactions where appropriate
- •Subtle hover states that reward exploration
Spatial Composition
- •Asymmetrical layouts and unexpected grids
- •Generous whitespace as a design element
- •Visual depth through layering and shadows
What to Avoid
- •Overused font families (system defaults without consideration)
- •Cliched color schemes (generic gradients, stock palettes)
- •Predictable layouts (centered-everything, uniform grids)
- •Cookie-cutter design that lacks context-specific character
Process
- •Understand context -- Who is this for? What emotion should it evoke?
- •Choose a design direction -- Pick one distinctive aesthetic thread
- •Build with real code -- HTML, CSS, React, Tailwind -- whatever fits
- •Refine details -- Hover states, transitions, spacing, typography polish
- •Verify quality -- Does it look intentional? Would a designer approve?