tomevault-io Advanced UI Design
Create agency-grade interfaces using the BEAUTIFUL → RIGHT → SATISFYING → PEAK framework. This skill elevates designs from functional to exceptional through systematic aesthetic principles.
Purpose
Transform ordinary interfaces into memorable experiences by applying:
- Systematic aesthetic evaluation framework
- Color theory and emotional design
- Typography hierarchy mastery
- Micro-interaction excellence
- Visual rhythm and spacing systems
The BRSP Framework
BEAUTIFUL (Visual Appeal)
CHECKLIST: First Impression (< 3 seconds)
==========================================
□ Color palette evokes intended emotion
□ Typography is readable and elegant
□ Whitespace feels intentional, not empty
□ Visual hierarchy guides the eye
□ Images/illustrations are high quality
□ No visual clutter or competing elements
SCORING:
- Does it make users want to explore more?
- Would users screenshot and share it?
- Does it feel premium/trustworthy?
RIGHT (Functional Correctness)
CHECKLIST: Does It Work?
========================
□ All interactive elements are obvious
□ Forms validate and provide feedback
□ Loading states are clear
□ Error states are helpful
□ Navigation is intuitive
□ Responsive across devices
□ Accessibility standards met (WCAG 2.1)
SCORING:
- Can a new user complete core tasks?
- Are there any "where do I click?" moments?
- Does it work for all users?
SATISFYING (Emotional Response)
CHECKLIST: How Does It Feel?
============================
□ Interactions provide immediate feedback
□ Animations are smooth and purposeful
□ Success states celebrate the user
□ Transitions feel natural
□ Sounds (if any) enhance experience
□ Progress indicators reduce anxiety
SCORING:
- Do users smile when using it?
- Would they use it again?
- Does it reduce cognitive load?
PEAK (Memorable Excellence)
CHECKLIST: What Makes It Exceptional?
=====================================
□ Unique design elements (signature)
□ Delightful surprises (easter eggs)
□ Storytelling through design
□ Emotional connection established
□ Brand personality shines through
□ Sets new standard in category
SCORING:
- Will users remember this in 6 months?
- Will they tell others about it?
- Does it define the brand?
Features
1. Color System Design
/* Primary color with semantic variations */
:root {
/* Base palette */
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-500: #3b82f6;
--primary-600: #2563eb;
--primary-900: #1e3a8a;
/* Semantic colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
/* Neutral scale */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-500: #6b7280;
--gray-900: #111827;
/* Surface colors */
--surface-primary: var(--gray-50);
--surface-elevated: white;
--surface-overlay: rgba(0, 0, 0, 0.5);
}
/* Color usage rules:
- Primary: CTAs, links, active states
- Gray: Text, borders, backgrounds
- Semantic: Feedback and status only
- Limit: 3 colors + neutrals per view
*/
2. Typography Hierarchy
/* Type scale based on 1.25 ratio */
:root {
--text-xs: 0.75rem; /* 12px - Labels, captions */
--text-sm: 0.875rem; /* 14px - Secondary text */
--text-base: 1rem; /* 16px - Body text */
--text-lg: 1.125rem; /* 18px - Lead paragraphs */
--text-xl: 1.25rem; /* 20px - Section headers */
--text-2xl: 1.5rem; /* 24px - Card titles */
--text-3xl: 1.875rem; /* 30px - Page titles */
--text-4xl: 2.25rem; /* 36px - Hero headlines */
--text-5xl: 3rem; /* 48px - Display text */
}
/* Font weight usage */
.heading { font-weight: 600; } /* Semibold for headings */
.body { font-weight: 400; } /* Regular for body */
.emphasis { font-weight: 500; } /* Medium for emphasis */
/* Line height rules */
.heading { line-height: 1.2; } /* Tight for headings */
.body { line-height: 1.6; } /* Relaxed for body */
3. Spacing System (8-Point Grid)
/* Spacing scale */
:root {
--space-1: 0.25rem; /* 4px - Tight spacing */
--space-2: 0.5rem; /* 8px - Related elements */
--space-3: 0.75rem; /* 12px - Form gaps */
--space-4: 1rem; /* 16px - Standard gap */
--space-6: 1.5rem; /* 24px - Section padding */
--space-8: 2rem; /* 32px - Card padding */
--space-12: 3rem; /* 48px - Section margins */
--space-16: 4rem; /* 64px - Page sections */
--space-24: 6rem; /* 96px - Hero spacing */
}
/* Usage patterns:
- space-1: Icon padding, badge spacing
- space-2: Input padding, button gaps
- space-4: Card content gaps
- space-8: Section internal padding
- space-16: Between major sections
*/
4. Micro-Interaction Library
/* Button hover effect */
.btn {
transition: all 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn:active {
transform: translateY(0);
}
/* Card hover effect */
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
/* Focus ring for accessibility */
.interactive:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
/* Loading skeleton pulse */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.skeleton {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
5. Emotional Design Patterns
// Success celebration
const SuccessState = () => (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ type: "spring", stiffness: 200 }}
>
<CheckCircle className="text-green-500 w-16 h-16" />
<h2>Payment Successful!</h2>
<Confetti /> {/* Subtle celebration */}
</motion.div>
);
// Empty state with personality
const EmptyState = () => (
<div className="text-center py-12">
<Illustration name="empty-inbox" />
<h3>No messages yet</h3>
<p className="text-gray-500">
When you receive messages, they'll show up here.
<br />
<span className="text-sm">
Pro tip: Say hi to someone! 👋
</span>
</p>
</div>
);
Use Cases
Landing Page Design
BRSP Assessment:
BEAUTIFUL (8/10):
✓ Hero gradient creates visual interest
✓ Clean typography hierarchy
✓ High-quality product screenshots
△ Could use more whitespace in features section
RIGHT (9/10):
✓ Clear CTA above the fold
✓ Mobile responsive
✓ Fast load time (1.2s)
✓ Accessibility checked
△ Social proof could be more prominent
SATISFYING (7/10):
✓ Smooth scroll animations
✓ Interactive pricing toggle
△ Could add micro-interactions to cards
△ Success state for signup needs work
PEAK (6/10):
✓ Memorable hero illustration
△ Missing brand signature element
△ No delightful surprises
△ Feels similar to competitors
PRIORITY IMPROVEMENTS:
1. Add signature animation to hero
2. Create memorable loading state
3. Add personality to empty states
Dashboard Design
// Dashboard with BRSP principles
export function Dashboard() {
return (
<div className="min-h-screen bg-gray-50">
{/* BEAUTIFUL: Clean header with visual hierarchy */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<h1 className="text-2xl font-semibold text-gray-900">
Good morning, Sarah 👋
</h1>
<p className="text-gray-500 mt-1">
Here's what's happening today
</p>
</header>
{/* RIGHT: Clear information architecture */}
<main className="p-6 grid grid-cols-12 gap-6">
{/* Key metrics - immediate visibility */}
<MetricCards className="col-span-12" />
{/* Primary content area */}
<ActivityFeed className="col-span-8" />
{/* Secondary information */}
<Sidebar className="col-span-4" />
</main>
{/* SATISFYING: Helpful feedback */}
<Toast
type="success"
message="Report exported successfully"
action={{ label: "View", onClick: viewReport }}
/>
{/* PEAK: Delightful detail */}
<AchievementBadge
title="First Week Complete!"
description="You've been using the app for 7 days"
/>
</div>
);
}
E-commerce Product Page
DESIGN SPECIFICATIONS:
LAYOUT:
┌─────────────────────────────────────────┐
│ ┌─────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ IMAGE │ │
│ │ GALLERY│ $149.00 $199.00 │
│ │ │ │
│ └─────────┘ [Select Size ▾] │
│ [Add to Cart] [♡] │
│ ─────────────── │
│ 📦 Free shipping │
│ ↩️ 30-day returns │
└─────────────────────────────────────────┘
INTERACTIONS:
- Image gallery: Swipe + zoom on mobile
- Size selector: Visual size guide
- Add to cart: Satisfying animation + haptic
- Wishlist: Heart fills with animation
TRUST SIGNALS:
- Verified purchase badges on reviews
- "12 people viewing now" social proof
- Security badges at checkout
Best Practices
Do's
- Start with content - Design around real content, not lorem ipsum
- Use 8-point grid - Consistent spacing creates harmony
- Limit color palette - 3 colors + neutrals maximum
- Test with real users - Assumptions fail, testing wins
- Document decisions - Future you will thank present you
Don'ts
- Don't use more than 2 font families
- Don't ignore accessibility (contrast, focus states)
- Don't overload with animations
- Don't design for yourself - design for users
- Don't skip mobile-first approach
Design Checklist
Before shipping, verify:
Visual Polish:
□ Consistent spacing throughout
□ Proper text hierarchy
□ Color contrast passes WCAG AA
□ Images optimized and responsive
□ Icons consistent in style/weight
Interaction Quality:
□ All hover states defined
□ Focus states visible
□ Loading states designed
□ Error states helpful
□ Success states celebratory
Responsiveness:
□ Mobile layout tested
□ Tablet breakpoint checked
□ Large screen utilizes space
□ Touch targets 44px minimum
□ No horizontal scroll
Related Skills
- frontend-design - Foundation for design implementation
- tailwindcss - Utility classes for rapid styling
- shadcn-ui - Pre-built accessible components
- accessibility - WCAG compliance requirements
- responsive - Mobile-first design patterns
Reference Resources
- Laws of UX - Psychology principles
- Refactoring UI - Practical design tips
- Design Systems - System thinking
- Dribbble - Visual inspiration
- Mobbin - Mobile pattern library
Converted and distributed by TomeVault — claim your Tome and manage your conversions.