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 #CCCBCBWarm:
Teal & Coral: #5EA8A7 #277884 #FE4447 #FFFFFF
Warm Blush: #A49393 #EED6D3 #E8B4B8 #FAF7F2
Sage & Terracotta: #87A96B #E07A5F #F4F1DE #2C2C2CBold:
Bold Red: #C0392B #E74C3C #F39C12 #2ECC71
Vibrant Orange: #F96D00 #F2F2F2 #222831
Pink & Purple: #F8275B #FF574A #FF737D #3D2F68Cool:
Deep Purple: #B165FB #181B24 #40695B #FFFFFF
Forest Green: #191A19 #4E9F3D #1E5128 #FFFFFF
Cream & Forest: #FFE1C7 #40695B #FCFCFCUse 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.