135 lines
4.0 KiB
Markdown
135 lines
4.0 KiB
Markdown
---
|
|
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
|