# Graphicdesigner Skill

> This skill should be used when the user asks about graphic design principles, typography, color theory, design systems, UI/UX design, logo design, branding, visual hierarchy, grids and layouts, design tools (Figma, Adobe Illustrator, Photoshop, Canva), icon design, illustration, image composition, print design, web design aesthetics, accessibility in design, design tokens, wireframing, prototyping, or any visual design topic. Trigger when the user mentions "figma", "design system", "typography", "color palette", "font pairing", "logo", "branding", "visual hierarchy", "whitespace", "grid layout", "design tokens", "wireframe", "prototype", "UI design", "UX design", "illustration", "icon set", "brand identity", "contrast ratio", "accessibility", or asks for design advice or critique.

- Skill: `sirhamza/graphicdesigner-skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sirhamza/graphicdesigner-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sirhamza/graphicdesigner-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: SirHamza (https://skillmd.com/u/sirhamza)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sirhamza/graphicdesigner-skill

---


# Graphic Designer Expert

## Overview

Advanced expertise in graphic design — from foundational principles (color, typography, layout) to digital tools, design systems, branding, UI/UX, and accessibility standards.

---

## 1. Core Design Principles

### Visual Hierarchy
- Guide the eye with size, weight, color, and position
- Most important element: largest / highest contrast / top-left (LTR)
- F-pattern and Z-pattern for web reading behavior
- Use scale ratios (1.25×, 1.414×, 1.618× — golden ratio)

### Gestalt Principles
- **Proximity**: nearby elements are perceived as related
- **Similarity**: matching color/shape = same group
- **Continuation**: eye follows lines and curves
- **Closure**: incomplete shapes are mentally completed
- **Figure/Ground**: distinguish foreground from background
- **Common Fate**: elements moving together are grouped

### Balance
- **Symmetric**: mirrored — formal, stable, corporate
- **Asymmetric**: visual weight balanced differently — dynamic, modern
- **Radial**: elements radiate from center — focal, energetic

### Contrast & Emphasis
- Never use two similar values — commit to difference
- Contrast types: size, color, weight, texture, shape, direction
- One focal point per composition — avoid competing emphases

### Whitespace (Negative Space)
- Active whitespace: intentional breathing room between elements
- Micro whitespace: letter-spacing, line-height, padding
- Macro whitespace: margins, gutters, section breaks
- Whitespace communicates quality and luxury

---

## 2. Typography

### Type Classification
- **Serif**: Times, Garamond, Georgia — traditional, editorial, trust
- **Sans-serif**: Inter, Helvetica, DM Sans — modern, clean, digital
- **Monospace**: JetBrains Mono, Fira Code — technical, code
- **Display/Decorative**: headlines only, never body text
- **Script**: weddings, luxury — sparingly, high contrast background

### Type Scale (Modular)
```
Base: 16px
Minor Third (1.2×):  13 / 16 / 19 / 23 / 28 / 34px
Major Third (1.25×): 13 / 16 / 20 / 25 / 31 / 39px
Perfect Fourth (1.333×): 12 / 16 / 21 / 28 / 37 / 50px
Golden Ratio (1.618×): 10 / 16 / 26 / 42 / 68px
```

### Font Pairing Rules
- Pair a serif with a sans-serif for contrast
- Match personality (both geometric, or both humanist)
- Limit to 2 typefaces per project (3 max)
- Never pair two display fonts
- Vary weight and size, not just family
- Great pairings: Inter + Playfair Display, DM Sans + Lora, Sora + Merriweather

### Type Settings
```
Body text:       16–18px, line-height 1.5–1.7, max-width 65–75ch
Headings:        line-height 1.1–1.3, letter-spacing -0.02em to -0.04em
Small text:      12–14px, line-height 1.4, letter-spacing +0.01em
Caps/labels:     letter-spacing +0.08em to +0.12em (always)
Paragraph spacing: 0.75–1em between paragraphs
```

---

## 3. Color Theory

### Color Models
- **RGB**: screens — additive (light)
- **CMYK**: print — subtractive (ink)
- **HSL/HSB**: designer-friendly — hue (0°–360°), saturation, lightness/brightness
- **HEX**: web shorthand for RGB

### Color Harmonies
| Harmony | Description | Use |
|---|---|---|
| Monochromatic | One hue, varied lightness | Minimal, elegant |
| Analogous | Adjacent hues (±30°) | Natural, harmonious |
| Complementary | Opposite hues (180°) | High contrast, vibrant |
| Split-complementary | One + two adjacent to complement | Balanced contrast |
| Triadic | Three evenly spaced (120°) | Playful, balanced |
| Tetradic | Four colors (two complementary pairs) | Rich, complex |

### The 60-30-10 Rule
- **60%** dominant/background color
- **30%** secondary color
- **10%** accent color

### Color Psychology
- Red: urgency, passion, energy, danger
- Orange: creativity, enthusiasm, warmth, affordability
- Yellow: optimism, clarity, caution, attention
- Green: nature, growth, health, money, success
- Blue: trust, calm, professional, technology
- Purple: luxury, wisdom, spirituality, creativity
- Black: sophistication, power, elegance, mystery
- White: clean, minimal, pure, spacious

### Contrast & Accessibility
- **WCAG AA**: 4.5:1 for normal text, 3:1 for large text (18px+ bold)
- **WCAG AAA**: 7:1 for normal text
- Tools: Coolors, Adobe Color, Colorhunt, Paletton
- Never rely on color alone to convey meaning

---

## 4. Grid Systems & Layout

### Grid Types
```
Column grid:  12-column (web standard), 8-column (mobile)
Modular grid: rows + columns for complex layouts (magazine, dashboard)
Baseline grid: consistent vertical rhythm (8px base unit)
```

### 8-Point Grid System
- All spacing in multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80, 96
- Benefits: consistency, pixel-perfect across screen densities
- Common spacings: 4px (tight), 8px (compact), 16px (default), 24px (relaxed), 32px (sections)

### Layout Composition
- **Rule of thirds**: divide canvas 3×3, place focal points at intersections
- **Golden ratio**: 1:1.618 — natural proportion guide
- **Z-pattern**: logo top-left → CTA top-right → content → bottom CTA
- **F-pattern**: news/text-heavy — top scan → left-aligned reading

---

## 5. Design Systems & Tokens

### Design Token Structure
```
Color:
  - Primitive: blue-500 = #3b82f6
  - Semantic:  color-primary = {blue-500}
  - Component: button-bg = {color-primary}

Spacing:
  - space-1 = 4px
  - space-2 = 8px
  - space-4 = 16px

Typography:
  - font-size-base = 16px
  - font-weight-bold = 700
  - line-height-body = 1.6

Radius:
  - radius-sm = 4px
  - radius-md = 8px
  - radius-full = 9999px
```

### Component Variants (Figma)
- Use **Variants** for states: default, hover, active, disabled, loading
- Use **Auto Layout** for responsive components
- Use **Component properties**: boolean (show/hide), text, instance swap
- Structure: Atoms → Molecules → Organisms → Templates → Pages (Atomic Design)

---

## 6. Figma Best Practices

### File Organization
```
📁 Project Name
├── 🎨 _Design System (library file — publish styles & components)
├── 📄 01 - Research & Wireframes
├── 📄 02 - UI Design
├── 📄 03 - Prototypes
└── 📄 04 - Handoff / Specs
```

### Layer Naming
```
✅ Good:  Button / Primary / Large / Default
❌ Bad:   Rectangle 47, Frame 12
```

### Auto Layout Tips
- Set to Hug for flexible components
- Use Fill on children to expand inside parent
- Clip content for cards and containers
- Nested Auto Layouts for complex responsive components

### Prototyping
- Smart Animate for smooth transitions (matching layer names)
- Component states for hover/pressed interactions
- Overlay for modals, tooltips, dropdowns
- Variables for interactive light/dark mode toggle

---

## 7. Branding & Identity

### Brand Identity Elements
1. **Logo**: wordmark, lettermark, icon mark, combination mark, emblem
2. **Color palette**: primary (1–2), secondary (2–3), neutral, semantic
3. **Typography**: primary typeface + secondary + monospace (if needed)
4. **Iconography**: style (filled/outlined/duotone), stroke weight, corner radius
5. **Photography style**: tone, subject, composition direction
6. **Illustration style**: flat, 3D, hand-drawn, geometric
7. **Voice & tone**: formal/casual, technical/simple, playful/serious

### Logo Design Principles
- Works in 1 color (must work in black on white)
- Legible at 16px favicon size and 10m billboard
- Avoid gradients in primary logo (use flat version)
- SVG format — infinitely scalable
- Provide: color, reverse (white), monochrome, favicon variants

### Brand Guidelines Document
- Logo usage: clear space, minimum size, forbidden uses
- Color specifications: HEX, RGB, CMYK, Pantone
- Typography specimens and usage rules
- Tone of voice with examples
- Approved imagery style

---

## 8. UI / UX Design Principles

### UX Laws
- **Fitts's Law**: larger + closer targets are easier to click → big tap targets (48×48px min)
- **Hick's Law**: more choices = longer decision time → reduce options
- **Miller's Law**: 7±2 items in working memory → chunk navigation
- **Jakob's Law**: users spend most time on other sites → follow conventions
- **Aesthetic-Usability Effect**: beautiful design perceived as more usable

### Interaction Design
- **Feedback**: every action needs a response (loading, success, error)
- **Affordance**: design should suggest how to use it (button looks clickable)
- **Consistency**: same action = same result everywhere
- **Error prevention**: validate early, constrain inputs, confirm destructive actions
- **Progressive disclosure**: show only what's needed, reveal complexity on demand

### Mobile Design
- Minimum tap target: 44×44px (Apple HIG), 48×48dp (Material)
- Thumb zone: bottom 2/3 of screen is easiest to reach
- Safe areas: respect notch/home bar on iOS, nav bar on Android
- Font size minimum: 16px body (prevents auto-zoom on iOS)

---

## 9. Accessibility in Design

### Visual Accessibility
- Color contrast: 4.5:1 (AA), 7:1 (AAA) — use Figma Contrast plugin
- Never convey information by color alone — add icons/labels
- Focus indicators: 3:1 contrast, 2px minimum offset
- Text on images: always overlay, darken image or use solid bg

### Inclusive Design Checklist
- [ ] All interactive elements keyboard accessible
- [ ] Logical reading order matches visual order
- [ ] Icons have text labels or tooltips
- [ ] Form inputs have visible labels (not just placeholder)
- [ ] Error messages describe what's wrong and how to fix
- [ ] Motion can be disabled (respect `prefers-reduced-motion`)
- [ ] Touch targets ≥ 44×44px with adequate spacing

---

## 10. Design Tools Reference

| Tool | Best For |
|---|---|
| **Figma** | UI/UX design, design systems, collaboration, prototyping |
| **Adobe Illustrator** | Vector graphics, logos, icons, print |
| **Adobe Photoshop** | Photo editing, raster graphics, compositing |
| **Adobe InDesign** | Print layout, editorial, multi-page documents |
| **Framer** | High-fidelity interactive web prototypes |
| **Canva** | Quick marketing materials, social media |
| **Spline** | 3D design for web |
| **Lottie/After Effects** | Animation, micro-interactions |
| **Coolors** | Color palette generation |
| **Google Fonts** | Free web typography |

---

## Core Competency Summary

- Apply color theory, typography, and layout to create intentional, hierarchical designs
- Build scalable design systems with tokens, components, and variants in Figma
- Design brand identities: logos, palettes, type, voice, and guidelines
- Apply UX laws and interaction design principles for usable interfaces
- Ensure WCAG-compliant accessibility in all visual design work
- Deliver production-ready assets optimized for web, mobile, and print