ui-ux-pro-max-skill/.claude/skills/brand/references/visual-identity.md

Visual Identity Basics

Core Visual Elements

Logo

• Primary: Full logo (horizontal/stacked)
• Secondary: Abbreviated version
• Icon/Mark: Symbol only
• Clear space: Minimum padding around logo
• Minimum size: Smallest readable size

Color Palette

Primary Colors (1-2)
├── Main brand color
└── Supporting primary

Secondary Colors (2-3)
├── Accent colors
└── Supporting visuals

Neutrals (3-4)
├── Text colors
├── Background colors
└── UI elements

Typography

Usage	Font	Weight	Size
H1	[Font]	Bold	32-48px
H2	[Font]	Semibold	24-32px
Body	[Font]	Regular	16-18px
Caption	[Font]	Regular	12-14px

Visual Guidelines Template

## Logo Usage

### Correct Usage
- [Guidelines for proper logo use]

### Incorrect Usage
- Don't stretch or distort
- Don't change colors (unless approved)
- Don't add effects
- Don't place on busy backgrounds

## Color Specifications

### Primary Palette
| Color | Hex | RGB | Usage |
|-------|-----|-----|-------|
| [Name] | #XXXXXX | r,g,b | [Where to use] |

### Accessibility
- Text contrast ratio: 4.5:1 minimum
- Button contrast: WCAG AA compliant

## Imagery Style

### Photography
- [Lighting preferences]
- [Subject guidelines]
- [Composition rules]
- [Editing style]

### Illustrations
- [Style description]
- [Color usage]
- [Complexity level]

### Icons
- [Style: outlined/filled/duotone]
- [Stroke weight]
- [Corner radius]

Quick Checks

Logo

• Correct version for context
• Sufficient clear space
• Legible at size used
• Correct color for background

Colors

• From approved palette
• Accessible contrast
• Consistent across materials

Typography

• Correct fonts
• Appropriate hierarchy
• Readable size