---
name: distinctive-frontend
description: 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:

```css
/* 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

```css
: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

```css
.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

```css
/* 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