Agent skill
brand-guidelines
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/brand-guidelines-skillcreatorai-ai-agent-skills
SKILL.md
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,0,0.1);
}
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?