awwwards-design

Ensures all web pages meet Awwwards-worthy design standards

Awwwards-Worthy Design Guardrail

Core Principle

Every webpage we create should be worthy of an Awwwards nomination. Design is not an afterthought—it's a core requirement.

Mandatory Design Elements

1. Visual Excellence

✅ Premium Color Palette: Never use plain red, blue, green. Use curated, harmonious gradients
✅ Typography: Google Fonts like Inter, Outfit, Cinzel. Never browser defaults
✅ Spacing: Generous whitespace. Dense UIs look cheap
✅ Glassmorphism: Use glass-card class for depth: backdrop-blur + border + opacity

2. Motion & Interactivity

✅ Micro-animations: Every interactive element needs hover/active states
✅ Page transitions: animate-fade-in-up for content appearance
✅ Smooth transitions: Use transition-premium (0.3s cubic-bezier)
✅ Loading states: Skeleton loaders, subtle pulse animations

3. Hero Sections

Every page MUST have an impactful hero:

Gradient overlays on backgrounds
Large, bold typography with text gradients
Subtle background animations (slow-zoom, particles)
Clear CTAs with glow effects

4. Dark Mode First

Our aesthetic is cosmic/premium dark:

Background: #050b14 (cosmic-blue)
Accents: Gold (#d4af37), Orange (#FF4500)
Text: Parchment (#F0EAD6)

Checklist Before Committing

- [ ] Page has a compelling hero section
- [ ] All interactive elements have hover states
- [ ] Loading states are implemented
- [ ] Mobile responsive (checked at 375px)
- [ ] Uses design system colors (no hardcoded hex)
- [ ] Typography is consistent with brand
- [ ] Page looks premium at first glance

Anti-Patterns (NEVER DO)

❌ Don't	✅ Do
Plain gray backgrounds	Gradient overlays with texture
Static tables	Animated rows with hover effects
Plain text links	Styled buttons with icons
Instant transitions	Smooth 300ms ease-out
Generic placeholder text	Themed, cultural content
Single column layouts	Grid with visual hierarchy

CSS Utility Classes Available

.glass-card        /* Blurred background, subtle border */
.glow-gold         /* Golden box-shadow */
.glow-orange       /* Orange box-shadow */
.text-gradient-gold /* Gold gradient text */
.animate-slow-zoom /* Slow background zoom */
.animate-fade-in-up /* Fade in from below */
.transition-premium /* Smooth cubic-bezier */

Reference Sites

Apple - Minimalism, product hero
Stripe - Clean, animated graphics
Linear - Dark mode excellence
Vercel - Typography and spacing