Ui Ux Master

• Works for everyone, regardless of ability
• Keyboard navigable
• Screen reader friendly
• High contrast options available

Platform-Specific Design

Apple Platforms (iOS, macOS, watchOS, tvOS, visionOS)

For complete Apple HIG patterns, see references/apple-platforms.md

Key Apple Principles:

• Clarity: Legible text, precise icons, subtle adornments
• Deference: Content-first, UI stays out of the way
• Depth: Visual layers, realistic motion, spatial awareness

When to use: Native iOS, macOS, watchOS, tvOS, or visionOS apps

Modern Web Design

For complete web design patterns, see references/web-design.md

Key Web Principles:

• Responsive: Mobile-first, adapts to all screens
• Performant: Fast load times, optimized assets
• Progressive: Works everywhere, enhanced where possible
• Semantic: Proper HTML structure, accessible markup

When to use: Websites, web apps, PWAs, landing pages, dashboards

Design Systems

Color Theory

Modern Color Systems:

• oklch() color space (perceptually uniform, modern)
• HSL for quick adjustments
• RGB/Hex for legacy compatibility

Semantic Colors:

/* Light/Dark mode compatible */
--primary: oklch(0.649 0.237 267);
--secondary: oklch(0.556 0 0);
--background: oklch(0.145 0 0); /* dark */
--foreground: oklch(0.985 0 0); /* light text */
--muted: oklch(0.556 0 0 / 0.5);
--border: oklch(0.922 0 0 / 0.15);

Avoid:

• Generic bootstrap blue (#007bff) - dated
• Pure black (#000000) - use dark grays
• Low contrast text (<4.5:1 ratio)

Color Guidelines: See references/color-systems.md for palettes, contrast ratios, and color psychology

Typography

System Fonts (Recommended):

• Apple: SF Pro (iOS/macOS), SF Compact (watchOS)
• Web: Inter, Outfit, DM Sans, Plus Jakarta Sans
• Monospace: JetBrains Mono, Fira Code, Geist Mono
• Fallback: -apple-system, system-ui, sans-serif

Type Scale:

Display: 72px / 4.5rem
Heading 1: 48px / 3rem
Heading 2: 36px / 2.25rem
Heading 3: 24px / 1.5rem
Body: 16px / 1rem
Small: 14px / 0.875rem
Caption: 12px / 0.75rem

Line Height:

• Headings: 1.2 - 1.3
• Body: 1.5 - 1.6
• Small text: 1.4 - 1.5

Font Pairing: See references/typography.md for pairing rules and examples

Spacing & Layout

8-Point Grid System:

• Base unit: 8px (0.5rem)
• Spacing scale: 8, 16, 24, 32, 40, 48, 56, 64, 80, 96
• Use multiples of 4px for fine-tuning (4, 12, 20, 28, etc.)

Standard Margins:

• Mobile: 16px
• Tablet: 24px
• Desktop: 32-48px
• Max width: 1200-1400px

Component Spacing:

XS:  4px  - Tight groups (icon + text)
S:   8px  - Related items
M:   16px - Standard spacing
L:   24px - Section spacing
XL:  32px - Major sections
2XL: 48px - Page sections

Layout Patterns: See references/layout-patterns.md for grids, flexbox, and responsive patterns

Component Design

Buttons

Hierarchy:

1. Primary: Filled, accent color, main action
2. Secondary: Outlined or tinted, supporting action
3. Tertiary: Ghost/text-only, least prominent

States:

• Default
• Hover (lift or color shift)
• Active (pressed, scale down)
• Disabled (reduced opacity, no interaction)
• Loading (spinner, disabled)

Sizes:

• Small: 32-36px height
• Medium: 40-44px height (default)
• Large: 48-56px height

Best Practices:

• Minimum 44×44px touch target (mobile)
• Clear, action-oriented labels ("Save Changes" not "OK")
• Loading state for async actions
• Icon + text for clarity

Forms

Input Fields:

• Clear labels above fields
• Placeholders as hints, not labels
• Visible focus states
• Inline validation
• Error messages near field
• Success states

Field Sizing:

• Single line: 40-48px height
• Text area: 80-120px min height
• Width matches expected input length

Form Layout:

• Single column for simplicity
• Group related fields
• Progressive disclosure (show complexity as needed)
• Save button at bottom, clear/cancel secondary

Best Practices: See references/forms.md for validation patterns and accessibility

Cards

Anatomy:

• Border radius: 8-12px (modern), 0px (brutalist)
• Padding: 16-24px
• Shadow: Subtle, 1-2 layers max
• Background: Slightly elevated from page

Types:

• Flat: No shadow, border only
• Elevated: Subtle shadow
• Interactive: Hover lift, clickable
• Glassmorphic: Blur + transparency

Content:

• Image/icon at top (optional)
• Title (heading level)
• Description/body
• Actions at bottom

Navigation

Patterns:

• Top Nav: Global, persistent (web)
• Tab Bar: 3-5 primary sections (mobile)
• Sidebar: Complex apps, collapsible (desktop)
• Hamburger: Mobile fallback, avoid if possible
• Breadcrumbs: Hierarchical location

Mobile Navigation:

• Bottom tab bar (thumb-friendly)
• Burger menu for overflow
• Sticky header with back button

Desktop Navigation:

• Top bar or sidebar
• Dropdown menus for hierarchy
• Search prominent

See references/navigation-patterns.md

Animation & Motion

Durations:

• Quick: 100-200ms (button press, hover)
• Standard: 200-400ms (transitions, sheets)
• Slow: 400-600ms (page transitions, complex)

Easing Functions:

• ease-out: Most animations (starts fast, ends slow)
• ease-in: Exits (starts slow, accelerates)
• ease-in-out: Balanced (smooth start and end)
• spring: Natural, playful (CSS or JS springs)

Animation Principles:

1. Anticipation: Hint at upcoming change
2. Follow-through: Motion completes naturally
3. Continuity: Elements smoothly transition
4. Responsive: Immediate feedback to interaction

Micro-interactions: