Add sub-skills from ui-ux-pro-max-skill repo
Added: - banner-design (new) - brand (new) - design-system (new) - slides (new) - ui-ux-pro-max data/scripts (from GitHub clone) - ui-styling data/scripts (from GitHub clone)
This commit is contained in:
96
skills/website-creator/brand/references/visual-identity.md
Normal file
96
skills/website-creator/brand/references/visual-identity.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# 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
|
||||
|
||||
```markdown
|
||||
## 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
|
||||
Reference in New Issue
Block a user