brand-guidelines
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
Accent Colors:
- 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
More from almeidamarcell/claude-code-skills
entire
Capture AI agent sessions in your git workflow. Use for setup, rewinding to checkpoints, exploring session history, and troubleshooting.
16breadboarding
Transform a workflow description into affordance tables showing UI and Code affordances with their wiring. Use to map existing systems or design new ones from shaped parts.
6cheap-model-testing
When working on any application that integrates with LLMs or pay-per-usage APIs, always use the cheapest available model during development and testing. Remind to upgrade to a production model before deployment.
6web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
6animejs
When writing JavaScript animations using anime.js v4, including DOM element animations, timelines, stagger effects, scroll-triggered animations, SVG animations, text animations, draggable elements, layout transitions, or any motion/transition effects on websites. Also use when the user says "animate," "animation library," "anime.js," "stagger," "timeline animation," "scroll animation," "text animation," "draggable," or "motion effects.
5shaping
Use this methodology when collaboratively shaping a solution with the user - iterating on problem definition (requirements) and solution options (shapes).
5