Frontend Excellence

Create distinctive, memorable frontend interfaces that avoid "AI slop" aesthetics. Every interface should feel genuinely designed for its context.

Design Thinking Process

Before coding, commit to a BOLD aesthetic direction:

Question	Purpose
Purpose	What problem does this interface solve? Who uses it?
Tone	Pick an extreme: brutalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, art deco, soft pastel, industrial
Constraints	Framework requirements, performance, accessibility
Differentiation	What's the ONE thing someone will remember?

Key insight: Bold maximalism and refined minimalism both work. The key is intentionality, not intensity.

Anti-Patterns (AI Slop)

❌ Never Use

Typography:

Inter, Roboto, Arial, system fonts
Space Grotesk (overused "good" choice)
Default font stacks without character

Color:

Purple gradients on white backgrounds
Evenly-distributed, timid palettes
Default framework colors

Layout:

Excessive centered elements
Predictable symmetric layouts
Cookie-cutter component patterns
Uniform rounded corners everywhere

What to Do Instead

Typography

Technique	Description
Extreme contrast	72pt headlines vs 11pt body
All-caps headers	With wide letter spacing
Monospace for data	Technical content, stats, code
Display + body pairing	Distinctive display font with refined body font
Outlined text	For emphasis on bold backgrounds

Color & Theme

Choose from or adapt these palettes:

Professional:

Classic Blue:      #1C2833 #2E4053 #AAB7B8 #F4F6F6
Black & Gold:      #BF9A4A #000000 #F4F6F6
Charcoal & Red:    #292929 #E33737 #CCCBCB

Warm:

Teal & Coral:      #5EA8A7 #277884 #FE4447 #FFFFFF
Warm Blush:        #A49393 #EED6D3 #E8B4B8 #FAF7F2
Sage & Terracotta: #87A96B #E07A5F #F4F1DE #2C2C2C

Bold:

Bold Red:          #C0392B #E74C3C #F39C12 #2ECC71
Vibrant Orange:    #F96D00 #F2F2F2 #222831
Pink & Purple:     #F8275B #FF574A #FF737D #3D2F68

Cool:

Deep Purple:       #B165FB #181B24 #40695B #FFFFFF
Forest Green:      #191A19 #4E9F3D #1E5128 #FFFFFF
Cream & Forest:    #FFE1C7 #40695B #FCFCFC

Use dominant colors with sharp accents - this outperforms timid, evenly-distributed palettes.

Spatial Composition

Pattern	Description
Asymmetry	Unequal column widths (30/70, 40/60, 25/75)
Overlap	Elements breaking boundaries, layered depth
Diagonal flow	Angled section dividers, rotated elements
Grid-breaking	Strategic elements that escape the grid
Negative space	Generous breathing room OR controlled density

Visual Details

Geometric:

Diagonal section dividers instead of horizontal
Rotated text headers at 90° or 270°
Circular/hexagonal frames for images
Triangular accent shapes in corners

Borders & Frames:

Thick single-color borders (10-20pt) on one side only
Double-line borders with contrasting colors
Corner brackets instead of full frames
L-shaped borders (top+left or bottom+right)
Underline accents beneath headers (3-5pt thick)

Backgrounds:

Solid color blocks occupying 40-60% of slide/page
Gradient fills (vertical or diagonal only)
Split backgrounds (two colors, diagonal or vertical)
Edge-to-edge color bands
Noise textures, grain overlays

Motion & Animation

Prioritize high-impact moments:

Page load - Staggered reveals using animation-delay
Scroll triggers - Elements entering viewport
Hover states - Surprising transformations

One well-orchestrated page load creates more delight than scattered micro-interactions.

CSS-first for HTML, Motion library for React.

Implementation Rules

Match Complexity to Vision

Maximalist designs → Elaborate code with extensive animations and effects
Minimalist designs → Restraint, precision, careful spacing and typography

Elegance comes from executing the vision well.

Consistency

Use CSS variables for colors: --color-primary, --color-accent
Establish spacing scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
Repeat visual patterns across components

Accessibility

Ensure sufficient contrast (WCAG AA minimum)
Don't rely on color alone for meaning
Maintain readable font sizes (16px body minimum)
Test with keyboard navigation

Craftsmanship Standard

Create work that appears:

Meticulously crafted - Every detail intentional
Product of deep expertise - Professional-level execution
Painstakingly refined - No rough edges
Master-level implementation - Could be shown as portfolio work

The final result should look like it took countless hours by someone at the absolute top of their field.

frontend-excellence