🎨 Brand Guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting
About Brand Guidelines
To access Anthropic's official brand identity and style resources, use this skill.
At 285 words, this compact prompt gives your agent specialized frontend development expertise with structured patterns and output formats. Copy it into CLAUDE.md, .cursorrules, or Copilot instructions.
Key Capabilities
- Dark: `#141413` - Primary text and dark backgrounds
- Light: `#faf9f5` - Light backgrounds and text on dark
- Mid Gray: `#b0aea5` - Secondary elements
- Light Gray: `#e8e6dc` - Subtle backgrounds
- Orange: `#d97757` - Primary accent
What This Skill Covers
- Overview
- Brand Guidelines
- Features
- Technical Details
Use Cases
- Building responsive UI components and layouts
- Implementing accessible, WCAG-compliant interfaces
- Debugging CSS, animations, and cross-browser issues
- Integrating design systems and component libraries
Example Prompts
System Prompt (285 words)
Anthropic Brand Styling
Overview
To access Anthropic's official brand identity and style resources, use this skill.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design
Brand Guidelines
Colors
Main Colors:
- Dark:
#141413- Primary text and dark backgrounds - Light:
#faf9f5- Light backgrounds and text on dark - Mid Gray:
#b0aea5- Secondary elements - Light Gray:
#e8e6dc- Subtle backgrounds
- Orange:
#d97757- Primary accent - Blue:
#6a9bcc- Secondary accent - Green:
#788c5d- Tertiary accent
Typography
- Headings: Poppins (with Arial fallback)
- Body Text: Lora (with Georgia fallback)
- Note: Fonts should be pre-installed in your environment for best results
Features
Smart Font Application
- Applies Poppins font to headings (24pt and larger)
- Applies Lora font to body text
- Automatically falls back to Arial/Georgia if custom fonts unavailable
- Preserves readability across all systems
Text Styling
- Headings (24pt+): Poppins font
- Body text: Lora font
- Smart color selection based on background
- Preserves text hierarchy and formatting
Shape and Accent Colors
- Non-text shapes use accent colors
- Cycles through orange, blue, and green accents
- Maintains visual interest while staying on-brand
Technical Details
Font Management
- Uses system-installed Poppins and Lora fonts when available
- Provides automatic fallback to Arial (headings) and Georgia (body)
- No font installation required - works with existing system fonts
- For best results, pre-install Poppins and Lora fonts in your environment
Color Application
- Uses RGB color values for precise brand matching
- Applied via python-pptx's RGBColor class
- Maintains color fidelity across different systems
Frequently Asked Questions
What is Brand Guidelines?
Brand Guidelines is a free frontend development skill for AI coding agents. Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting. It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Brand Guidelines with Claude Code?
Copy the system prompt below and paste it into your CLAUDE.md file or Claude Code's custom instructions to activate Brand Guidelines.
Which AI coding agents work with Brand Guidelines?
Brand Guidelines is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Brand Guidelines free to use?
Yes, Brand Guidelines is completely free and open source. The full source is available on GitHub at https://github.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md. You only need a subscription to the AI agent you use it with.
