| name | frontend-aesthetics |
| description | Unified frontend aesthetics skill for webshop development. Counteracts AI slop with distinctive typography, CSS-var anchored palettes, purposeful motion, and layered backgrounds. Optimized for e-commerce conversion with 2026 research data. Use when designing or refining any visual aspect of the webshop, building components, product pages, checkout flows, or any customer-facing interface. |
| version | 1.0.0 |
Frontend Aesthetics for Webshops
Unified design system combining anti-AI-slop aesthetics with conversion-optimized e-commerce patterns. Every visual choice must serve both beauty and business.
When to Use
- Designing or building any customer-facing webshop interface
- Creating product pages, category layouts, checkout flows
- Building UI components (cards, modals, navigation, forms)
- Choosing typography, color palettes, or animation patterns
- Reviewing existing designs for aesthetic quality and conversion impact
- Implementing dark mode, responsive layouts, or accessibility
1. Core Anti-Slop Rules
AI-generated interfaces converge on the same bland aesthetic. Fight this actively.
Typography
- NEVER use Inter, Roboto, Arial, or system font stacks as display fonts
- DO choose distinctive display fonts paired with refined body fonts
- Extreme weight contrast: thin headlines with bold accents, or heavy headlines with light body
- Variable fonts are standard (22% faster loads, dynamic weight/width adjustments)
- Size scales should feel intentional — avoid mechanical progressions
Theming
- NEVER use purple-on-white gradients or blue-to-purple hero sections
- DO derive palettes from cultural, material, or environmental sources
- Anchor all colors as CSS custom properties for consistency
- Dominant color with sharp accents outperforms timid, evenly-distributed palettes
- Dark mode is not optional (82.7% adoption, +170% pages per session)
Motion
- NEVER add animations without purpose — no decorative spinners, no bouncing elements
- DO use motion to guide attention, confirm actions, and show state changes
- One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions
- Always respect
prefers-reduced-motion
Backgrounds & Depth
- NEVER default to flat solid colors or plain white backgrounds
- DO create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies
- Product photography backdrops and lifestyle imagery for contextual depth
- Dramatic shadows, decorative borders, grain overlays where they serve the aesthetic
Anti-Patterns to Avoid
- Cookie-cutter card grids with identical rounded corners
- Gradient buttons that could be from any SaaS landing page
- Hero sections with stock photography and generic overlay text
- Component libraries used without customization
- Convergent choices: if you've seen the same combination in 5 AI-generated sites, pick something else
2. Typography for Webshops
Font Pairing Strategy
Luxury/Jewelry:
- Display: Canela, Freight Display, Cormorant Garamond, Playfair Display
- Body: Neue Haas Grotesk, Suisse Int'l, Aktiv Grotesk, Source Sans 3
Modern/Minimalist:
- Display: Sohne, GT America, Clash Display, Cabinet Grotesk
- Body: Soehne, Untitled Sans, General Sans, Satoshi
Artisan/Organic:
- Display: Recoleta, Fraunces, Reckless Neue, Blacker
- Body: Lora, Literata, Charter, Libre Caslon Text
Size & Weight Scales
Product Page:
--font-size-product-title: clamp(1.75rem, 3vw, 2.5rem);
--font-size-product-price: clamp(1.25rem, 2vw, 1.75rem);
--font-size-product-body: clamp(0.9rem, 1.2vw, 1.05rem);
--font-weight-title: 300;
--font-weight-price: 600;
--font-weight-body: 400;
Category Page:
--font-size-category-heading: clamp(2rem, 4vw, 3.5rem);
--font-size-card-title: clamp(0.85rem, 1.1vw, 1rem);
--font-size-card-price: clamp(0.9rem, 1.2vw, 1.1rem);
Variable Font Implementation
@font-face {
font-family: 'DisplayFont';
src: url('display-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}
.product-title {
font-variation-settings: 'wght' 300, 'wdth' 95;
transition: font-variation-settings 0.3s ease;
}
.product-title:hover {
font-variation-settings: 'wght' 500, 'wdth' 100;
}
3. Color & Theming
CSS Custom Property System
:root {
--color-primary: #1a1a2e;
--color-primary-light: #16213e;
--color-accent: #e94560;
--color-accent-soft: #e9456033;
--surface-base: #faf8f5;
--surface-raised: #ffffff;
--surface-sunken: #f0ece6;
--surface-overlay: rgba(26, 26, 46, 0.85);
--text-primary: #1a1a2e;
--text-secondary: #4a4a5a;
--text-tertiary: #8a8a9a;
--text-inverse: #faf8f5;
--cta-primary: #e87b35;
--cta-primary-hover: #d06a28;
--cta-secondary: transparent;
--cta-secondary-border: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
:root {
--surface-base: #0f0f17;
--surface-raised: #1a1a2e;
--surface-sunken: #0a0a12;
--text-primary: #e8e6e1;
--text-secondary: #a8a6a1;
}
}
Color Psychology for E-Commerce
| Color | Conversion Effect | Best For |
|---|
| Orange | +2.4% vs green, +3.1% vs blue | Primary CTAs (Add to Cart, Buy Now) |
| High saturation | Triggers impulse purchases | Flash sales, limited editions |
| Low saturation | Encourages considered decisions | Luxury, high-value products |
| Warm earth tones | Trust, authenticity | Artisan, handmade, organic brands |
| Dark backgrounds | Premium positioning, +170% engagement | Jewelry, watches, luxury goods |
Contrast Requirements
- Normal text: 4.5:1 minimum (WCAG 2.2 AA)
- Large text (18px+ or 14px bold): 3:1 minimum
- High contrast (7:1): +23% readability, +15% conversion
- Interactive elements: clearly distinguishable from surrounding content
4. Motion Design
Principles
- Guide attention — draw the eye to what matters (CTA, product image, price)
- Confirm actions — add-to-cart animation, form submission feedback
- Show state — loading, transitioning, completed
- Create delight — but only after the above three are handled
Staggered Page Load (12% higher CTR per Adobe)
@keyframes stagger-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card {
animation: stagger-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.product-card:nth-child(1) { animation-delay: 0s; }
.product-card:nth-child(2) { animation-delay: 0.08s; }
.product-card:nth-child(3) { animation-delay: 0.16s; }
.product-card:nth-child(4) { animation-delay: 0.24s; }
Scroll-Triggered Animations
.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
Reduced Motion
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Micro-Interactions for E-Commerce
@keyframes cart-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.cart-icon.added { animation: cart-pulse 0.4s ease; }
.product-image {
overflow: hidden;
}
.product-image img {
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-image:hover img {
transform: scale(1.08);
}
@keyframes price-flash {
0% { background-color: transparent; }
30% { background-color: var(--color-accent-soft); }
100% { background-color: transparent; }
}
.price.updated { animation: price-flash 0.6s ease; }
5. Spatial Composition
Break the Grid
- Asymmetric hero layouts with offset images
- Overlapping elements (image bleeding into text section)
- Diagonal flow lines created with CSS clip-path or transforms
- Grid-breaking feature products that span unexpected columns
Bento Grid for Categories/Homepage
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 1rem;
}
.bento-grid .featured {
grid-column: span 2;
grid-row: span 2;
}
.bento-grid .tall {
grid-row: span 2;
}
Negative Space
- Luxury positioning requires generous margins and padding
- Let products breathe — cramped layouts signal discount stores
- Minimum 24px gap between product cards, 40px+ for premium
- White space around CTAs increases click rates
Mobile Layout (78% of traffic)
- Stack to single column at 768px
- Touch targets: 48x48px minimum, 12px gap between targets
- Thumb-zone optimized: primary actions in bottom 40% of screen
- Bottom sheet patterns for filters, options, menus
- Minimum viewport: 375px width
6. 2026 Visual Trends for E-Commerce
Dark Glassmorphism
Premium positioning with frosted glass overlays on dark backgrounds:
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
Kinetic Typography
Scroll-triggered text animations for product storytelling — reveal brand narrative as users scroll through hero sections. Use IntersectionObserver for performance.
Nature-Distilled Palettes
Moving away from stark white and pure black toward warm, earthy tones:
- Warm whites:
#faf8f5, #f5f0eb
- Soft blacks:
#1a1a2e, #0f0f17
- Earth accents: terracotta, sage, clay, sandstone
Hand-Drawn / Organic Elements
Counter-AI movement — subtle imperfections that signal human craft:
- Hand-drawn SVG borders and dividers
- Organic blob shapes instead of perfect circles
- Textured backgrounds (linen, paper, marble)
- Slightly irregular grid alignments
Bento Grid Masonry
Category pages and homepages breaking away from uniform grids into magazine-style layouts with featured items taking 2x or 3x space.
7. Accessibility as Design
Accessibility is not a separate concern — it IS design quality.
Non-Negotiable Requirements (WCAG 2.2 AA)
- 4.5:1 contrast ratio for normal text
- 3:1 contrast ratio for large text and interactive elements
- Visible focus indicators on ALL interactive elements (not just outline: none)
prefers-reduced-motion respected for all animations- Semantic HTML (headings, landmarks, lists, buttons not divs)
- ARIA labels for interactive elements without visible text
- Full keyboard navigation (Tab, Enter, Escape, Arrow keys)
- Skip navigation links
Focus Indicators That Look Good
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
Color Should Not Be the Only Indicator
- Sale prices: use strikethrough + "Sale" label, not just red text
- Stock status: use icons + text, not just color dots
- Form errors: use icons + text + border, not just red border
Quick Decision Framework
When facing any visual design choice:
- Is it distinctive? Would you recognize this as YOUR brand if logos were removed?
- Does the data support it? Check conversion impact tables in references
- Is it accessible? WCAG 2.2 AA minimum (4.5:1 contrast, keyboard nav, focus indicators)
- Does it work on mobile? 78% of your traffic, 375px minimum
- Does it respect motion preferences?
prefers-reduced-motion check
- Is it NOT AI slop? If you've seen this exact combination on 5 other sites, change it
Deep-Dive References
For detailed implementation guidance:
references/motion-backgrounds.md — CSS keyframes, cubic-bezier patterns, background layering, noise textures, product photography integrationreferences/webshop-conversion-design.md — CTA optimization, trust signals, product card hierarchy, checkout visual design, mobile patterns, dark mode implementation
