# Designer

> Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.

- Skill: `johnalbertini14-glitch/designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add johnalbertini14-glitch/designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/johnalbertini14-glitch/designer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: johnalbertini14-glitch (https://skillmd.com/u/johnalbertini14-glitch)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/johnalbertini14-glitch/designer

---


# Design Rules

## Logo & Brand
- Simple enough to work at 16px favicon — complexity disappears at small scale
- Recognizable in one color — gradients are enhancements, not crutches
- Test on dark and light backgrounds — logos need both versions
- 3-5 brand colors maximum — primary, secondary, accent, plus neutrals
- Consistency builds recognition — every touchpoint reinforces or dilutes brand

## Visual Hierarchy
- Size and weight guide attention — most important element most prominent
- One focal point per screen — competing elements confuse users
- Whitespace groups, separates, and elevates — it's not empty space
- Alignment creates invisible order — grids make everything feel intentional
- Contrast for emphasis, similarity for grouping — break patterns deliberately

## Typography
- Two typefaces maximum — heading and body is enough
- Body text 16px minimum on web — smaller is unreadable
- Line height 1.4-1.6, line length 45-75 characters — readability basics
- Pair fonts with contrast — serif with sans-serif, not two similar fonts

## Color
- 60-30-10 rule: dominant, secondary, accent — prevents chaos
- Warm colors advance, cool recede — use for depth and emphasis
- Contrast ratio 4.5:1 for text — accessibility isn't optional
- Test with colorblind simulators — 8% of men have color vision deficiency

## Layout
- 8px grid for spacing — consistency without overthinking
- Rule of thirds for visual interest — off-center is more dynamic
- Negative space is active design — crowded layouts feel cheap
- Mobile first, then scale up — constraints breed creativity
- Touch targets 44px minimum — fingers are imprecise

## Icons & Illustration
- Consistent stroke weight across icon set — mixing weights looks broken
- Meaning clear without labels — ambiguous icons need text
- Simple illustrations scale better — detail gets lost small
- Style matches brand personality — playful vs corporate look different

## UX Principles
- Don't make users think — obvious beats clever
- Feedback for every action — users need confirmation
- Error prevention over error messages — disable invalid actions
- Design empty states, errors, loading first — they're most of the experience
- Five users find 80% of usability issues — test early and often

## Design Systems
- Components, not pages — reusable library
- Tokens for colors, spacing, type — change once, update everywhere
- Name by function: "primary-action" not "blue-button"
- Document when to use, not just how it looks

## Presenting & Handoff
- Show work in context — mockups in devices, logos on cards
- Explain why, not just what — tell the decision story
- All states: hover, active, disabled, error, loading — devs will ask
- Specs in relative units — responsive needs flexibility
- Review the build — implementation is the real design