frontend-design

name	frontend-design
description	Improving frontend design beyond generic defaults. Use when creating UI components, landing pages, dashboards, or any visual frontend work. Keywords: "design", "UI", "UX", "styling", "CSS", "visual", "layout", "typography", "animation", "theme", "colors", "fonts". Addresses LLM distributional convergence toward safe, generic choices.

Frontend Design Excellence Skill

Break free from generic design patterns

LLMs tend toward "distributional convergence" - sampling safe, high-probability design choices. This skill provides guidance to create distinctive, polished interfaces.

The Problem: Generic Defaults

Without specific guidance, AI tends to generate:

• Inter or Roboto fonts
• Purple/blue gradients
• Minimal animations
• Plain solid backgrounds
• Generic card layouts

This skill helps you create distinctive designs instead.

---

1. Typography 🔤

Avoid Generic Fonts

/* ❌ GENERIC - Everyone uses these */
font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif;

/* ✅ DISTINCTIVE - Stand out */
font-family: 'Playfair Display', serif;        /* Elegant editorial */
font-family: 'Space Grotesk', sans-serif;      /* Modern tech */
font-family: 'Crimson Pro', serif;             /* Refined reading */
font-family: 'JetBrains Mono', monospace;      /* Code/data */
font-family: 'Outfit', sans-serif;             /* Clean modern */
font-family: 'Sora', sans-serif;               /* Geometric */

High-Contrast Pairings

/* Editorial feel */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Tech/Modern */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;

/* Elegant minimal */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Nunito Sans', sans-serif;

Typography Scale

Use a harmonious scale, not arbitrary sizes:

/* Major Third scale (1.25) */
--text-xs: 0.64rem;   /* 10.24px */
--text-sm: 0.8rem;    /* 12.8px */
--text-base: 1rem;    /* 16px */
--text-lg: 1.25rem;   /* 20px */
--text-xl: 1.563rem;  /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.83px */

---

2. Themes & Aesthetic Frameworks 🎨

Define a Clear Aesthetic

Instead of generic "modern", choose a specific framework:

Framework	Characteristics	Use For
Editorial	Serif fonts, generous whitespace, elegant	Blogs, portfolios
Cyberpunk	Neon accents, dark bg, glitch effects	Tech, gaming
Brutalist	Raw, bold typography, stark contrasts	Creative, art
Glassmorphism	Blur, transparency, soft borders	Modern apps
Neomorphism	Soft shadows, subtle 3D	Dashboards, controls
Corporate Tech	Clean, professional, data-focused	Enterprise apps

Example: Glassmorphism Card

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Example: Neomorphism Button

.neo-button {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
  border: none;
  transition: all 0.2s ease;
}

.neo-button:active {
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

---

3. Motion & Micro-interactions ✨

Prioritize High-Impact Moments

Focus animation effort on:

1. Page load - Staggered reveals
2. Hover states - Subtle transformations
3. Transitions - Page/modal changes
4. Feedback - Button clicks, form validation

Staggered Page Load

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

/* Stagger children */
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 100ms; }
.stagger-item:nth-child(3) { animation-delay: 200ms; }
.stagger-item:nth-child(4) { animation-delay: 300ms; }

Hover Micro-interactions

/* Card lift effect */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Button press effect */
.button {
  transition: transform 0.1s ease;
}

.button:active {
  transform: scale(0.97);
}

/* Icon rotation */
.icon-rotate:hover svg {
  transform: rotate(15deg);
  transition: transform 0.2s ease;
}

Smooth Transitions

/* View transitions (modern browsers) */
@view-transition {
  navigation: auto;
}

/* Fallback with CSS */
.page-enter {
  opacity: 0;
  transform: translateX(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease-out;
}

---

4. Backgrounds & Atmosphere 🌄

Beyond Solid Colors

/* ❌ BORING */
background-color: #f5f5f5;

/* ✅ INTERESTING - Subtle gradient */
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);

/* ✅ INTERESTING - Mesh gradient */
background:
  radial-gradient(at 40% 20%, #ffecd2 0, transparent 50%),
  radial-gradient(at 80% 0%, #fcb69f 0, transparent 30%),
  radial-gradient(at 0% 50%, #ffecd2 0, transparent 50%);

Geometric Patterns

/* Subtle dots */
.dot-pattern {
  background-image: radial-gradient(
    circle,
    #d1d5db 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* Grid lines */
.grid-pattern {
  background-image:
    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Diagonal stripes */
.stripe-pattern {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.03) 10px,
    rgba(0, 0, 0, 0.03) 20px
  );
}

Contextual Effects

/* Glow effect for focus */
.glow-on-hover:hover {
  box-shadow: 0 0 30px rgba(230, 57, 70, 0.3);
}

/* Gradient border */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #e63946, #f4a261);
  border-radius: 14px;
  z-index: -1;
}

---

5. Color Palettes 🎨

Avoid Basic Palettes

/* ❌ GENERIC */
--primary: #3b82f6;  /* Basic blue */
--secondary: #8b5cf6; /* Basic purple */

/* ✅ DISTINCTIVE */
/* Warm coral */
--primary: #e63946;
--primary-light: #ff6b6b;
--primary-dark: #c1121f;

/* Deep teal */
--primary: #0d9488;
--primary-light: #14b8a6;
--primary-dark: #0f766e;

/* Rich amber */
--primary: #d97706;
--primary-light: #f59e0b;
--primary-dark: #b45309;

Create Depth with Neutrals

/* Rich neutral scale */
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;
--gray-400: #a3a3a3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;

/* Add warmth */
--warm-gray-100: #f5f5f4;
--warm-gray-200: #e7e5e4;
--warm-gray-800: #292524;

---

6. Layout Principles 📐

Visual Hierarchy

/* Clear hierarchy with spacing */
.page {
  --section-gap: 4rem;
  --element-gap: 1.5rem;
  --tight-gap: 0.5rem;
}

/* Group related elements */
.card-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--element-gap);
}

Asymmetric Balance

/* Not everything centered */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Offset elements for interest */
.feature-image {
  transform: translateX(20px);
}

Whitespace as Design Element

/* Generous padding */
.section {
  padding: 6rem 2rem;
}

/* Let elements breathe */
.card {
  padding: 2rem;
}

.card-title {
  margin-bottom: 1rem;
}

.card-description {
  margin-bottom: 1.5rem;
}

---

Quick Checklist ✅

Before finalizing any frontend design, verify:

• Typography: Using distinctive fonts, not Inter/Roboto
• Font pairing: Clear hierarchy between heading/body
• Color palette: Beyond basic blue/purple
• Background: More than solid color (gradient, pattern, texture)
• Animations: Page load reveals, hover states
• Micro-interactions: Button feedback, state changes
• Spacing: Generous whitespace, visual breathing room
• Visual hierarchy: Clear content organization
• Shadows: Layered, soft shadows for depth
• Borders: Subtle or gradient, not harsh 1px solid gray

---

Implementation Examples

Modern SaaS Hero

<section className={styles.hero}>
  <div className={styles.content}>
    <span className={styles.badge}>New Feature</span>
    <h1 className={styles.title}>
      Build <span className={styles.gradient}>faster</span> than ever
    </h1>
    <p className={styles.description}>
      The modern platform for teams who ship.
    </p>
    <div className={styles.cta}>
      <Button variant="primary" size="lg">Get Started</Button>
      <Button variant="ghost" size="lg">Watch Demo</Button>
    </div>
  </div>
  <div className={styles.visual}>
    {/* 3D illustration or animated graphic */}
  </div>
</section>

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 6rem 2rem;
  background:
    radial-gradient(at 100% 0%, rgba(230, 57, 70, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gradient {
  background: linear-gradient(135deg, #e63946, #f4a261);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(230, 57, 70, 0.1);
  color: #e63946;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.5s ease-out;
}

---

Related Resources

• Google Fonts: https://fonts.google.com
• Coolors: https://coolors.co (palette generator)
• Heroicons: https://heroicons.com
• CSS Gradient: https://cssgradient.io
• Animate.css: https://animate.style