mingle-website/.claude/skills/distinctive-frontend/SKILL.md

name	description
distinctive-frontend	Create visually distinctive, high-impact frontend interfaces using the four-vector approach (typography, color/theme, motion, backgrounds). Use when building or improving web pages, components, or UI elements that need bold, memorable design.

Distinctive Frontend Design

Create visually distinctive, high-impact frontend interfaces that avoid generic "AI slop" aesthetics. This skill applies the four-vector approach: typography, color/theme, motion, and backgrounds.

Core Principles

Avoid distributional convergence: Reject default choices (Inter/Roboto fonts, purple gradients, minimal animations). Instead, make bold, cohesive design decisions that create memorable interfaces.

Think in systems: Use CSS variables, design tokens, and coordinated choices across all four dimensions rather than isolated tweaks.

1. Typography - Use Extremes

Font Weight Strategy

• Go to extremes: Use 100-200 (thin) vs 800-900 (black), not safe 400 vs 600
• Create hierarchy through weight contrast, not just size
• Example combinations:
  • Headers: 900 weight, body: 200 weight
  • Headers: 100 weight (elegant), body: 500 weight

Font Pairing

Avoid generic system fonts. Use distinctive pairings:

/* Option 1: Geometric Sans + Monospace */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Option 2: Serif Display + Sans Body */
--font-display: 'Playfair Display', serif;
--font-body: 'Source Sans 3', sans-serif;

/* Option 3: Condensed + Wide */
--font-display: 'Bebas Neue', cursive;
--font-body: 'DM Sans', sans-serif;

Implementation Pattern

:root {
  --font-display: [distinctive font];
  --font-body: [complementary font];
  --weight-thin: 100;
  --weight-light: 200;
  --weight-bold: 800;
  --weight-black: 900;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
}

body, p {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  letter-spacing: 0.01em;
}

2. Color & Theme - Commit to Cohesion

• Draw from cultural references: Movies, art movements, IDE themes, nature
• Use CSS variables for systematic color application
• Avoid: Safe blues/purples, low-contrast pastels

3. Motion - Orchestrated Page Load

• Prioritize page-load choreography over scattered micro-interactions
• Use staggered reveals to guide attention with animation-delay
• Use CSS-only solutions for vanilla HTML/JS projects
• Respect prefers-reduced-motion for accessibility

.fade-in {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

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

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; opacity: 1; }
}

4. Backgrounds - Atmospheric Depth

• Layer gradients and patterns instead of flat colors
• Create depth through overlays
• Use subtle noise/grain for texture

/* Mesh gradient (layered) */
.gradient-bg {
  background:
    radial-gradient(at 0% 0%, rgba(255, 113, 206, 0.4) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgba(1, 205, 254, 0.4) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(185, 103, 255, 0.4) 0, transparent 50%),
    var(--bg-primary);
}

Anti-Pattern Checklist

❌ Avoid:

• Inter or Roboto as primary font
• Font weights: 400, 500, 600 (too safe)
• Purple-blue gradient backgrounds
• No page-load animation
• Flat white/gray backgrounds
• Pastel low-contrast colors

✅ Aim for:

• Distinctive font pairing
• Extreme weight contrast (100-200 vs 800-900)
• Cohesive color theme with clear reference
• Orchestrated entrance animation
• Layered/textured backgrounds
• Bold, memorable aesthetic