Aesthetic Directions

---
name: aesthetic-directions
description: >-
  Named aesthetic directions (brutalist, warm-minimal, neo-brutalist, organic,
  high-gloss, etc.) with visual moves, industry mapping, anti-slop detection,
  and rationale templates. Identifies intentional aesthetic choices vs.
  AI-generated visual clichés. Use proactively when choosing a visual direction
  before starting design work, evaluating whether an aesthetic is generic or
  intentional, mapping aesthetic choices to industry and audience, detecting and
  rejecting AI visual clichés, or presenting multiple direction options with
  rationale.
version: 1.0.0
tags: [design, aesthetic, visual-direction, brand-identity, anti-pattern]
when_to_use:
  - Choosing a visual direction before starting any design work
  - Evaluating whether an aesthetic is generic or intentional
  - Mapping aesthetic choices to industry and audience
  - Detecting and rejecting AI-generated visual clichés
  - Presenting multiple direction options with rationale
---

# Aesthetic Directions

Named aesthetic directions for committing to a specific visual identity. Each direction includes concrete visual moves, not vague adjectives.

## Purpose

- Force intentional aesthetic commitment before designing
- Provide concrete visual vocabulary (not "clean and modern")
- Map directions to industries and audiences
- Detect and reject AI-generated visual clichés

---

## Named Directions

### 1. Neo-Brutalist
**Visual Moves:** Raw borders (3-4px black), no border-radius, monospace type, flat colors, visible grid, intentional "ugliness" as confidence
**Type:** Mono headings (Space Mono), grotesque body (Work Sans)
**Color:** Black, white, one screaming accent (yellow, red, cyan)
**Spacing:** Tight, aggressive, asymmetric
**Motion:** None or instant. Movement is dishonest in this aesthetic
**Best For:** Creative agencies, dev tools, counter-culture brands

### 2. Swiss Precision
**Visual Moves:** Strict grid, Helvetica-adjacent type, lots of whitespace, left-aligned, minimal color, information-dense but ordered
**Type:** Grotesk headings (Neue Haas Grotesk), proportional body (Suisse Int'l or Geist)
**Color:** Black + white + one accent (typically red or blue)
**Spacing:** Generous, mathematical, grid-locked
**Motion:** Subtle, functional transitions only
**Best For:** Data platforms, fintech, professional services

### 3. Soft Tech
**Visual Moves:** Large border-radius (12-16px), soft shadows, pastel-adjacent palette, generous padding, rounded illustrations
**Type:** Rounded sans (Nunito Sans, Figtree), friendly weight
**Color:** Soft primaries, tinted neutrals (not pure gray)
**Spacing:** Generous, breathable, comfortable
**Motion:** Gentle easing, subtle bounce on interaction
**Best For:** Consumer SaaS, onboarding flows, education platforms

### 4. Editorial Luxury
**Visual Moves:** Serif dominance, generous line-height, pull quotes, editorial grid with asymmetric columns, restrained palette
**Type:** Display serif headings (Playfair Display, Cormorant), refined body (Source Serif Pro)
**Color:** Deep darks, cream/ivory backgrounds, gold or copper accents
**Spacing:** Luxurious whitespace, dramatic margins
**Motion:** Slow, deliberate fades and reveals
**Best For:** Fashion, publishing, luxury brands, portfolios

### 5. Dark Industrial
**Visual Moves:** Dark backgrounds, monospace accents, subtle grid lines, technical labels, exposed-system aesthetic
**Type:** Mono UI (JetBrains Mono), condensed sans body (Barlow Condensed)
**Color:** Near-black bg, gray-400 text, neon accents (green, cyan)
**Spacing:** Compact, functional, dense
**Motion:** Glitch effects, terminal-style reveals
**Best For:** Cybersecurity, infrastructure, monitoring dashboards

### 6. Organic Warmth
**Visual Moves:** Earth tones, organic shapes (blob borders), hand-drawn accents, textured backgrounds, imperfect geometry
**Type:** Humanist sans (Atkinson Hyperlegible, Cabin), or casual serif (Lora)
**Color:** Terracotta, sage, cream, warm grays
**Spacing:** Irregular but rhythmic, natural feel
**Motion:** Gentle, organic easing curves
**Best For:** Wellness, sustainability, artisan brands, natural products

### 7. Retro-Futuristic
**Visual Moves:** CRT glow effects, scan lines, retro-sci-fi typography, neon on dark, chrome gradients
**Type:** Geometric display (Orbitron, Audiowide), clean sans body (Exo 2)
**Color:** Deep navy/black, neon cyan/magenta, chrome silver
**Spacing:** Structured, symmetrical, padded
**Motion:** Flicker, glow pulse, slide-in reveals
**Best For:** Gaming, entertainment, music, event platforms

### 8. Maximalist Chaos
**Visual Moves:** Clashing colors, mixed media, overlapping elements, broken grid, type as texture, intentional overflow
**Type:** Mixed: display + handwritten + sans in one composition
**Color:** High saturation, complementary clashes, no "safe" palette
**Spacing:** Tight, overlapping, collage-like
**Motion:** Energetic, staggered, unexpected
**Best For:** Youth culture, music festivals, streetwear, creative portfolios

### 9. Japanese Minimal
**Visual Moves:** Extreme whitespace, asymmetric balance, delicate type, subtle dividers, wabi-sabi imperfection
**Type:** Light weight sans (Zen Kaku Gothic, Noto Sans JP for JP; Jost for Latin)
**Color:** Near-white, charcoal, one muted accent (indigo, moss)
**Spacing:** Dramatic whitespace, sparse layout
**Motion:** Slow, meditative transitions
**Best For:** Tea, ceramics, meditation, premium minimalism

### 10. Art Deco Geometric
**Visual Moves:** Symmetrical compositions, geometric patterns, gold/metallic accents, stepped forms, sunburst motifs
**Type:** Geometric display (Poiret One, Tenor Sans), clean body (Josefin Sans)
**Color:** Black, gold, deep jewel tones (emerald, sapphire)
**Spacing:** Symmetrical, grand, ceremonial
**Motion:** Elegant reveals, geometric transitions
**Best For:** Hotels, events, cocktail bars, luxury real estate

### 11. Glassmorphism
**Visual Moves:** Frosted glass layers, blur backgrounds, subtle borders, translucent surfaces, depth via layering
**Type:** Medium-weight sans (Inter, SF Pro — here Inter is intentional)
**Color:** Translucent whites/darks, vibrant background blurs
**Spacing:** Standard with layered depth
**Motion:** Parallax, smooth layer transitions
**Best For:** Dashboards, music apps, weather apps (use sparingly)

### 12. Monochrome Editorial
**Visual Moves:** Single-hue palette (black/white/grays), dramatic type scale, rule lines, strong hierarchy through weight
**Type:** High-contrast pairing (Bebas Neue + Barlow), extreme scale difference
**Color:** Pure black, white, 3 gray values max
**Spacing:** Tight headings, generous body, dramatic section breaks
**Motion:** Minimal, scroll-driven reveals
**Best For:** Photography, journalism, minimal portfolios

### 13. High Contrast Accessibility-First
**Visual Moves:** Maximum contrast, large type, chunky interactive targets, clear focus states, zero ambiguity
**Type:** Atkinson Hyperlegible + large base size (18px+)
**Color:** True black on true white (or reverse), high-saturation accents
**Spacing:** Extra generous, larger touch targets (48px+)
**Motion:** Reduced by default, respects prefers-reduced-motion
**Best For:** Government, healthcare, accessibility-critical apps

### 14. Nordic Calm
**Visual Moves:** Muted palette, clean lines, functional beauty, natural materials reference, understated confidence
**Type:** Red Hat Display + Red Hat Text, or Manrope
**Color:** Fog gray, pale blue, warm white, muted sage
**Spacing:** Generous, balanced, serene
**Motion:** Slow, smooth, almost imperceptible
**Best For:** Furniture, lifestyle, Scandinavian brands, wellness

### 15. Corporate Rebellion
**Visual Moves:** Starts corporate (grid, clean type) then breaks rules (oversized type, unexpected color, broken alignment)
**Type:** Clean grotesque (Geist) with moments of display disruption (Clash Display)
**Color:** Mostly neutral with one "rule-breaking" accent
**Spacing:** Structured with intentional breaks
**Motion:** Professional with surprising micro-interactions
**Best For:** Challenger brands, disruptive startups, rebrand work

### 16. Cyberpunk
**Visual Moves:** Neon glow on dark, HUD-style interfaces, glitch artifacts, data-stream patterns, angular geometry
**Type:** Condensed sans (Chakra Petch), monospace data (Fira Code)
**Color:** Deep purple/navy bg, neon green/cyan/pink accents
**Spacing:** Dense, information-overload-as-aesthetic
**Motion:** Glitch, flicker, data-scroll effects
**Best For:** AI/ML products, crypto, hacking tools, sci-fi games

### 17. Vintage Paper
**Visual Moves:** Cream/sepia backgrounds, aged textures, woodcut-style illustrations, old-style figures, ornamental dividers
**Type:** Old-style serif (EB Garamond, Crimson Pro), small caps headers
**Color:** Cream, sepia, deep brown, muted red
**Spacing:** Book-like margins, generous line height
**Motion:** Page-turn transitions, fade-in reveals
**Best For:** Bookstores, heritage brands, artisan food, whiskey

### 18. Bauhaus
**Visual Moves:** Primary colors + black, geometric shapes, asymmetric grid, functional typography, form = function
**Type:** Geometric sans (Futura, Jost), uppercase headings
**Color:** Red, blue, yellow, black, white — no other hues
**Spacing:** Structured, mathematical, grid-strict
**Motion:** Geometric transitions, rotation, sliding
**Best For:** Design schools, architecture, museums, furniture

### 19. Pastel Dream
**Visual Moves:** Soft pastels, rounded everything, gentle gradients, cloud-like surfaces, whimsical illustrations
**Type:** Rounded sans (Quicksand, Comfortaa), light weights
**Color:** Lavender, mint, blush, soft yellow, cream
**Spacing:** Generous, soft, padded
**Motion:** Float, gentle bounce, dreamy easing
**Best For:** Children's products, wedding, Gen-Z consumer, creative tools

### 20. Sci-Fi Interface
**Visual Moves:** Grid overlays, circular gauges, technical readouts, hexagonal patterns, thin-line icons, HUD corners
**Type:** Condensed sans (Rajdhani, Exo 2), monospace data
**Color:** Dark blue-black bg, cyan/amber data, white text
**Spacing:** Dense, organized into panels/modules
**Motion:** Scan-line reveals, data counter animations, radial transitions
**Best For:** Space/aviation, military, simulation, dashboard-heavy apps

---

## Dual-Mode Framework

| Mode | When to Use | Approach |
|------|-------------|----------|
| **Innovative** (default) | New brand, creative brief, rebrand, greenfield | Choose bold direction, push boundaries, create distinctive identity |
| **Controlled** | Existing design system, extension, maintenance | Work within established tokens, extend rather than replace, maintain consistency |

**Decision:** If codebase contains existing design tokens, CSS custom properties, or a design system config → default to Controlled. Otherwise → Innovative.

---

## Industry Selection Matrix

| Industry + Tone | Top 3 Recommended Directions |
|-----------------|------------------------------|
| Finance + Trust | Swiss Precision, Nordic Calm, Monochrome Editorial |
| Finance + Disruptive | Corporate Rebellion, Dark Industrial, Art Deco Geometric |
| Healthcare + Calm | Organic Warmth, High Contrast Accessibility-First, Nordic Calm |
| SaaS + Professional | Swiss Precision, Soft Tech, Nordic Calm |
| SaaS + Bold | Neo-Brutalist, Corporate Rebellion, Cyberpunk |
| E-commerce + Luxury | Editorial Luxury, Art Deco Geometric, Vintage Paper |
| E-commerce + Youth | Maximalist Chaos, Pastel Dream, Retro-Futuristic |
| Gaming + Immersive | Cyberpunk, Sci-Fi Interface, Retro-Futuristic |
| Education + Friendly | Soft Tech, Organic Warmth, Pastel Dream |
| Dev Tools + Technical | Dark Industrial, Neo-Brutalist, Swiss Precision |
| Creative Agency | Neo-Brutalist, Maximalist Chaos, Corporate Rebellion |

---

## Anti-Slop Detector

Reject these AI-generated visual clichés on sight:

| # | Cliché | Why It's Slop |
|---|--------|---------------|
| 1 | Inter + blue gradient on white | Default AI output, zero design thought |
| 2 | Purple-to-pink gradient hero section | Most overused AI-generated visual |
| 3 | Generic SaaS illustration (flat people, oversized limbs) | Undraw/Humaaans default, signals template |
| 4 | Card grid with identical border-radius and shadow | Cookie-cutter layout, no hierarchy |
| 5 | "Clean and modern" as entire aesthetic rationale | Says nothing, means nothing |
| 6 | Blue CTA button on white with gray text | Bootstrap default disguised as design |
| 7 | Hero section: big text left, mockup right | Every AI landing page ever |
| 8 | Gradient mesh background with no purpose | Eye candy without function |
| 9 | Rounded sans-serif in light weight for everything | Wishy-washy, no typographic conviction |
| 10 | White card on gray background as entire UI system | Minimal effort, not minimalism |
| 11 | Indistinguishable from Stripe, Linear, or Vercel | Derivative, not inspired by |
| 12 | Stock photo hero with overlay gradient | Lazy, impersonal, instantly forgettable |
| 13 | 3D floating elements for no functional reason | Decorative complexity without purpose |
| 14 | Emoji as primary visual language | Casual ≠ designed |
| 15 | Dark mode = just invert colors | Dark mode requires intentional design |

---

## Validation Checklist

- [ ] Aesthetic direction explicitly named (not "clean and modern")
- [ ] Visual moves described concretely (type, color, spacing, radius, motion)
- [ ] Direction justified against audience + content + brand
- [ ] At least 3 directions evaluated before committing
- [ ] Chosen direction passes Anti-Slop Detector
- [ ] Mode (Innovative vs Controlled) explicitly declared