brand-guidelines

Name: brand-guidelines - Agent Skill
Rating: 4.2 (594 reviews)
Author: skillcreatorai

594

Apache-2.0

Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.

Download Folder View on GitHub

CLI Install

Recommended

Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.

Method 1 - skills CLI

npx skills i skillcreatorai/Ai-Agent-Skills/skills/brand-guidelines

Method 2 - openskills (supports sync & update)

npx openskills install skillcreatorai/Ai-Agent-Skills

Auto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.

Installation Path

Download and extract to one of the following locations:

~/.claude/skills/brand-guidelines/

SKILL.md

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

No setup required

Brand Guidelines Application

Purpose

Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.

Core Brand Elements

Colors

Define your brand palette with CSS variables:

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

Typography

/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;
 
/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;
 
/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;
 
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Spacing

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Application Examples

Buttons

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;

Cards

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0

Headers

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

Document Templates

Google Docs

Heading 1: Display font, 24pt, Brand Dark
Heading 2: Display font, 18pt, Brand Primary
Body: Body font, 11pt, Brand Text
Links: Brand Primary, underlined

Presentations

Title slides: White text on Brand Primary background
Content slides: Brand Dark text on white
Accent elements: Brand Secondary or Accent

Best Practices

Consistency: Use exact brand colors, never approximate
Contrast: Ensure 4.5:1 minimum for text readability
Hierarchy: Use size and weight to establish importance
Whitespace: Generous spacing feels premium
Logo usage: Maintain clear space around logo