Innovative Designer for impact

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out.

This skill emphasizes bold creative commitment, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional.

Core Philosophy

CRITICAL: Design Thinking Protocol

Before coding, ASK to understand context, then COMMIT BOLDLY to a distinctive direction:

Questions to Ask First

Purpose: What problem does this interface solve? Who uses it?
Tone: What aesthetic extreme fits? (see Tone Options below) Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility)?
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, TypeScript, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Tone Options (Pick an Extreme)

Choose a clear aesthetic direction and execute with precision:

Brutally minimal - stripped to essence, bold typography, vast whitespace
Retro-futuristic - vintage meets sci-fi, nostalgic tech aesthetics
Organic/natural - soft edges, earthy colors, nature-inspired textures
Editorial/magazine - strong typography hierarchy, asymmetric layouts
Brutalist/raw - exposed structure, harsh contrasts, intentionally rough
Art deco/geometric - bold patterns, metallic accents, symmetric elegance
Soft/pastel - gentle gradients, muted tones, calming atmosphere
Industrial/utilitarian - functional, no-nonsense, mechanical precision • - Neo-Swiss Grid - rigorous grid, restrained palette, razor-sharp alignment, typographic clarity
- Anti-Grid Experimental - intentional misalignment, broken columns, playful tension, art-school energy
- Monochrome High-Contrast - black/white only, stark hierarchy, dramatic scale shifts, graphic punch
- Duotone Pop - two-color system, bold overlays, poster-like impact, strong silhouettes
- Kinetic Typography - type as motion, stretched/warped letterforms, rhythm- first composition
- Glitch/Digital Noise - scanlines, compression artifacts, chromatic offsets, “corrupted” UI textures
- Y2K Cyber Gloss - chrome gradients, gel buttons, translucent panels, late- 90s web futurism
- Vaporwave Nostalgia - neon dusk palette, palm silhouettes, faux-3D, retro mall ambience
- Synthwave Night Drive - magenta/cyan, grid horizons, glowing edges, cinematic neon noir
- Memphis Playful - squiggles, confetti geometry, loud patterns, upbeat irreverence
- Riso Print - limited inks, misregistration, grainy textures, analog imperfection
- Bauhaus Modernism - primary colors, simple geometry, functional forms, clarity through reduction
- Constructivist Propaganda - diagonals, bold blocks, agit-poster energy, commanding headlines
- Futurist Speed - slanted type, motion lines, aggressive angles, velocity as a design principle
- Cinematic Noir - moody shadows, tight spotlighting, grain, suspenseful minimal palette
- Whimsical Storybook - soft illustration cues, charming type, warm palette, gentle narrative layout
- Modern Skeuomorphic - tactile UI cues, soft shadows, realistic materials, “touchable” surfaces
- Clay/Soft 3D - rounded forms, matte materials, friendly depth, playful product-UI vibe
- Isometric Systems - isometric grids, diagrammatic clarity, technical-yet- playful structure
- Data-Driven Dashboard - dense but legible, charts as hero elements, pragmatic hierarchy
- Scientific/Technical - annotation callouts, thin rules, measured spacing, lab-manual precision
- Military/Command UI - tactical overlays, coordinate grids, utilitarian type, “mission interface” mood
- Weathered/Vintage Patina - worn textures, faded inks, imperfections, found- object authenticity
- Coastal/Airy - sun-bleached palette, breezy spacing, light serif accents, calm openness
- Desert Modern - sand/clay tones, hard sunlight contrast, minimal geometry, heat-haze vibe
- Botanical Apothocary - old labels, muted greens, serif type, pressed-plant textures
- Nordic Calm - pale neutrals, soft contrast, clean type, quiet warmth
- Playful Minimal - minimal layout with one “smile” detail, bright accent, friendly type choices
- Startup Crisp - clean UI, bold CTA geometry, vibrant accent, product-forward clarity
- High-Fashion Lookbook - ultra-thin type, dramatic photography framing, sparse copy, luxe whitespace
- Museum Exhibition - quiet typography, generous margins, caption-like text, gallery placard vibe
- Architectural Blueprint - linework, measurement marks, grid overlays, technical drawing aesthetic
- Monastic/Wabi-Sabi - imperfect textures, quiet tones, asymmetry, beauty in restraint

After Getting Context

Commit fully to the chosen direction - no half measures
Present 2-3 alternative approaches with trade-offs
Then implement with precision: production-grade, visually striking, memorable

Foundational Design Principles

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

Stand Out From Generic Patterns

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

NEVER Use These AI-Generated Aesthetics:

Fonts: Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)
Colors: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
Patterns: Cookie-cutter layouts, predictable component arrangements
Effects: Glass morphism, Apple design mimicry, liquid/blob backgrounds
Overall: Anything that looks "Claude-generated" or machine-made

Instead, Create Atmosphere:

Suggest photography, patterns, textures over flat solid colors
Think beyond typical patterns - you can step off the written path
See Visual Effects (Implementation Checklist) in Interaction Design section for specific techniques: gradient meshes, grain overlays, dramatic shadows, layered transparencies, custom cursors

Draw Inspiration From:

Award-winning digital work:

Awwwards - Site of the Day winners
FWA - Cutting-edge web experiences
CSS Design Awards
Dribbble Playoffs - Top shots for component ideas

Independent studios known for distinctive work:

Dutch: Studio Dumbar, Lava Design, Thonik
Swiss: Büro Destruct, NORM, Elektrosmog
British: Studio Output, Made Thought, NB Studio
Spanish: Mucho, Folch, Vasava
American: Collins, Pentagram, HAWRAF
Japanese: 6D-K, Rhizomatiks, TeamLab (digital)

Historical movements (study, don't copy):

Bauhaus, Swiss International, Otl Aicher's Munich Olympics
Emigre magazine, David Carson's Ray Gun
Neville Brody's Face magazine, Sagmeister's rule-breaking

Technical inspiration:

Codrops - CSS/JS experiments
CodePen Spark - Creative code
Hoverstat.es - Hover state inspiration
Beautiful background animations (CSS, SVG) - slow, looping, subtle

Visual Interest Strategies:

Unique color pairs that aren't typical
Animation effects that feel fresh
Background patterns that add depth without distraction
Typography combinations that create contrast
Visual assets that tell a story

Creative Reframing Prompts

When stuck in safe patterns, ask yourself:

Designer lens:

"What would Sagmeister do?" → Provocation, hand-drawn, conceptual depth
"What would Neville Brody do?" → Typography as art, rule-breaking hierarchy
"What would Studio Dumbar do?" → Bold color, geometric play, Dutch directness
"What would Dieter Rams do?" → Radical reduction, functional beauty
"What would David Carson do?" → Destroy the grid, prioritize feeling over reading

Context shift:

"What if this was a magazine spread?" → Editorial hierarchy, pull quotes, art direction
"What if this was a museum exhibit?" → Generous space, quiet typography, specimen presentation
"What if this was street signage?" → Maximum legibility, bold simplicity
"What if this was a vinyl record cover?" → Square constraint, tactile quality, collectible feel
"What if this was a protest poster?" → Urgency, stark contrast, immediate impact

Era lens:

"1960s Swiss International?" → Grid perfection, Helvetica, rational clarity
"1990s Emigre/Ray Gun?" → Chaos, layering, deliberately challenging
"1920s Bauhaus?" → Primary colors, geometric forms, functional art
"2000s Flash era?" → Motion-first, experimental navigation, surprise
"Cyberpunk 2077?" → Neon, glitch, dense information, dark UI

Force Variety (Anti-Sameness Protocol)

Before implementing, roll the dice on these dimensions:

Color temperature: Flip a coin

Heads → Warm palette (terracotta, ochre, cream, rust)
Tails → Cool palette (slate, ice blue, mint, charcoal)

Layout direction: Roll 1-4

Left-heavy asymmetry
Right-heavy asymmetry
Center-dominant with edge tension
Diagonal/rotated flow

Type personality: Roll 1-6

Geometric sans (sharp, modern)
Humanist sans (warm, approachable)
Serif (editorial, trustworthy)
Slab serif (bold, industrial)
Display/decorative (expressive, unique)
Monospace (technical, systematic)

Motion philosophy: Roll 1-3

Minimal (only essential feedback)
Choreographed (orchestrated reveals, scroll-triggered)
Playful (bouncy, overshoots, personality)

Density: Roll 1-2

Generous whitespace (luxury, breathing room)
Controlled density (editorial, information-rich)

Use these when:

Starting a new project with no brand constraints
Feeling stuck in repetitive patterns
The brief is open-ended
You want to explore before committing

Core Design Philosophy

Simplicity
- Identify the essential purpose and eliminate distractions
- Begin with complexity,
- Every element must justify its existence
Material Honesty
- Digital materials have unique properties - embrace them
- Buttons communicate affordance through color, spacing, typography, AND shadows when intentional
- Cards can use borders, background differentiation, OR dramatic shadows for depth
- Animations follow real-world physics principles adapted to digital responsiveness
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Examples:

Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
Containers: Use borders, background shifts, generous padding, OR shadow depth
Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic

Functional Layering
- Create hierarchy through typography scale, color contrast, and spatial relationships
- Layer information conceptually (primary → secondary → tertiary)
- Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
- Embrace functional depth: modals over content, dropdowns over UI
- Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
Obsessive Detail
- Consider every pixel, interaction, and transition
- Excellence emerges from hundreds of small, intentional decisions
- Balance: Details should serve simplicity, not complexity
- When detail conflicts with clarity, clarity wins
Coherent Design Language
- Every element should visually communicate its function
- Elements should feel part of a unified system
- Nothing should feel arbitrary
Invisibility of Technology
- The best technology disappears
- Users should focus on content and goals, not on understanding the interface

What This Means in Practice

Color Usage:

Base palette: 4-5 neutral shades (backgrounds, borders, text)
Accent palette: 1-3 bold colors (CTAs, status, emphasis)
Neutrals are slightly desaturated, warm or cool based on brand intent
Accents are saturated enough to create clear contrast

Typography:

Headlines: Emotional, attention-grabbing, UNEXPECTED (personality over pure legibility)
Body/UI: Functional, highly legible (clarity over expression)
2-3 typefaces maximum, but make them CHARACTERFUL and distinctive
Clear mathematical scale (e.g., 1.25x between sizes)
NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts

Animation:

Purposeful: Guides attention, establishes relationships, provides feedback
Physics-informed: Natural easing, appropriate mass/momentum

Spacing:

Generous negative space creates clarity and breathing room
Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)
Consistent application creates visual rhythm

Design Decision Checklist

Before presenting any design, verify:

Purpose: Does every element serve a clear function?
Hierarchy: Is visual importance aligned with content importance?
Consistency: Do similar elements look and behave similarly?
Accessibility: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
Responsiveness: Does it work on mobile, tablet, desktop?
Uniqueness: Does this break from generic SaaS patterns?
Approval: Have I asked before implementing colors, fonts, sizes, layouts?

Design System Framework:

For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, think of a design system.

Visual Design Standards

Color & Contrast

Color System Architecture:

Every interface needs two color roles:

Base/Neutral Palette (4-5 colors):
- Backgrounds (lightest)
- Surface colors (cards, inputs)
- Borders and dividers
- Text (darkest)
- Use slightly desaturated, warm or cool greys based on brand
Accent Palette (1-3 colors):
- Primary action (CTA buttons)
- Status indicators (success, warning, error, info)
- Focus/hover states
- Use saturated colors for clear contrast against neutrals

Palette Structure Example:

Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)

Color Application Rules:

Backgrounds: Lightest neutral (slate-50 or white)
Text: Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)
Buttons (primary): Accent color with white text
Buttons (secondary): Neutral with border and dark text
Status indicators: Specific accent (green=success, red=error, amber=warning, blue=info)
Interactive states:
- Hover: Darken by 10-15% or shift hue slightly
- Focus: Use ring/outline in accent color
- Disabled: Reduce opacity to 40-50% and remove hover effects

Color Relationships:

Choose warm or cool intentionally based on brand:

Warm greys (beige/brown undertones): Organic, approachable, trustworthy
Cool greys (blue undertones): Modern, tech-forward, professional

Accent colors should have clear contrast with both:

Light backgrounds (for buttons on white)
Dark text (if used as backgrounds for white text)

Intentional Color Usage:

Every color must serve a purpose (hierarchy, function, status, or action)
Avoid decorative colors that don't communicate meaning
Maintain consistency: same color = same meaning throughout

Accessibility:

Ensure sufficient contrast for color-blind users
Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text
Don't rely on color alone to convey information (add icons or labels)

Unique Color Strategy:

To stand out from generic patterns:

NEVER use default SaaS blue (#3B82F6) or purple gradients on white
Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks
Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
Dominant colors with SHARP accents outperform timid, evenly-distributed palettes
Test combinations against "does this look AI-generated?" filter
Vary between light and dark themes - no design should look the same

Create Atmosphere with Color: See Visual Effects (Implementation Checklist) for implementation details on gradient meshes, grain overlays, layered transparencies, and dramatic shadows.

Typography Excellence

Typography Philosophy:

Typography is a primary design element that conveys personality and hierarchy.

Functional vs Emotional Typography:

Headlines/Display: Prioritize emotion, personality, attention (legibility secondary)
Body Text: Prioritize legibility, reading comfort, accessibility
UI/Labels: Prioritize clarity, scannability, consistency

Font Selection:

Use 2-3 typefaces maximum, but make them UNEXPECTED and characterful
Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
Prefer variable fonts for fine-tuned control and performance

NEVER Use These Fonts as Primary:

Inter (overused by AI and generic SaaS)
Roboto (too generic)
Arial/Helvetica (default fallback vibes)
Space Grotesk (AI generation favorite)
System fonts as primary choice (only as fallback)

Font Version Usage:

Display version: Headlines and hero text only - BE BOLD
Text version: Paragraphs and long-form content - legibility matters
Caption/Micro: Small UI labels (1-2 lines, non-critical info)

Find Distinctive Fonts:

Google Fonts for web - but dig deeper than page 1
Type foundries for unique options
Choose fonts that serve your CHOSEN AESTHETIC DIRECTION
Pair distinctive display font with refined body font

Typographic Scale:

Use mathematical relationships for size hierarchy:

Ratio: Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
Base size: 16px (1rem) for body text

Example scale (1.25x):

xs:   0.64rem (10px)
sm:   0.8rem  (13px)
base: 1rem    (16px)
lg:   1.25rem (20px)
xl:   1.563rem (25px)
2xl:  1.953rem (31px)
3xl:  2.441rem (39px)
4xl:  3.052rem (49px)
5xl:  3.815rem (61px)

Typographic Hierarchy:

Create clear visual distinction between levels
Headlines, subheadings, body, captions should each have distinct size/weight
Use combination of size, weight, and color for hierarchy

Spacing & Readability:

Line height: 1.5x font size for body text (e.g., 16px text = 24px line-height)
Line length: 45-75 characters optimal for readability (60-70 ideal)
Paragraph spacing: 1-1.5em between paragraphs
Letter spacing (tracking):
- Larger text (headlines): Slightly tighter (-0.02em to -0.05em)
- Normal text (body): Default (0)
- Small text (captions): Slightly looser (+0.01em to +0.03em)
- General rule: As size increases, reduce tracking; as size decreases, increase tracking

Font Pairing Logic:

When using multiple typefaces, create contrast through:

Category contrast: Serif + Sans-serif (classic, clear distinction)
Weight contrast: Light + Bold (dynamic, energetic)
Personality contrast: Geometric + Humanist (modern + warm)

Examples:

Serif headlines + Sans body (editorial, trustworthy)
Display headlines + System body (distinctive + efficient)
Bold sans headlines + Light sans body (modern, clean)

UI Typography:

Specific guidance for interface elements:

Button text: Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)
Form labels: Regular (400), 14px, positioned above input
Form input text: Regular (400), 16px minimum (prevents iOS zoom on focus)
Placeholder text: Light (300) or desaturated color, same size as input
Error messages: Regular (400), 12-14px, color-coded (red-ish)

Responsive Typography:

Scale type sizes across breakpoints:

// Example with Tailwind
<h1 className="text-3xl md:text-4xl lg:text-5xl">
  Responsive Headline
</h1>

// Or with CSS clamp (fluid)
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Reduce sizes on mobile (20-30% smaller than desktop) Reduce hierarchy levels on small screens (fewer distinct sizes)

Layout & Spatial Design

Compositional Balance:

Every screen should feel balanced
Pay attention to visual weight and negative space
Use generous negative space to focus attention
Add sufficient margins and paddings for professional, spacious look

Grid Discipline:

Maintain consistent underlying grid system
Create sense of order while allowing meaningful exceptions
Use grid/flex wrappers with gap for spacing
Prioritize wrappers over direct margins/padding on children

Spatial Relationships:

Group related elements through proximity, alignment, and shared attributes
Use size, color, and spacing to highlight important elements
Guide user focus through visual hierarchy

Attention Guidance:

Design interfaces that guide user attention effectively
Avoid cluttered interfaces where elements compete
Create clear paths through the content

Interaction Design

Motion Specification:

For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).

Motion Requirements (Implementation Checklist)

These are specific, high-impact motion patterns to implement for memorable interfaces:

Scroll-Triggered Animations:

Use Intersection Observer API for performant scroll detection
Trigger animations when elements enter viewport (not on page load)
Example: data-animate="fade-up" with .is-visible class toggle

Staggered Reveal Animations:

Use animation-delay for sequential element reveals
Apply to lists, grids, and grouped content

Timing principles (not rules):

Base delay: 50-150ms between elements (faster = energetic, slower = elegant)
Total sequence: Keep under 1s or users lose patience
Pattern choices: Linear (predictable), eased (accelerating/decelerating), or random (chaotic)
Direction: Left-to-right, top-to-bottom, diagonal, center-out, or edge-in

Background Atmosphere:

Add grain/noise texture overlay via body::before pseudo-element
Create floating/pulsing background orbs with @keyframes

Ambient motion principles:

Duration: 8-20s for background elements (slow = calming, faster = energetic)
Transform types: translateY (floating), scale (breathing), rotate (orbiting)
Easing: Use ease-in-out for organic, breathing feel
Intensity: Subtle (5-20px movement) for backgrounds, bolder for hero elements
Layering: Multiple elements at different speeds create depth (parallax effect)

Layout Animation:

Use asymmetric bento grid layouts with varied reveal timing
Animate grid items individually, not the container
Consider diagonal or wave-pattern reveal sequences

Data Visualization Motion:

Include animated progress bars that fill on scroll-trigger
Implement stat counters that count up when visible
Use easing that slows at the end (ease-out) for natural feel

Hover State Transformations:

translateY(-4px) for subtle lift effect
scale(1.02-1.05) for emphasis
Glow effects via box-shadow with accent color
Combine transforms: transform: translateY(-4px) scale(1.02);
Always include transition for smooth state changes

Social Proof Motion:

Implement infinite marquee/ticker for testimonials, logos, or stats
Use CSS-only approach with @keyframes for seamless loop
Pause on hover for accessibility (animation-play-state: paused)

Marquee principles:

Speed: 20-60s for full cycle (slower = premium, faster = urgency)
Direction: Horizontal (traditional), vertical (unique), or diagonal (bold)
Content duplication: Duplicate content 2x for seamless loop
Gap control: Consistent spacing between items (use flexbox gap)
Pause behavior: Always pause on hover/focus for accessibility

Visual Effects (Implementation Checklist)

Consolidated checklist for atmospheric visual effects (complements Color & Typography sections):

Gradient Mesh Backgrounds:

Use multiple radial gradients with offset positions
Blend with background-blend-mode: multiply or overlay
Animate gradient positions subtly for living backgrounds

Gradient mesh principles:

Layer count: 2-4 radial gradients (more = richer, fewer = cleaner)
Position strategy: Offset from corners/edges (20-30% from edge creates tension)
Opacity range: 0.1-0.4 for overlays (subtle), 0.5-0.8 for dominant
Shape choices: Ellipse (organic), circle (focused), conic (radial burst)
Animation: Shift positions 10-30% over 15-30s for subtle movement

Dramatic Shadows (Not Subtle):

Use layered shadows for depth: box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba();
Add color to shadows from accent palette
Consider drop-shadow filter for non-rectangular elements
Shadows should be visible and intentional, not barely perceptible

Layered Transparencies:

Stack elements with rgba() or hsla() backgrounds
Use backdrop-filter: blur() sparingly (performance cost)
Create depth through overlapping translucent layers

Grain/Noise Texture:

Apply via ::before or ::after pseudo-element
Use SVG noise filter or tiny repeating PNG
Set opacity: 0.03-0.08 for subtle texture
Use pointer-events: none to not interfere with interactions

Custom Cursors:

Change cursor for interactive regions: cursor: pointer
Consider custom cursor images for brand differentiation
Use cursor: grab / cursor: grabbing for draggable elements
Always provide fallback: cursor: url(custom.cur), pointer;

User Experience Patterns

Core UX Principles:

Direct Manipulation
- Users interact directly with content, not through abstract controls
- Examples:
  - Drag & drop to reorder items (not up/down buttons)
  - Inline editing (click to edit, not separate form)
  - Sliders for ranges (not numeric input with +/-)
  - Pinch/zoom gestures on mobile (not +/- buttons)
Immediate Feedback
- Every interaction provides instantaneous visual feedback (within 100ms)
- Types of feedback:
  - Visual: Button pressed state, hover effects, color changes
  - Haptic: Vibration on mobile (submit, error, success)
  - Audio: Subtle sounds for critical actions (optional, user-controlled)
  - Loading: Skeleton screens, spinners for >300ms operations
  - Success: Checkmarks, green highlights, toast notifications
  - Error: Red highlights, inline error messages, shake animations
Consistent Behavior
- Similar-looking elements behave similarly
- Examples:
  - Visual consistency: All primary buttons have same colors, sizes, hover states
  - Behavioral consistency: All modals close via X button, ESC key, and outside click
  - Interaction consistency: All drag targets have same hover state and drop feedback
  - Pattern consistency: All forms validate on blur and submit
Forgiveness
- Make errors difficult, but recovery easy
- Prevention strategies:
  - Disable invalid actions (grey out unavailable buttons)
  - Validate inputs inline (before submission)
  - Confirm destructive actions (delete, overwrite)
  - Auto-save in background (drafts, progress)
- Recovery strategies:
  - Undo/redo for all state changes
  - Soft deletes (trash/archive before permanent delete)
  - Clear error messages with actionable fixes
  - Preserve user input on errors (don't clear forms)
Progressive Disclosure
- Reveal details as needed rather than overwhelming users
- Levels of disclosure:
  - Summary: Show essential info by default (card title, price, rating)
  - Details: Expand to show more info (description, specs, reviews)
  - Advanced: Hide complex options behind "Advanced settings" toggle
- Examples:
  - Accordion: Start collapsed, expand on click
  - Search filters: Show 3-5 common filters, hide rest behind "More filters"
  - Settings: Basic settings visible, advanced behind "Show advanced"

Modern UX Patterns:

Conversational Interfaces

Prioritize natural language interaction where appropriate:

Four types:
- Pure chat: Full conversation (AI assistants, support bots)
- Command palette: Text-based shortcuts (Cmd+K, search everywhere)
- Smart search: Natural language queries (search "meetings next week" vs filtering)
- Form alternatives: Conversational data collection ("What's your name?" vs form fields)
When to use:
- Complex searches with multiple variables
- Task guidance (wizards, onboarding)
- Contextual help
- Quick actions (command palette)
When NOT to use:
- Simple forms (just use inputs)
- Precise control interfaces (design tools, dashboards)
- High-frequency repetitive tasks
Adaptive Layouts

Respond to user context automatically:
- Time-based: Dark mode at night, light during day
- Device-based: Simplified UI on mobile, full features on desktop
- Connection-based: Reduce images/video on slow connections
- Usage-based: Prioritize frequent actions, hide rarely-used features
Examples:
- Auto dark/light mode based on time or system preference
- Simplified mobile navigation (hamburger menu) vs full desktop nav
- Collapsed sidebar on small screens, expanded on large
Bold Visual Expression

Aesthetic flexibility based on chosen direction:
- Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
- Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
- NO glass morphism effects (this is the one banned technique)
- NO Apple design mimicry (find your own voice)
- Focus on typography, color, spacing, AND visual effects to create hierarchy
- Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting

Navigation:

Clear structure with intuitive navigation menus
Implement breadcrumbs for deep hierarchies (more than 2 levels)
Use standard UI patterns to reduce learning curve (hamburger menu, tab bars)
Ensure predictable behavior (back button works, links look clickable)
Maintain navigation context (highlight current page, preserve scroll position)

Styling Implementation

Component Library & Tools

Component Library:

Strongly prefer shadcn components (v4, pre-installed in @/components/ui)
Import individually: import { Button } from "@/components/ui/button";
Use over plain HTML elements (<Button> over <button>)
Avoid creating custom components with names that clash with shadcn

Styling Engine:

Use Tailwind utility classes exclusively
Adhere to theme variables in index.css via CSS custom properties
Map variables in @theme (see tailwind.config.js)
Use inline styles or CSS modules only when absolutely necessary

Icons:

Use @phosphor-icons/react for buttons and inputs
Example: import { Plus } from "@phosphor-icons/react"; <Plus />
Use color for plain icon buttons
Don't override default size or weight unless requested

Notifications:

Use sonner for toasts
Example: import { toast } from 'sonner'

Loading States:

Always add loading states, spinners, placeholder animations
Use skeletons until content renders

Layout Implementation

Spacing Strategy:

Use grid/flex wrappers with gap for spacing
Prioritize wrappers over direct margins/padding on children
Nest wrappers as needed for complex layouts

Conditional Styling:

Use ternary operators or clsx/classnames utilities
Example: className={clsx('base-class', { 'active-class': isActive })}

Responsive Design

Fluid Layouts:

Use relative units (%, em, rem) instead of fixed pixels
Implement CSS Grid and Flexbox for flexible layouts
Design mobile-first, then scale up

Media Queries:

Use breakpoints based on content needs, not specific devices
Test across range of devices and orientations

Touch Targets:

Minimum 44x44 pixels for interactive elements
Provide adequate spacing between touch targets
Addhover states for desktop, focus states for touch/keyboard

Performance:

Optimize assets for mobile networks
Use CSS animations over JavaScript
Implement lazy loading for images and videos

Accessibility Standards

Core Requirements:

Follow WCAG 2.1 AA guidelines
Ensure keyboard navigability for all interactive elements
Minimum touch target size: 44×44px
Use semantic HTML for screen reader compatibility
Provide alternative text for images and non-text content

Implementation Details:

Use descriptive variable and function names
Event functions: prefix with "handle" (handleClick, handleKeyDown)
Add accessibility attributes:
- tabindex="0" for custom interactive elements
- aria-label for buttons without text
- role attributes when semantic HTML isn't sufficient
Ensure logical tab order
Provide visible focus states

Design Process & Testing

Design Workflow

Understand Context:
- What problem are we solving?
- Who are the users and when will they use this?
- What are the success criteria?
Explore Options:
- Present 2-3 alternative approaches
- Explain trade-offs of each option
- Ask which direction resonates
Implement Iteratively:
- Start with structure and hierarchy
- Add visual polish progressively
- Test at each stage
Validate:
- Use playwright MCP to test visual changes
- Check across different screen sizes
- Verify accessibility

Testing Checklist

Visual Testing:

Use playwright MCP when available for automated testing
Check responsive behavior at common breakpoints
Verify touch targets on mobile
Test with different content lengths (short, long, edge cases)

Accessibility Testing:

Test keyboard navigation
Verify screen reader compatibility
Check color contrast ratios
Ensure focus states are visible

Cross-Device Testing:

Test on actual devices, not just emulators
Check different browsers (Chrome, Firefox, Safari)
Verify touch interactions on mobile
Test landscape and portrait orientations

Examples

Example 1: Designing a Button

Initial Question to Ask:

Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)

After Getting Approval, Implementation:

import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";

<Button
  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
  Get Started
  <ArrowRight className="ml-2" />
</Button>

Example 2: Typography Hierarchy

Question First:

For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading

Should we go bold and contemporary, or subtle and refined?

Implementation After Approval:

<div className="space-y-4">
  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
    Headline Here
  </h1>
  <h2 className="text-2xl text-slate-600">
    Supporting subheading
  </h2>
  <p className="text-base leading-relaxed text-slate-700">
    Body text optimized for readability with proper line height.
  </p>
</div>

Example 3: Unique Color Palette Suggestion

Presenting Options:

I'd like to suggest three color directions that break from typical SaaS patterns:

1. **Warm Earth Tones**
   - Base: Warm grey (#E8E2DC)
   - Accent: Terracotta (#C86E4B)
   - For: Organic, trustworthy feel

2. **Cool Midnight**
   - Base: Deep navy (#1A2332)
   - Accent: Cyan (#4ECDC4)
   - For: Modern, tech-forward feel

3. **Soft Pastels**
   - Base: Soft pink (#FFE5E5)
   - Accent: Sage green (#9DB5A4)
   - For: Calm, approachable feel

Which direction feels right for your brand?

Common Patterns to Avoid

❌ NEVER:

Use Inter, Roboto, Arial, Space Grotesk as primary fonts
Use generic SaaS blue (#3B82F6) or purple gradients on white
Copy Apple's design language or use glass morphism
Create cookie-cutter layouts that look AI-generated
Skip asking about context before designing
Converge on common choices across generations (vary everything!)
Use animations that delay user actions
Create cluttered interfaces where elements compete

✅ ALWAYS:

Ask about purpose, tone, constraints, differentiation FIRST
Then commit BOLDLY to a distinctive aesthetic direction
Use unexpected, characterful typography choices
Create atmosphere: shadows, gradients, textures, grain (when intentional)
Dominant colors with sharp accents (not timid, evenly-distributed palettes)
Provide immediate feedback for interactions
Test with real devices
Validate accessibility (it enables creativity, not limits it)

When to Break the Rules

Guidelines exist to prevent mediocrity, not to limit excellence. Break them when:

Context demands it:

Client brand already uses Inter? Use it brilliantly, don't force alternatives
Glass morphism IS the aesthetic? Commit fully, don't half-execute
The brief calls for Apple-like refinement? Study and exceed, don't avoid

You have a stronger idea:

A "banned" pattern executed with intention beats a "safe" pattern executed without conviction
If you can articulate WHY you're breaking a rule, break it
Mediocre rule-following < bold rule-breaking with purpose

The unexpected is the point:

Intentional dissonance (clashing fonts, jarring colors) can be powerful
"Ugly" design is a legitimate aesthetic choice when deliberate
Comfort is the enemy of memorable

Rule-breaking checklist:

Can you explain the creative intent?
Is it a conscious choice, not laziness?
Does it serve the user/brand/context?
Would a senior designer defend this choice?

If yes to all → break the rule confidently.

References

Progressive Disclosure Files:

ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline)
MOTION-SPEC.md - Animation timing and easing
RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns

bencium-impact-designer