| name | ui-design |
| description | Expert UI design and visual design guidance for design systems, typography, color theory, layout, spacing, iconography, and component visual design. Use when designing interfaces, creating visual hierarchies, choosing colors, defining typography scales, creating design tokens, working with Figma, or building cohesive visual systems. Includes brand application and design-to-dev handoff. |
UI Design Expert
Core UI Design Principles
When designing user interfaces, always follow these principles:
- Visual Hierarchy: Guide attention through size, weight, color, contrast
- Consistency: Use systematic patterns for predictability
- White Space: Breathing room improves comprehension
- Contrast: Ensure readability and focus
- Alignment: Create order and visual connections
- Repetition: Reinforce brand and structure
Design System Foundation
Design Tokens (Variables)
Purpose: Single source of truth for design decisions
Token Categories:
--color-primary: #0066cc;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-warning: #ffc107;
--color-danger: #dc3545;
--color-text: #212529;
--color-background: #ffffff;
--space-2: 0.125rem;
--space-4: 0.25rem;
--space-8: 0.5rem;
--space-12: 0.75rem;
--space-16: 1rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-48: 3rem;
--space-64: 4rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.5rem;
--font-size-4xl: 3rem;
--font-size-display: clamp(5rem, 10vw + 3rem, 8rem);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
Color System
Color Theory for UI
60-30-10 Rule:
- 60%: Dominant color (backgrounds, large areas)
- 30%: Secondary color (sections, panels)
- 10%: Accent color (CTAs, highlights)
Semantic Color Palette
Primary (Brand):
├── primary-50: #e6f2ff (lightest - backgrounds)
├── primary-100: #b3d9ff
├── primary-200: #80c0ff
├── primary-300: #4da7ff
├── primary-400: #1a8eff
├── primary-500: #0066cc ← Base
├── primary-600: #0052a3
├── primary-700: #003d7a
├── primary-800: #002952
└── primary-900: #001429 (darkest - text on light bg)
Success (Green):
├── Positive actions
├── Confirmation states
└── Valid inputs
Warning (Yellow/Orange):
├── Caution states
├── Important notices
└── Pending actions
Danger (Red):
├── Destructive actions
├── Error states
└── Invalid inputs
Neutral (Gray):
├── Text hierarchy
├── Borders
└── Disabled states
Color Accessibility (WCAG)
Contrast Ratios:
- AA Standard: 4.5:1 for normal text, 3:1 for large text (18px+)
- AAA Enhanced: 7:1 for normal text, 4.5:1 for large text
Test Colors:
https://webaim.org/resources/contrastchecker/
npm install wcag-color
Example:
✅ PASS: #0066cc text on #ffffff background (7.5:1)
❌ FAIL: #80c0ff text on #ffffff background (2.1:1)
Dark Mode Strategy
Approach: Invert semantic colors, not direct colors
:root {
--color-background: #ffffff;
--color-surface: #f8f9fa;
--color-text: #212529;
--color-text-secondary: #6c757d;
--color-border: #dee2e6;
}
[data-theme="dark"] {
--color-background: #1a1a1a;
--color-surface: #2d2d2d;
--color-text: #f8f9fa;
--color-text-secondary: #adb5bd;
--color-border: #495057;
--color-primary: #4da7ff;
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}
Typography
Type Scale (Modular Scale)
Formula: base × ratio^n
Common Ratios:
- 1.125 (Major Second): Subtle, dense
- 1.25 (Major Third): Balanced ← Recommended
- 1.333 (Perfect Fourth): Dynamic
- 1.5 (Perfect Fifth): Dramatic
Digitaltableteur Scale (1.25 ratio):
Display: 80-128px (clamp)
H1: 48px
H2: 40px
H3: 32px
H4: 24px
H5: 20px
Body: 16px
Small: 14px
Caption: 12px
Font Pairing
Recommended Combinations:
-
Serif + Sans-Serif (Classic)
- Headings: Playfair Display (serif)
- Body: Inter (sans-serif)
-
Geometric + Humanist (Modern)
- Headings: Montserrat (geometric)
- Body: Open Sans (humanist)
-
Monospace + Sans (Technical)
- Code: Fira Code (monospace)
- UI: Roboto (sans-serif)
Digitaltableteur Stack:
--font-title: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Fira Code', 'Courier New', monospace;
Typographic Hierarchy
.display {
font-size: var(--font-size-display);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
letter-spacing: -0.02em;
}
h1 {
font-size: var(--font-size-4xl);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
}
h2 {
font-size: var(--font-size-3xl);
line-height: var(--line-height-normal);
font-weight: var(--font-weight-semibold);
}
p {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
font-weight: var(--font-weight-normal);
max-width: 65ch;
}
small {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text-secondary);
}
Readability Guidelines
- Line Length: 45-75 characters (optimal: 65ch)
- Line Height: 1.5× font size for body text
- Paragraph Spacing: 1.5× line height
- Letter Spacing: -0.02em for large text, 0em for body
Layout & Spacing
Grid System
12-Column Grid (flexible):
.container {
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--space-16);
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-24);
}
.col-4 {
grid-column: span 4;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
.col-4 {
grid-column: span 1;
}
}
Spacing System (8px Base)
Concept: All spacing uses multiples of 8px for visual consistency
2px: Micro (icon padding)
4px: Tiny (inline spacing)
8px: Small (tight elements)
12px: Compact (related items)
16px: Base (default spacing)
24px: Medium (section padding)
32px: Large (cards, panels)
48px: XL (major sections)
64px: XXL (hero sections)
Application:
.card {
padding: var(--space-24);
}
.card + .card {
margin-block-start: var(--space-16);
}
.section {
padding-block: var(--space-64);
}
Whitespace Principles
Law of Proximity: Related items closer, unrelated farther
Bad Example:
┌─────────────┐
│ Title │ ← 8px gap
│ Subtitle │ ← 8px gap
│ Author │ ← 8px gap (too uniform)
│ Date │
└─────────────┘
Good Example:
┌─────────────┐
│ Title │ ← 4px gap (related)
│ Subtitle │ ← 24px gap (separate group)
│ Author │ ← 4px gap (related)
│ Date │
└─────────────┘
Component Visual Design
Button Anatomy
┌────────────────────────────┐
│ [Icon] Label [Icon] │ ← Text: 14-16px, weight: 500-600
│ ↑ ↑ ↑ │
│ 8px 12px 8px │ ← Spacing
└────────────────────────────┘
↑ ↑
12px padding 12px padding
Height: 40-48px (min 44px for touch)
Border-radius: 8px
Button Hierarchy:
.btn-primary {
background-color: var(--color-primary);
color: white;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background-color: var(--color-primary-600);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-secondary {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-tertiary {
background-color: transparent;
color: var(--color-primary);
text-decoration: underline;
}
Card Design
.card {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-24);
box-shadow: var(--shadow-md);
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.02);
box-shadow: var(--shadow-xl);
}
.card-header {
margin-block-end: var(--space-16);
}
.card-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
.card-content {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
}
.card-footer {
margin-block-start: var(--space-24);
padding-block-start: var(--space-16);
border-block-start: 1px solid var(--color-border);
}
Form Input Design
.input {
min-height: 48px;
padding: 12px 16px;
font-size: var(--font-size-base);
line-height: 1.5;
background-color: var(--color-background);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
transition: all 0.2s ease;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}
.input:invalid {
border-color: var(--color-danger);
}
.input:disabled {
background-color: var(--color-surface);
color: var(--color-text-secondary);
cursor: not-allowed;
}
.label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-block-end: var(--space-8);
}
.help-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-block-start: var(--space-4);
}
.error-message {
font-size: var(--font-size-sm);
color: var(--color-danger);
margin-block-start: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-4);
}
Iconography
Icon System Guidelines
Size Scale:
16px: Inline with text
20px: Buttons, inputs
24px: Navigation, cards
32px: Feature highlights
48px: Empty states, placeholders
Style:
- Stroke width: 2px (consistent across set)
- Corner radius: 2px (rounded, friendly)
- Grid: 24×24px with 2px padding
Usage:
import { MagnifyingGlass, User, XCircle } from '@phosphor-icons/react';
<MagnifyingGlass />
<MagnifyingGlass size={32} weight="bold" />
<User color="var(--color-primary)" />
Accessibility:
<MagnifyingGlass aria-hidden="true" />
<button aria-label="Search">
<MagnifyingGlass />
</button>
Animation & Motion
Animation Principles
- Purposeful: Motion guides attention or provides feedback
- Subtle: Enhance, don't distract (200-400ms)
- Natural: Use easing curves, not linear
- Respectful: Honor
prefers-reduced-motion
Easing Functions
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
.button {
transition: transform 0.3s var(--ease-standard);
}
.button:hover {
transform: scale(1.05);
}
Common Animations
Fade In:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 0.3s var(--ease-standard);
}
Slide Up:
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.4s var(--ease-decelerate);
}
Gradient Flow (Digitaltableteur):
@keyframes gradient-move {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.gradient-text {
background: linear-gradient(120deg, #667eea, #764ba2, #f093fb);
background-size: 200% 200%;
animation: gradient-move 4s ease-in-out infinite;
background-clip: text;
-webkit-text-fill-color: transparent;
}
Reduced Motion
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Responsive Design
Breakpoints
.container {
padding: var(--space-16);
}
@media (min-width: 768px) {
.container {
padding: var(--space-24);
}
}
@media (min-width: 1024px) {
.container {
padding: var(--space-32);
max-width: 1200px;
}
}
@media (min-width: 1440px) {
.container {
max-width: 1400px;
}
}
Fluid Typography
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
p {
font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
}
Design-to-Dev Handoff (Figma)
Figma Best Practices
Layer Naming:
✅ Good: button-primary-large
❌ Bad: Rectangle 23
Component Organization:
Components/
├── Foundations/
│ ├── Colors
│ ├── Typography
│ └── Spacing
├── Atoms/
│ ├── Button
│ ├── Input
│ └── Icon
├── Molecules/
│ ├── Card
│ └── Form Field
└── Organisms/
├── Header
└── Footer
Auto Layout (Flexbox equivalent):
- Use for all components
- Set spacing, padding explicitly
- Configure resizing behavior
Variants (Component states):
Button:
├── Variant: Primary, Secondary, Tertiary
├── Size: Small, Medium, Large
├── State: Default, Hover, Active, Disabled
└── Icon: Left, Right, None
Handoff Checklist
Visual Hierarchy Techniques
Size & Scale
Largest: Display Headlines (guide attention immediately)
↓
Large: Page Titles (establish context)
↓
Medium: Section Headings (organize content)
↓
Base: Body Text (readable, comfortable)
↓
Small: Captions, Meta (supporting info)
Weight & Contrast
Boldest: CTAs, Primary Actions (demand action)
↓
Bold: Headings (structure)
↓
Semibold: Subheadings, Labels (clarity)
↓
Regular: Body (readability)
↓
Light: De-emphasized Text (background info)
Color Emphasis
High Contrast: Black on White (critical info)
Medium Contrast: Gray on White (secondary info)
Low Contrast: Light Gray on White (tertiary info)
Accent Color: Brand Color (CTAs, highlights)
Brand Application (Digitaltableteur)
Brand Colors
--accent-pink: #ff006e;
--accent-purple: #8338ec;
--accent-cyan: #00d9ff;
--accent-teal: #06ffa5;
--accent-yellow: #ffbe0b;
--accent-violet: #7209b7;
--home-gradient: linear-gradient(120deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
Section Accent Pattern
<section className={styles.sectionAccentPink}>
{}
</section>
<section className={styles.sectionAccentCyan}>
{/* Content */}
</section>
<section className={styles.sectionAccentYellow}>
{/* Content */}
</section>
Gradient Text (CTAs)
.gradientText {
background: var(--home-gradient);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-move 4s ease-in-out infinite;
}
Micro-Interactions (Visual Feedback)
Button States
.button {
background-color: var(--color-primary);
transform: scale(1);
transition: all 0.2s ease;
}
.button:hover {
background-color: var(--color-primary-600);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
.button:active {
transform: scale(0.98);
box-shadow: var(--shadow-sm);
}
.button:focus-visible {
outline: 4px solid rgba(0, 102, 204, 0.3);
outline-offset: 2px;
}
.button:disabled {
background-color: var(--color-surface);
color: var(--color-text-secondary);
cursor: not-allowed;
transform: scale(1);
}
Loading States
<div className={styles.skeleton} />
.skeleton {
background: linear-gradient(
90deg,
var(--color-surface) 0%,
var(--color-border) 50%,
var(--color-surface) 100%
);
background-size: 200% 100%;
animation: loading 1.5s ease-in-out infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
When to Use This Skill
Activate this skill when:
- Designing UI components or patterns
- Creating design systems or style guides
- Choosing colors, typography, or spacing
- Building visual hierarchies
- Designing for accessibility (color contrast)
- Creating design tokens or CSS variables
- Working with Figma or design tools
- Defining animation and motion
- Designing responsive layouts
- Creating brand application guidelines
- Designing micro-interactions
- Conducting design QA or reviews
- Handing off designs to developers
Remember: Consistency and accessibility are non-negotiable. Always test designs with real users and assistive technologies.
