Visual Design Skill

=== PURPOSE ===

Procedures for creating visual designs and mockups.

=== USED BY ===

=== PROCEDURE: Design Process ===

Steps:

1. Review requirements and user flows
2. Reference design system foundations
3. Create low-fidelity wireframes
4. Iterate to high-fidelity mockups
5. Define states and interactions
6. Document specifications
7. Handoff to development

=== PROCEDURE: Layout Principles ===

Grid System:

Desktop (1200px+):
- 12 column grid
- 72px columns
- 24px gutters
- 80px margins

Tablet (768px-1199px):
- 8 column grid
- 24px gutters
- 32px margins

Mobile (< 768px):
- 4 column grid
- 16px gutters
- 16px margins

Visual Hierarchy:

1. Size - Larger = more important
2. Color - Bold/saturated = attention
3. Contrast - High contrast = emphasis
4. Position - Top-left reads first (LTR)
5. Whitespace - Isolation = importance

=== PROCEDURE: Color Usage ===

Semantic Application:

Background Layers:

Layer 0 (Page): gray-50
Layer 1 (Card): white
Layer 2 (Elevated): white + shadow-md
Layer 3 (Modal): white + shadow-xl

=== PROCEDURE: Typography Application ===

Content Hierarchy:

Page Title:     4xl, bold, gray-900
Section Title:  2xl, semibold, gray-900
Subsection:     xl, semibold, gray-900
Body:           base, regular, gray-700
Caption:        sm, regular, gray-500
Label:          sm, medium, gray-600

Line Length:

• Optimal: 50-75 characters
• Maximum: 85 characters
• Minimum: 45 characters

=== PROCEDURE: Spacing Application ===

Component Internal Spacing:

Layout Spacing:

=== PROCEDURE: Icon Design ===

Icon Guidelines:

• Size: 16px, 20px, 24px (standard)
• Stroke: 1.5px or 2px
• Corner radius: Match system (usually 2px)
• Style: Consistent (outlined OR filled)

Icon Grid:

┌────────────────────┐
│                    │
│    ┌──────────┐    │  24x24 canvas
│    │   SAFE   │    │  20x20 safe area
│    │   AREA   │    │  2px padding
│    └──────────┘    │
│                    │
└────────────────────┘

=== PROCEDURE: State Design ===

Interactive States:

Form States:

=== PROCEDURE: Responsive Design ===

Breakpoints:

Responsive Patterns:

• Stack (horizontal → vertical)
• Hide/Show (hide less important)
• Adapt (change component variant)
• Overflow (scroll container)

=== RELATED SKILLS ===