| 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
