Brand Guide Skill

Generate comprehensive brand style guides documenting colors, typography, imagery, voice/tone, and responsive design specifications.

When to Use This Skill

Invoke this skill when you need to:

• Create a brand style guide page
• Document color palettes with hex/rgb values
• Specify typography guidelines
• Define imagery and photography style
• Establish voice and tone guidelines
• Document responsive design breakpoints
• Extract brand info from existing themes

What This Skill Does

1. Extracts brand data from existing theme files (CSS, PHP)
2. Generates HTML/Markdown brand guide content
3. Creates WordPress pages with brand documentation
4. Documents responsive behavior at all breakpoints

Brand Data Structure

brand:
  name: "Brand Name"
  tagline: "Brand Tagline"
  established: 2025
  location: "City, State"

colors:
  primary:
    name: "Color Name"
    hex: "#HEXCODE"
    rgb: "rgb(r, g, b)"
    usage: "When to use this color"
  secondary:
    name: "Color Name"
    hex: "#HEXCODE"
    usage: "When to use this color"
  accent:
    name: "Color Name"
    hex: "#HEXCODE"
    usage: "When to use this color"

typography:
  primary_font: "Font Family"
  weights: [300, 400, 700]
  headings:
    style: "font-light tracking-tighter"
    sizes:
      h1: "text-5xl md:text-9xl"
      h2: "text-4xl md:text-5xl"
      h3: "text-xl"
  body:
    style: "font-light leading-relaxed"
    size: "text-lg"

imagery:
  style: "Professional/Candid/etc"
  treatment: "Filters, overlays"
  subjects: ["Subject 1", "Subject 2"]
  aspect_ratios:
    hero: "16:9"
    card: "4:5"
    square: "1:1"

voice:
  personality: ["Adjective 1", "Adjective 2", "Adjective 3"]
  tone: "Description of tone"
  examples:
    do: ["Example of correct copy"]
    dont: ["Example of incorrect copy"]

responsive:
  breakpoints:
    mobile: "< 768px"
    tablet: "768px - 1024px"
    desktop: "> 1024px"
  behaviors:
    navigation: "Hamburger on mobile, full on desktop"
    hero: "Stacked on mobile, side-by-side on desktop"

CSR Development Brand

Colors

Typography

Primary Font: Manrope (Google Fonts)

Imagery

• Style: Professional architectural photography
• Treatment: Subtle grayscale (20%), dark blue overlay (10% opacity)
• Subjects: Modern buildings, Miami skyline, luxury interiors, construction
• Aspect Ratios:
  • Hero: 16:9 (video) or full height
  • Portfolio cards: 4:5
  • Team photos: 1:1

Voice & Tone

Personality: Professional, Sophisticated, Trustworthy, Visionary

Tone: Confident but not arrogant, elegant but accessible

Do:

• "CSR acquires and develops real estate assets that create long-term value"
• "Built on Legacy"
• "Elevating the standard of living through thoughtful design"

Don't:

• Overly casual language
• Excessive exclamation points
• Industry jargon without explanation

Responsive Breakpoints

Scripts

extract-brand.py

Extracts brand data from theme CSS/PHP files.

Usage:

python3 /root/.claude/skills/brand-guide/scripts/extract-brand.py \
  --theme-path /path/to/theme \
  --output /path/to/brand-data.yaml

generate-guide.py

Generates brand guide HTML from brand data.

Usage:

python3 /root/.claude/skills/brand-guide/scripts/generate-guide.py \
  --brand-data /path/to/brand-data.yaml \
  --output /path/to/brand-guide.html

color-utils.py

Utilities for color manipulation and contrast checking.

Usage:

python3 /root/.claude/skills/brand-guide/scripts/color-utils.py \
  --hex "#07254B" \
  --check-contrast "#EDEAE3"

Templates

brand-guide-page.html

Full brand guide page template with all sections.

color-palette.html

Color palette section showing swatches with codes.

typography.html

Typography section with font samples at all sizes.

imagery.html

Imagery guidelines with example treatments.

voice-tone.html

Voice and tone section with do's and don'ts.

responsive.html

Responsive design specs with breakpoint documentation.

Workflow

Create Brand Guide for Existing Site

1. Extract brand data:

   python3 scripts/extract-brand.py --theme-path /path/to/theme
   

2. Review and enhance the extracted data (add voice/tone, etc.)

3. Generate guide:

   python3 scripts/generate-guide.py --brand-data brand.yaml
   

4. Create WordPress page using wordpress-admin skill

Create Brand Guide from Scratch

1. Fill out brand data template (see structure above)
2. Generate guide HTML
3. Create WordPress page
4. Add screenshots at each breakpoint

Integration with wordpress-admin

After generating a brand guide, create it as a WordPress page:

# Create the page
docker exec wordpress-local-wordpress-1 wp post create \
  --post_type=page \
  --post_title="Brand Style Guide" \
  --post_name="brand-guide" \
  --post_status="publish" \
  --post_content="$(cat brand-guide.html)" \
  --allow-root

# Set SEO
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_focuskw "CSR brand style guide" --allow-root
docker exec wordpress-local-wordpress-1 wp post meta update <ID> _yoast_wpseo_metadesc "Complete brand style guide for CSR Real Estate including colors, typography, imagery guidelines, and voice specifications." --allow-root

Reference Files

• CSR Theme: /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/
• CSR Style CSS: /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/style.css
• CSR Logo: /root/csrdevelopment.com/csrdevelopment.com/public_html/wp-content/themes/csr-theme/assets/images/csr-logo.svg

Examples

See /root/.claude/skills/brand-guide/examples/csr-brand-guide.md for a complete CSR Development brand guide example.