Design beautiful, consistent user interfaces with proper color theory, typography, spacing, and visual hierarchy. Use when creating design systems, choosing colors and fonts, or establishing visual direction. Covers color theory, typography scales, spacing systems, and design principles.
Version: 1.0.0 Category: UX & Design Difficulty: Intermediate
Helps you create beautiful, consistent visual designs with professional color systems, typography, spacing, and layout principles.
Use this skill when you need to:
Fastest path to great design:
Start with color (60-30-10 rule):
Set up typography:
Use 8pt grid for spacing:
Check accessibility:
Time to design: 2-4 hours for component system
You've successfully used this skill when:
60-30-10 Color Rule:
Type Scale (1.25 Ratio):
8pt Grid System:
Visual Hierarchy:
/* Primary (60%) */
--color-primary-50: #eff6ff;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;
/* Secondary (30%) */
--color-secondary-500: #8b5cf6;
/* Accent (10%) */
--color-accent-500: #f59e0b;
/* Neutrals */
--color-gray-50: #f9fafb;
--color-gray-500: #6b7280;
--color-gray-900: #111827;
/* Font Families */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
/* Type Scale (1.25) */
--text-xs: 0.64rem; /* 10px */
--text-sm: 0.8rem; /* 13px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
/* Line Heights */
--leading-tight: 1.2; /* Headings */
--leading-normal: 1.5; /* Body */
--leading-relaxed: 1.75; /* Long form */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--radius-sm: 0.125rem; /* 2px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-full: 9999px; /* Pills/circles */
Design Tools:
Color Tools:
Typography Tools:
Inspiration:
Primary: High contrast, accent color
Secondary: Lower contrast, outlined
Tertiary: Minimal, text-based
Danger: Red, destructive actions
- 8-16px padding
- Subtle shadow (--shadow-sm)
- 8px border radius
- Hover: Lift (larger shadow)
- 40px minimum height (mobile)
- 12-16px padding
- Clear focus state
- Label above or placeholder
- Error state in red with message
❌ Too many colors - Stick to 3-5 colors max ❌ Too many fonts - Use 2 fonts max (1 is often enough) ❌ Inconsistent spacing - Use spacing scale ❌ Poor contrast - Check WCAG ratios ❌ Centered text blocks - Left-align long text ❌ All caps everywhere - Use sparingly for emphasis ❌ Tiny click targets - Minimum 44x44px
Part of ai-dev-standards repository.
Google Workspace CLI for Gmail, Calendar, Drive, Contacts, Sheets, and Docs.
Manage Apple Notes via the `memo` CLI on macOS (create, view, edit, delete, search, move, and export notes). Use when a user asks OpenClaw to add a note, list notes, search notes, or manage note folders.
Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.
Use when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
Manage Apple Reminders via remindctl CLI (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.
Manage Trello boards, lists, and cards via the Trello REST API.
Category:productivity