Aesthetic Directions

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Everyone-Needs-A-Copilot
• Source: Everyone-Needs-A-Copilot/claude-copilot
• License: MIT
• Homepage: https://ineedacopilot.com

Install and usage instructions live in the source repository linked above.