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.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
name: brand-guidelines description: 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. source: anthropics/skills license: Apache-2.0
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
More by skillcreatorai
View allCreate, update, and manage Jira issues from natural language. Use when the user wants to log bugs, create tickets, update issue status, or manage their Jira backlog.
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for creating new documents, modifying content, working with tracked changes, or adding comments.
Backend API design, database architecture, microservices patterns, and test-driven development. Use for designing APIs, database schemas, or backend system architecture.