refactor: move nested skills to root + add ui-ux-pro-max + ConsentOS
- 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
This commit is contained in:
275
skills/brand/templates/brand-guidelines-starter.md
Normal file
275
skills/brand/templates/brand-guidelines-starter.md
Normal file
@@ -0,0 +1,275 @@
|
||||
# Brand Guidelines v1.0
|
||||
|
||||
> Last updated: {DATE}
|
||||
> Status: Draft
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Element | Value |
|
||||
|---------|-------|
|
||||
| Primary Color | #2563EB |
|
||||
| Secondary Color | #8B5CF6 |
|
||||
| Primary Font | Inter |
|
||||
| Voice | Professional, Helpful, Clear |
|
||||
|
||||
---
|
||||
|
||||
## 1. Color Palette
|
||||
|
||||
### Primary Colors
|
||||
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| Primary Blue | #2563EB | rgb(37,99,235) | CTAs, headers, links |
|
||||
| Primary Dark | #1D4ED8 | rgb(29,78,216) | Hover states, emphasis |
|
||||
|
||||
### Secondary Colors
|
||||
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| Secondary Purple | #8B5CF6 | rgb(139,92,246) | Accents, highlights |
|
||||
| Accent Green | #10B981 | rgb(16,185,129) | Success, positive states |
|
||||
|
||||
### Neutral Palette
|
||||
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| Background | #FFFFFF | rgb(255,255,255) | Page backgrounds |
|
||||
| Surface | #F9FAFB | rgb(249,250,251) | Cards, sections |
|
||||
| Text Primary | #111827 | rgb(17,24,39) | Headings, body text |
|
||||
| Text Secondary | #6B7280 | rgb(107,114,128) | Captions, muted text |
|
||||
| Border | #E5E7EB | rgb(229,231,235) | Dividers, borders |
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
| State | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Success | #22C55E | Positive actions, confirmations |
|
||||
| Warning | #F59E0B | Cautions, pending states |
|
||||
| Error | #EF4444 | Errors, destructive actions |
|
||||
| Info | #3B82F6 | Informational messages |
|
||||
|
||||
### Accessibility
|
||||
|
||||
- Text on white background: 7.2:1 contrast ratio (AAA)
|
||||
- Primary on white: 4.6:1 contrast ratio (AA)
|
||||
- All interactive elements meet WCAG 2.1 AA standards
|
||||
|
||||
---
|
||||
|
||||
## 2. Typography
|
||||
|
||||
### Font Stack
|
||||
|
||||
```css
|
||||
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
```
|
||||
|
||||
### Type Scale
|
||||
|
||||
| Element | Size (Desktop) | Size (Mobile) | Weight | Line Height |
|
||||
|---------|----------------|---------------|--------|-------------|
|
||||
| H1 | 48px | 32px | 700 | 1.2 |
|
||||
| H2 | 36px | 28px | 600 | 1.25 |
|
||||
| H3 | 28px | 24px | 600 | 1.3 |
|
||||
| H4 | 24px | 20px | 600 | 1.35 |
|
||||
| Body | 16px | 16px | 400 | 1.5 |
|
||||
| Body Large | 18px | 18px | 400 | 1.6 |
|
||||
| Small | 14px | 14px | 400 | 1.5 |
|
||||
| Caption | 12px | 12px | 400 | 1.4 |
|
||||
|
||||
### Font Loading
|
||||
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Logo Usage
|
||||
|
||||
### Variants
|
||||
|
||||
| Variant | File | Use Case |
|
||||
|---------|------|----------|
|
||||
| Full Horizontal | logo-full-horizontal.svg | Headers, documents |
|
||||
| Stacked | logo-stacked.svg | Square spaces |
|
||||
| Icon Only | logo-icon.svg | Favicons, small spaces |
|
||||
| Monochrome | logo-mono.svg | Limited color contexts |
|
||||
|
||||
### Clear Space
|
||||
|
||||
Minimum clear space = height of the logo icon (mark)
|
||||
|
||||
### Minimum Size
|
||||
|
||||
| Context | Minimum Width |
|
||||
|---------|---------------|
|
||||
| Digital - Full Logo | 120px |
|
||||
| Digital - Icon | 24px |
|
||||
| Print - Full Logo | 35mm |
|
||||
| Print - Icon | 10mm |
|
||||
|
||||
### Don'ts
|
||||
|
||||
- Don't rotate or skew the logo
|
||||
- Don't change colors outside approved palette
|
||||
- Don't add shadows or effects
|
||||
- Don't crop or modify proportions
|
||||
- Don't place on busy backgrounds without sufficient contrast
|
||||
|
||||
---
|
||||
|
||||
## 4. Voice & Tone
|
||||
|
||||
### Brand Personality
|
||||
|
||||
| Trait | Description |
|
||||
|-------|-------------|
|
||||
| **Professional** | Expert knowledge, authoritative yet approachable |
|
||||
| **Helpful** | Solution-focused, actionable guidance |
|
||||
| **Clear** | Direct communication, jargon-free |
|
||||
| **Confident** | Assured without being arrogant |
|
||||
|
||||
### Voice Chart
|
||||
|
||||
| Trait | We Are | We Are Not |
|
||||
|-------|--------|------------|
|
||||
| Professional | Expert, knowledgeable | Stuffy, corporate |
|
||||
| Helpful | Supportive, empowering | Patronizing |
|
||||
| Clear | Direct, concise | Vague, wordy |
|
||||
| Confident | Assured, trustworthy | Arrogant, overselling |
|
||||
|
||||
### Tone by Context
|
||||
|
||||
| Context | Tone | Example |
|
||||
|---------|------|---------|
|
||||
| Marketing | Engaging, benefit-focused | "Create campaigns that convert." |
|
||||
| Documentation | Clear, instructional | "Run the command to start." |
|
||||
| Error messages | Calm, solution-focused | "Try refreshing the page." |
|
||||
| Success | Brief, celebratory | "Campaign published!" |
|
||||
|
||||
### Prohibited Terms
|
||||
|
||||
| Avoid | Reason |
|
||||
|-------|--------|
|
||||
| Revolutionary | Overused |
|
||||
| Best-in-class | Vague claim |
|
||||
| Seamless | Overused |
|
||||
| Synergy | Corporate jargon |
|
||||
| Leverage | Use "use" instead |
|
||||
|
||||
---
|
||||
|
||||
## 5. Imagery Guidelines
|
||||
|
||||
### Photography Style
|
||||
|
||||
- **Lighting:** Natural, soft lighting preferred
|
||||
- **Subjects:** Real people, authentic scenarios
|
||||
- **Color treatment:** Maintain brand colors in post
|
||||
- **Composition:** Clean, focused subjects
|
||||
|
||||
### Illustrations
|
||||
|
||||
- Style: Modern, flat design with subtle gradients
|
||||
- Colors: Brand palette only
|
||||
- Line weight: 2px consistent stroke
|
||||
- Corners: 4px rounded
|
||||
|
||||
### Icons
|
||||
|
||||
- Style: Outlined, 24px base grid
|
||||
- Stroke: 1.5px consistent
|
||||
- Corner radius: 2px
|
||||
- Fill: None (outline only)
|
||||
|
||||
---
|
||||
|
||||
## 6. Design Components
|
||||
|
||||
### Buttons
|
||||
|
||||
| Type | Background | Text | Border Radius |
|
||||
|------|------------|------|---------------|
|
||||
| Primary | #2563EB | #FFFFFF | 8px |
|
||||
| Secondary | Transparent | #2563EB | 8px |
|
||||
| Tertiary | Transparent | #6B7280 | 8px |
|
||||
|
||||
### Spacing Scale
|
||||
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| xs | 4px | Tight spacing |
|
||||
| sm | 8px | Compact elements |
|
||||
| md | 16px | Standard spacing |
|
||||
| lg | 24px | Section spacing |
|
||||
| xl | 32px | Large gaps |
|
||||
| 2xl | 48px | Section dividers |
|
||||
|
||||
### Border Radius
|
||||
|
||||
| Element | Radius |
|
||||
|---------|--------|
|
||||
| Buttons | 8px |
|
||||
| Cards | 12px |
|
||||
| Inputs | 8px |
|
||||
| Modals | 16px |
|
||||
| Pills/Tags | 9999px |
|
||||
|
||||
---
|
||||
|
||||
## AI Image Generation
|
||||
|
||||
### Base Prompt Template
|
||||
|
||||
Always prepend to image generation prompts:
|
||||
|
||||
```
|
||||
{DESCRIBE YOUR VISUAL STYLE HERE - mood, colors with hex codes, lighting, atmosphere}
|
||||
```
|
||||
|
||||
### Style Keywords
|
||||
|
||||
| Category | Keywords |
|
||||
|----------|----------|
|
||||
| **Lighting** | {e.g., soft lighting, dramatic, natural} |
|
||||
| **Mood** | {e.g., professional, energetic, calm} |
|
||||
| **Composition** | {e.g., centered, rule of thirds, minimal} |
|
||||
| **Treatment** | {e.g., high contrast, muted, vibrant} |
|
||||
| **Aesthetic** | {e.g., modern, vintage, minimalist} |
|
||||
|
||||
### Visual Mood Descriptors
|
||||
|
||||
- {Mood descriptor 1}
|
||||
- {Mood descriptor 2}
|
||||
- {Mood descriptor 3}
|
||||
|
||||
### Visual Don'ts
|
||||
|
||||
| Avoid | Reason |
|
||||
|-------|--------|
|
||||
| {Item to avoid} | {Why to avoid it} |
|
||||
|
||||
### Example Prompts
|
||||
|
||||
**Hero Banner:**
|
||||
```
|
||||
{Example prompt for hero banners}
|
||||
```
|
||||
|
||||
**Social Media Post:**
|
||||
```
|
||||
{Example prompt for social graphics}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Changelog
|
||||
|
||||
| Version | Date | Changes |
|
||||
|---------|------|---------|
|
||||
| 1.0 | {DATE} | Initial guidelines |
|
||||
Reference in New Issue
Block a user