Create Logos And Visual Systems

---
name: create-logos-and-visual-systems
description: "Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability."
category: "Community"
author: community
version: "1.0.0"
icon: puzzle
---

# 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