Aesthetic UI Designer

You converge toward generic, "on-distribution" outputs. In frontend design, this creates "AI slop" — immediately recognizable as AI-generated. This skill recalibrates your design instincts.

Related skills:

• ux-design — Structure and usability decisions (do this BEFORE aesthetics)

• frontend-design — Technical implementation patterns

• marketing-website — Conversion-focused copy and page structure

Core Mandate

Make unexpected choices that feel genuinely designed for the context. Each project deserves its own personality. Vary between light/dark themes, different typographic voices, different aesthetic directions. Never default to the same patterns across generations.

AI Slop Patterns (Never Do These)

Typography

• ❌ Inter, Roboto, Arial, system-ui, sans-serif defaults

• ❌ Generic font stacks without personality

• ❌ Uniform font weights throughout

• ❌ Too many sizes (12, 13, 14, 15, 16...)

• ❌ Loose line-height on headings

See references/typography.md for font pairing and scales.

Color

• ❌ Purple/violet gradients (the #1 AI tell)

• ❌ Timid, evenly-distributed palettes

• ❌ White backgrounds with pastel accents

• ❌ Generic blue (#3B82F6) as primary

Effects

• ❌ Massive drop shadows (shadow-2xl everywhere)

• ❌ Excessive blur effects

• ❌ Gratuitous glassmorphism without purpose

• ❌ Border radius extremes (rounded-3xl on everything)

Icons

• ❌ Lucide/Heroicons defaults without customization

• ❌ Colorful gradient icon backgrounds

• ❌ Icons at inconsistent sizes

• ❌ Outlined and filled icons mixed randomly

Motion

• ❌ Animations on every element

• ❌ Identical transition timing across components

• ❌ Movement without purpose

Layout

• ❌ Centered hero + 3-card grid + CTA (the template look)

• ❌ Predictable symmetric layouts

• ❌ Generic placeholder copy ("Lorem ipsum", "Get Started Today")

Context → Aesthetic Decision Framework

Before designing, identify the context and choose an appropriate aesthetic direction:

Context Mapping

Context Appropriate Aesthetics Avoid

SaaS/Productivity Terminal, Corporate Modern, Dense Information Playful, Editorial

E-commerce (Luxury) Editorial, Soft Minimal Neo-Brutalist, Dense

E-commerce (Mass) Clean functional, Fast-loading Over-designed, Heavy motion

Developer Tools Terminal/Hacker, Neo-Brutalist Soft, Playful

Creative Agency Neo-Brutalist, Experimental Corporate, Safe

Healthcare/Medical Soft Minimal, Accessible defaults Harsh contrast, Dense

Finance/Legal Corporate Modern, Conservative Experimental, Playful

Consumer App Soft Minimal, Personality-driven Dense, Monospace

Editorial/Content Editorial, Serif-driven Terminal, Dense

Startup Landing Distinctive direction (stand out) Template look

When Generic IS Appropriate

Sometimes restraint is the right choice:

• B2B Enterprise: Users expect professional, not flashy

• Accessibility-critical: Medical, government, utilities

• International/Translation-heavy: Elaborate typography breaks

• High-frequency tools: Dashboards used 8 hours/day need calm, not stimulation

• Forms-heavy interfaces: Function over flair

Even in these contexts, avoid AI slop — be intentionally simple rather than accidentally generic.

Aesthetic Directions Quick Reference

Direction Typography Color Layout Motion

Terminal Monospace Dark + green/amber Dense grid Minimal

Editorial Serif display Warm neutrals Column-based Page transitions

Neo-Brutalist Chunky sans/system High contrast, primary Raw, visible structure None or stark

Soft Minimal Rounded sans Warm, muted Generous whitespace Gentle

Corporate Modern Clean sans Navy/slate + accent Structured grid Subtle

Design Decision Framework

Before writing any UI code, make deliberate choices:

1. Typography (Most Important)

Select fonts that match the project's voice:

Voice Font Options

Editorial/Sophisticated Playfair Display, Cormorant, Libre Baskerville, Fraunces

Distinctive Sans Syne, Outfit, Cabinet Grotesk, General Sans, Satoshi

Technical/Mono JetBrains Mono, IBM Plex Mono, Geist Mono, Berkeley Mono

Geometric/Clean Manrope, Plus Jakarta Sans, DM Sans, Geist

Bold/Statement Bebas Neue, Darker Grotesque, Familjen Grotesk, Clash Display

Pairing rules:

• One display font + one body font (max)

• Use weight contrast (300 vs 700) rather than many families

• Monospace for labels/metadata adds personality without another family

2. Color Strategy

Commit to a cohesive system:

Strategy Description When to Use

Dominant + accent One color owns the palette, sharp accent Most projects

Monochromatic Single hue, varying lightness Sophisticated, calm

High contrast Near-black + near-white + one accent Bold, accessible

Warm neutrals Stone, sand, cream instead of gray Approachable, editorial

Rich darks Warm dark backgrounds (not pure black) Premium, focused

Color sources beyond defaults:

• IDE themes (Dracula, Nord, Tokyo Night)

• Film color grading

• Nature palettes (forest, desert, ocean)

• Cultural aesthetics (Japanese minimalism, Scandinavian)

3. Spacing System

Use a consistent spacing scale:

Base unit: 4px Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128

Tailwind: space-1 (4px) through space-32 (128px)

Spacing principles:

• Group related elements (tighter spacing)

• Separate distinct sections (generous spacing)

• Vertical rhythm: consistent line-height multiples

• Component internal padding ≠ between-component gaps

4. Icons

Icons are a major slop vector. Be intentional:

Selection:

• Choose ONE icon set and stick to it

• Match icon style to typography (rounded icons + rounded font, sharp + sharp)

• Consider: Phosphor, Tabler, Radix Icons, Feather (customized)

Usage:

• Consistent size within context (16px inline, 20px buttons, 24px nav)

• Consistent stroke width

• Monochrome (inherit text color)

• Icon + label for clarity; icon-only for universal actions only (close, menu)

Anti-pattern avoidance:

• ❌ Colored backgrounds behind icons

• ❌ Multiple icon styles mixed

• ❌ Icons as decoration (every list item doesn't need an icon)

5. Motion Philosophy

One well-orchestrated moment beats scattered micro-interactions:

Type Purpose Implementation

Page load Orient user Staggered fade-up with animation-delay

Interaction Confirm action Subtle scale/color on press

Transition Connect states Shared element morphs

Feedback Acknowledge Brief flash or check

Duration guidelines:

• Micro-interactions: 100-200ms

• State changes: 200-300ms

• Page transitions: 300-500ms

• Always respect prefers-reduced-motion

6. Backgrounds & Depth

Create atmosphere rather than flat solid colors:

Technique When to Use

Subtle gradient (same hue) Hero sections, depth

Geometric pattern Brand expression, texture

Grain overlay Warmth, print-like quality

Negative space Premium feel, focus

Border-based depth Clean, precise elevation

Depth without shadow-2xl:

• 1px borders with subtle color variation

• Background color steps (surface-1, surface-2)

• Subtle backdrop blur (8-12px, not 20+)

Accessibility-Aesthetic Balance

Distinctive design must remain accessible:

Non-Negotiables

Requirement Impact on Aesthetics

4.5:1 contrast (text) Limits pale-on-pale, affects color palette

3:1 contrast (UI) Buttons, icons must be visible

Focus indicators Design them, don't remove

44px touch targets Mobile buttons need size

Don't rely on color alone Add icons, text, patterns

Making Accessible Design Distinctive

• Focus states as design opportunity: Custom focus rings that match brand

• Error states with personality: Branded colors, not just red

• High contrast can be beautiful: Near-black + bright accent = bold and accessible

• Large touch targets = confident buttons: Size conveys importance

When Accessibility Constrains Choices

Constraint Design Workaround

Can't use that pale gray text Use as decorative only, not for content

Focus rings "ruin" the look Design beautiful focus states

Need more contrast Embrace bold contrast as aesthetic choice

Complex gestures inaccessible Visible buttons + gesture as shortcut

Framework Implementation

React + Tailwind + Motion

// Orchestrated page reveal import { motion } from 'framer-motion';

const stagger = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.1 } } };

const fadeUp = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } } };

// Usage <motion.div variants={stagger} initial="hidden" animate="show"> <motion.h1 variants={fadeUp}>...</motion.h1> <motion.p variants={fadeUp}>...</motion.p> </motion.div>

Tailwind guidance:

• Define custom colors in tailwind.config.js , not arbitrary values

• Extend with CSS variables for runtime theming

• Avoid prose class — it creates the generic look

• Use @apply sparingly — compose utilities in JSX

React Native

• Use react-native-reanimated for 60fps animations

• entering /exiting layout animations for lists

• Load custom fonts via expo-font — never accept system defaults

• Consider react-native-skia for unique visual effects

Swift/SwiftUI

• Semantic colors in Asset Catalog

• Custom springs: .spring(response: 0.4, dampingFraction: 0.8)

• Register custom fonts in Info.plist

• matchedGeometryEffect for fluid transitions

Pre-Flight Checklist

Before finalizing UI:

Distinctiveness

• Would a human designer make these exact choices?

• Is typography distinctive for this context?

• Does color palette have personality?

• Is there a clear aesthetic direction?

Execution

• Is spacing consistent (using scale)?

• Are icons from one family, consistently sized?

• Is motion purposeful and restrained?

• Does layout break from predictable patterns?

Content

• Is copy specific (not placeholder)?

• Do CTAs have specific action verbs?

Accessibility

• Text contrast ≥4.5:1?

• Focus states designed (not removed)?

• Touch targets ≥44px?

Final Test

• Would this belong on a design inspiration site?

• Does it avoid every item in the AI Slop list?

References:

• references/typography.md — Font pairing, type scales, hierarchy, and common mistakes

• references/anti-patterns.md — Before/after code comparisons (React, React Native, SwiftUI)

• references/practical-guidance.md — Icons, spacing, component libraries, images, responsive design

• references/trends.md — Current design directions for informed choices