Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.

UX Designer Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible. Core Philosophy CRITICAL: Design Decision Protocol ALWAYS ASK before making any design decisions (colors, fonts, sizes, layouts) Never implement design changes until explicitly instructed The guidelines below are practical guidance for when design decisions are approved Present alternatives and trade offs, not single "correct" solutions Foundational Design Principles Stand Out From Generic Patterns Avoid Generic Training Dataset Patterns: Don't default to "Claude style" designs (excessive bauhaus, liquid glass, apple like) Don't use generic SaaS aesthetics that look machine generated Don't rely only on solid colors suggest photography, patterns, textures Think beyond typical patterns you can step off the written path Draw Inspiration From: Modern landing pages (Perplexity, Comet Browser, Dia Browser) Framer templates and their innovative approaches Leading brand design studios Historical design movements (Bauhaus, Otl Aicher, Braun) but as inspiration, not imitation 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 Core Design Philosophy 1. Simplicity Through Reduction Identify the essential purpose and eliminate distractions Begin with complexity, then deliberately remove until reaching the simplest effective solution Every element must justify its existence 2. Material Honesty Digital materials have unique properties embrace them Buttons should communicate affordance through color, spacing, and typography (not shadows) Cards use borders and background differentiation (not depth effects) Animations follow real world physics principles adapted to digital responsiveness Examples: Clickable: Use distinct colors, hover state changes, cursor feedback Containers: Use subtle borders (1px), background color shifts, or generous padding Hierarchy: Use scale, weight, and spacing rather than elevation 3. Functional Layering (Not Visual Depth) Create hierarchy through typography scale, color contrast, and spatial relationships Layer information conceptually (primary → secondary → tertiary) Reject skeuomorphic shadows/gradients that imitate physical depth Embrace functional depth: modals over content, dropdowns over UI 4. 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 5. Coherent Design Language Every element should visually communicate its function Elements should feel part of a unified system Nothing should feel arbitrary 6. 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 (personality over pure legibility) Body/UI: Functional, highly legible (clarity over expression) 2 3 typefaces maximum Clear mathematical scale (e.g., 1.25x between sizes) Animation: Purposeful: Guides attention, establishes relationships, provides feedback Subtle: Felt rather than seen (100 300ms for most interactions) 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: 1. Purpose : Does every element serve a clear function? 2. Hierarchy : Is visual importance aligned with content importance? 3. Consistency : Do similar elements look and behave similarly? 4. Accessibility : Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav) 5. Responsiveness : Does it work on mobile, tablet, desktop? 6. Uniqueness : Does this break from generic SaaS patterns? 7. 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, see DESIGN SYSTEM TEMPLATE.md (meta framework, project templates, decision trees). Visual Design Standards Color & Contrast Color System Architecture: Every interface needs two color roles: 1. 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 2. 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: 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: Avoid default SaaS blue ( 3B82F6) unless it fits your brand Consider unexpected neutrals: warm greys, soft off whites, deep charcoals Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate Test combinations against "does this look AI generated?" filter 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 Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700) Prefer variable fonts for fine tuned control and performance Font Version Usage: Display version : Headlines and hero text only Text version : Paragraphs and long form content Caption/Micro : Small UI labels (1 2 lines, non critical info) Recommended Sources: Google Fonts for web (free, well optimized, reliable) System fonts for performance critical apps ( apple system, BlinkMacSystemFont, Segoe UI) Choose fonts that serve your brand's purpose (not "trending" lists) 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) : 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: 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 & Animation Purposeful Animation: Every animation must serve a functional purpose: Orient users : Smooth transitions during navigation changes Establish relationships : Show how elements connect (expand from source, slide between states) Provide feedback : Confirm interactions (button press, form submission) Guide attention : Direct focus to important changes (new messages, errors) Animation & Gestalt Principles: Motion should reinforce visual relationships: Proximity : Elements near each other move together (grouped cards animating) Simi

bencium-controlled-ux-designer