Kunthawat Greethong
8a0edd225d
- Extract 9 nested skills from website-creator/ to root skills/ - Remove duplicate seo-analyzers, seo-geo, seo-multi-channel from website-creator - Add new ui-ux-pro-max skill with full UI/UX data - Update install-skills.sh to sync properly - Remove .DS_Store artifacts Moved skills: - api-and-interface-design - banner-design - brand - design-system - design - frontend-ui-engineering - slides - spec-driven-development - ui-styling
97 lines
1.8 KiB
Markdown
97 lines
1.8 KiB
Markdown
# 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
|