| name | elite-design-core |
| description | Foundation for elite web design. Covers design philosophy, visual systems, and the design-to-code process. Use when asked about: premium website design, award-winning aesthetics, design systems, visual hierarchy, spacing, typography, color theory, data visualization, or "how to make this look professional". This skill provides the foundational thinking that informs all other elite-web-design skills. When loaded alongside animation skills (elite-gsap, elite-css-animations), provides the token foundation they reference.
|
Elite Design Core
The foundation for creating premium, award-winning web experiences.
Quick Reference
Related Skills
- elite-gsap - Complex animations, ScrollTrigger, SplitText
- elite-css-animations - CSS-native scroll-driven animations
- elite-layouts - Bento grids, horizontal scroll, sticky sections
- elite-performance - Build setup, 60fps optimization
- elite-accessibility - prefers-reduced-motion, WCAG compliance
- elite-inspiration - Curated Awwwards/FWA references
- elite-brand-design - Brand identity, personality, visual systems
Real-World Archetypes
Five production archetypes demonstrate how design decisions map to industry and audience:
| Archetype | Type Pairing | Palette | Aesthetic |
|---|
| Digital Studio | Space Grotesk + Inter | Charcoal + Coral/Lime | Modern, bold, geometric |
| Luxury Fragrance E-commerce | Cormorant Garamond + Poppins | Ink + Arabian Gold | Refined, editorial, sensory |
| Mental Health Clinic | Fraunces + Inter | Plum/Sage/Lavender on Cream | Warm, inclusive, soft |
| Criminal Defense Firm | Gelasio + Inter | Navy/Midnight + Gold | Authoritative, sharp, editorial |
| Community Pharmacy | DM Serif Display + DM Sans | Professional tones | Trustworthy, approachable |
These archetypes appear throughout the reference files as production examples. See typography.md, color-theory.md, and design-tokens.md for detailed implementations.
What Makes Design "Elite"
Elite web design is distinguished by:
1. Restraint Over Excess
Every element earns its place. Remove until it breaks, then add back one thing.
2. Intentional Motion
Animations guide attention and communicate state - never decoration. Each animation answers: "What does this help the user understand?"
3. Whitespace Confidence
Empty space is a design element. Premium brands use more whitespace. It signals quality and gives content room to breathe.
4. Typography as Structure
Type creates visual hierarchy before color or imagery. Headlines command attention, body text recedes, creating clear information architecture.
5. System Thinking
Design decisions follow a system (spacing scale, type scale, color tokens). Consistency compounds into perceived quality.
6. Performance as Feature
60fps animations, fast load times, and smooth interactions are design requirements, not technical afterthoughts.
7. Accessible by Default
Reduced motion alternatives, proper contrast, keyboard navigation - accessibility is invisible when done right.
The Design Process
Phase 1: Vision Discovery
Before code, understand the vision:
Questions to ask:
- What feeling should this site evoke? (Bold? Calm? Playful? Premium?)
- Who is the target audience? (Age, tech-savviness, context of use)
- What references or inspiration exist? (Competitor sites, mood boards)
- What is the content structure? (How much content, what types)
- What actions should users take? (Primary CTA, secondary actions)
Phase 2: Design System Setup
Establish tokens before building:
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
--space-32: 8rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
--text-5xl: 3.815rem;
--color-text-primary: ...;
--color-text-secondary: ...;
--color-text-muted: ...;
--color-bg-primary: ...;
--color-bg-secondary: ...;
--color-accent: ...;
See spacing-systems.md and typography.md for detailed guidance.
Phase 3: Layout Architecture
Choose layout patterns based on project type:
| Project Type | Recommended Layouts |
|---|
| Marketing/Landing | Bento grids, sticky reveals, full-bleed heroes |
| Portfolio/Creative | Horizontal scroll, full-page sections, asymmetric |
| Product/E-commerce | Grid systems, sticky product views, smooth filters |
| Agency/Studio | Experimental layouts, page transitions, bold type |
See elite-layouts skill for implementation patterns.
Phase 4: Animation Strategy
Determine animation approach:
Use CSS Scroll-Driven Animations when:
- Simple parallax or reveal effects
- Progress indicators
- Performance is critical
- Safari support isn't required (or polyfill acceptable)
Use GSAP ScrollTrigger when:
- Complex multi-element sequences
- Pin/sticky behavior
- Horizontal scrolling
- Cross-browser consistency critical
- Fine-grained control needed
See elite-gsap or elite-css-animations skills.
Phase 5: Implementation
Build order for best results:
- Structure first - Semantic HTML, no styling
- Typography - Apply type scale and hierarchy
- Spacing - Apply spacing scale consistently
- Color - Add color tokens
- Layout - Grid structure and responsive behavior
- Animation - Motion after static design works
- Polish - Micro-interactions, hover states
Phase 6: Polish & Optimization
Final checklist:
Decision Frameworks
When to Use Which Animation Approach
Is it a simple reveal or parallax effect?
├── Yes → Can you use CSS-only?
│ ├── Yes → Use CSS Scroll-Driven Animations
│ └── No (Safari support needed) → Use GSAP ScrollTrigger
└── No → Is it a complex sequence or pinned section?
├── Yes → Use GSAP ScrollTrigger
└── No → Is it a state change or micro-interaction?
├── Yes → Use CSS transitions
└── No → Use GSAP for orchestration
When to Use Which Layout Pattern
What's the content density?
├── High (many items to show) → Bento grid or masonry
├── Medium (curated selection) → Asymmetric grid or cards
└── Low (focused narrative) → Full-page sections or horizontal scroll
What's the user journey?
├── Exploratory (browse, discover) → Grid layouts, filters
├── Linear (story, presentation) → Horizontal scroll, sticky reveals
└── Task-oriented (convert, purchase) → Clear hierarchy, prominent CTAs
Project Type Quick Starts
Marketing/Landing Page
Key patterns:
- Full-bleed hero with scroll-triggered reveal
- Bento grid for features
- Sticky section for product showcase
- Social proof with staggered card reveals
Skills to load: elite-layouts, elite-gsap, elite-accessibility
Design focus:
- Strong visual hierarchy (one clear CTA)
- Whitespace to let product breathe
- Motion that guides to conversion
Portfolio/Creative
Key patterns:
- Horizontal scroll gallery
- Full-page project sections
- Text animations (SplitText reveals)
- Page transitions between projects
Skills to load: elite-gsap, elite-layouts, elite-inspiration
Design focus:
- Let work speak (minimal UI)
- Unique navigation patterns
- Memorable interactions
Product Configurator
Key patterns:
- Sticky product view
- Smooth state transitions (Flip plugin)
- Interactive bento for options
- Real-time visual feedback
Skills to load: elite-gsap (Flip plugin), elite-layouts
Design focus:
- Clear option states
- Responsive to all inputs
- Performance under interaction
Agency/Studio Website
Key patterns:
- Experimental navigation
- Page transitions (with Barba.js)
- Bold typography animations
- Horizontal + vertical scroll mixing
Skills to load: elite-gsap, elite-layouts, elite-inspiration
Design focus:
- Showcase craft and capability
- Push boundaries intentionally
- Balance experimental with usable
Common Pitfalls
1. Animation Without Purpose
Every animation must answer: "What does this help the user understand?" If you can't answer, remove it.
2. Inconsistent Spacing
Use the spacing scale. Random pixel values create visual noise. Stick to the system.
3. Too Many Focal Points
One primary action per screen. Competing CTAs reduce conversion.
4. Ignoring Performance
Test on real devices. 60fps on MacBook Pro doesn't mean 60fps on budget Android.
5. Forgetting Reduced Motion
Always provide prefers-reduced-motion alternatives. It's not optional.
6. Over-designing
The best designs feel inevitable, not clever. Simplify until it breaks, then add back one thing.
7. Skipping the System
Establish design tokens first. Building without a system creates inconsistency that compounds.
Resources
Design Principles Deep Dives
External Resources
