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