tomevault-io UI Design Skill
Purpose
Create user interfaces that are visually appealing, intuitive, and functional.
Design Principles
1. Hierarchy
Guide users through content with visual importance.
- Size: Larger = more important
- Color: Bold/saturated = more important
- Space: More whitespace = more important
2. Consistency
Use consistent patterns throughout.
- Same colors mean same things
- Same components behave the same
- Predictable layouts
3. Feedback
Respond to user actions.
- Hover states on interactive elements
- Loading indicators for async operations
- Success/error messages for actions
4. Simplicity
Remove unnecessary elements.
- Every element should serve a purpose
- Reduce cognitive load
- Progressive disclosure for complexity
Color Usage
| Color | Typical Use |
|---|---|
| Primary | Main actions, branding |
| Secondary | Supporting actions |
| Success | Positive feedback (green) |
| Warning | Caution (yellow/orange) |
| Error | Problems (red) |
| Neutral | Text, backgrounds, borders |
Typography
- Headlines - Large, bold, limited use
- Body - Readable, 16px minimum
- Captions - Small, secondary information
- Line Height - 1.5 for body text
Spacing System
Use consistent spacing scale:
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Component Checklist
- Has visible focus state
- Has hover state (if interactive)
- Has disabled state
- Works with keyboard
- Has appropriate contrast
Converted and distributed by TomeVault — claim your Tome and manage your conversions.