PTENES
MODULE 2.2

🏷️ brand-guidelines

Applies Anthropic's official colors and typography—Dark #141413, Light #faf9f5, Orange #d97757, Poppins and Lora fonts — for any artifact that benefits from a branded visual style.

6
Topics
~20
Minutes
Interm.
Level
Brand
Category
Anthropic Brand System COLORS · TYPOGRAPHY · APPLICATION Dark #141413 Light #faf9f5 Orange #d97757 Blue #6a9bcc Green #788c5d Mid Lite Typography Poppins → Headings (24pt+) Lora → Body text Output artifact Slides · HTML · PPTX PDF · Docs python-pptx · RGBColor · system fonts
1

🧩 What it is / what it does

The skill brand-guidelines applies the colors and typography official from Anthropic to any artifact that would benefit from having the brand's look and feel — slides, HTML pages, PDFs, documents.

Main Concept

brand-guidelines is a visual identity post-processor. It doesn't create content—it takes an artifact that's already been generated and systematically applies Anthropic's official colors and fonts, ensuring brand consistency across all outputs.

The fundamental distinction: while other skills create visuals, brand-guidelines standardizes according to a single, non-negotiable corporate standard.

🎨 Official Anthropic palette (from SKILL.md)
Primary Colors
Dark
#141413 — dark text and backgrounds
Light
#faf9f5 — light backgrounds and text on dark backgrounds
Mid Gray
#b0aea5 — secondary elements
Light Gray
#e8e6dc — subtle backgrounds
Accent Colors
Orange
#d97757 — primary accent
Blue
#6a9bcc — secondary accent
Green
#788c5d — tertiary accent
✏️ Official Anthropic typography
Headings (24pt+)
Source: Poppins
Fallback: Arial, sans-serif
Automatically applied to all headings ≥24pt
Body text
Source: Lora
Fallback: Georgia, serif
Applied to body text, paragraphs, and captions
Key Concepts
🎨
Official palette
5 fixed colors
✏️
Poppins + Lora
dual typography
🔄
Post-processing
applies in artifacts
🏢
Concrete brand
Anthropic, not generic
2

🎣 When it triggers

Claude invokes brand-guidelines when it detects requests related to brand colors, style guidelines, visual formatting, or company design standards.

Description triggers (from SKILL.md)
1
Brand colors or style guidelines

Explicit requests: "apply Anthropic’s colors," "use the brand guidelines," "Anthropic’s corporate style."

2
Visual formatting / company design standards

Corporate visual formatting contexts: "match the company's standards," "official visual formatting," "applied design standards."

3
Artifacts that "benefit" from the look and feel

When the artifact (slides, HTML, PDF, document) could clearly use a brand visual identity — even if the user doesn’t explicitly mention "brand guidelines".

4
Explicit keywords in the request

Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design.

💡
Tip: brand-guidelines is about ONE specific brand

The skill activates when there is intent to apply the Anthropic-specific pattern. To create generic visual themes (any brand, any color), the right skill is theme-factory.

✓ USE brand-guidelines when
  • ✓ Slides or PPTX need Anthropic branding
  • ✓ Internal HTML docs with corporate branding
  • ✓ The user mentions "Anthropic colors" or "brand guidelines"
  • ✓ Presentation artifact for Anthropic context
✗ DO NOT TRIGGER when
  • ✗ The user wants a custom theme (use theme-factory)
  • ✗ There's no visual artifact to style
  • ✗ Request is about another specific company/brand
  • ✗ Context is purely textual with no visual component
Key Concepts
🔑
Explicit trigger
brand/style/visual
🎯
Unique brand
Anthropic only
📎
Artifact present
something to style
⚡
Post-process
applies to output
3

🚀 How it improves your artifacts

The tangible value: any output generated by Claude has consistent brand visuals, without the user needing to specify every color or font manually.

📊 Impact by artifact type
Slides / PPTX
All non-text shapes receive a cycling accent: orange → blue → green. Headings use Poppins, body text uses Lora.
HTML / Web
CSS palette mapped to the 5 official colors. Gradients and backgrounds with Anthropic Dark/Light. Typography via Google Fonts.
Documents
Visual hierarchy preserved. Smart color selection based on the background (light/dark). Automatic fallback if fonts are missing.
Before × After
⬜ Without brand-guidelines
  • • Arbitrary colors with no brand guidelines
  • • System default font (Arial, Helvetica)
  • • Each output looks like it was made by different people
  • • Manual identity review required
🏷️ With brand-guidelines
  • ✓ Anthropic palette applied automatically
  • ✓ Poppins for headings, Lora for body text
  • ✓ Visual consistency across all outputs
  • ✓ Ready for immediate professional use
💡
Smart Color Selection

The skill automatically selects text color based on the background: light text (#faf9f5) on dark backgrounds (#141413), dark text on light backgrounds. No manual decision is needed.

Key Concepts
🎨
Consistency
same pattern every time
⚙️
Automatic
zero manual decisions
🏢
Professional
ready to use
🔄
Accent cycling
orange/blue/green
4

⚙️ How it works under the hood

Actual technical stack: python-pptx for manipulating presentations, RGBColor for color accuracy, and system fonts with automatic fallback.

⚙️ Color Module
  • ✓ Uses python-pptx RGBColor for exact precision
  • ✓ Colors applied via RGB values (not hex strings)
  • ✓ Color fidelity preserved across different systems
  • ✓ Accent cycling: non-text shapes receive orange/blue/green in a cycle
⚠️ Technical limitations
  • ✗ Poppins and Lora need to be preinstalled on the system
  • ✗ Arial/Georgia fallback if fonts are missing
  • ✗ Doesn't install fonts automatically
  • ✗ Results depend on the runtime environment
🔤 Font Management (from SKILL.md)
1
System first: uses Poppins and Lora installed on the system when available.
2
Automatic fallback: Arial for headings, Georgia for body text — always ensures readability.
3
Smart font application: applies Poppins only to headings ≥24pt, Lora to all body text.
4
Hierarchy preserved: text formatting (bold, italic, size) is preserved—only the family changes.
⚠️
Warning: system font dependency

For results with actual Poppins and Lora, install the fonts before using the skill. In environments without these fonts, the output uses Arial/Georgia — functionally correct, but visually not identical to the Anthropic standard.

Key Concepts
🐍
python-pptx
main engine
🎨
RGBColor
color accuracy
🔤
Poppins/Lora
local system
🔁
Fallback
Arial/Georgia
5

💬 Practical example + Ready-to-use PROMPT

Real-world scenario: create an HTML product presentation page with Anthropic branding, ready for corporate use.

Scenario

You need an HTML product page (landing page, one-pager, internal presentation) with Anthropic's official visual identity—without having to look up hex codes, choose fonts, or assemble a palette manually.

Prompt ready to paste into Claude Code
Crie uma página HTML de apresentação do produto "Claude API"
para uso interno na Anthropic.

Aplique as brand guidelines oficiais da Anthropic:
- Paleta de cores: Dark #141413, Light #faf9f5,
  Orange accent #d97757, Blue accent #6a9bcc, Green accent #788c5d
- Tipografia: Poppins para headings (24pt+), Lora para body text
- Formas e shapes com accent cycling: orange → blue → green

A página deve ter: hero section, 3 feature cards,
CTA e footer. Use o look-and-feel corporativo Anthropic.
Variant: apply to an existing presentation
Tenho um arquivo presentation.pptx de relatório trimestral.
Aplique as brand guidelines da Anthropic:
- Cores oficiais via python-pptx RGBColor
- Headings em Poppins (fallback Arial)
- Body text em Lora (fallback Georgia)
- Shapes não-texto em accent cycling: orange (#d97757),
  blue (#6a9bcc), green (#788c5d)
Preserve toda a hierarquia e formatação existente.
💡
Preinstall Poppins and Lora for the best results

On macOS: brew install --cask font-poppins font-lora. On Linux: download from Google Fonts and copy to ~/.fonts/. The skill works without them (fallback), but the result will use Arial/Georgia instead of Poppins/Lora.

Key Concepts
📝
Direct prompt
specify the colors
🔢
Explicit hex code
without ambiguity
🖼️
Target artifact
HTML or PPTX
🏷️
Brand context
Anthropic, corporate
6

🧬 Works well with / limitations

Position in the Track 2 — Identity ecosystem — and when brand-guidelines no is the right choice.

brand-guidelines × theme-factory — the fundamental difference
🏷️ brand-guidelines
  • • ONE specific brand: Anthropic
  • • Fixed, immutable palette (#141413, #faf9f5, #d97757…)
  • • Corporate fonts: Poppins / Lora
  • • Post-processing existing artifacts
  • • Predictable, standardized result
🎨 theme-factory (module 2.1)
  • • Any brand or visual identity
  • • Palette generated/customized as requested
  • • Flexible fonts, with no fixed standard
  • • Creates new themes from scratch
  • • Result varies by context

Use brand-guidelines when the result needs to follow Anthropic’s official standard. Use theme-factory to create design systems for any other case.

🖼️ Relationship with canvas-design (next: Module 2.3)

canvas-design operates at a different level: it creates visual compositions in Canvas/SVG with creative freedom. brand-guidelines and canvas-design complement each other:

Combined workflow

canvas-design creates the visual composition → brand-guidelines applies the Anthropic palette to it. The result: creative art with a corporate identity.

When NOT to combine

If the canvas-design composition uses intentionally non-Anthropic colors (abstract art, illustration with its own identity), brand-guidelines will distort the creative intent.

Which skills it works well with
⚛️
frontend-design (T1.1)
Creates the HTML structure → brand-guidelines applies Anthropic's identity to it. A classic workflow for internal pages.
🧱
web-artifacts-builder (T1.3)
Generates complete web artifacts → brand-guidelines is the post-processing step that ensures the artifacts match Anthropic's identity.
🖼️
canvas-design (T2.3)
Creative visual composition that can use brand-guidelines as a corporate standardization layer.
🌀
algorithmic-art (T2.4)
Generative art can be "branded" — but carefully: the aesthetic of algorithmic-art often conflicts with the restraint of the Anthropic palette.
✓ USE brand-guidelines for
  • ✓ Anthropic internal presentations
  • ✓ Docs and reports with corporate identity
  • ✓ Product pages in Anthropic’s visual style
  • ✓ Standardize outputs from multiple authors
✗ DO NOT USE brand-guidelines for
  • ✗ Create themes for other projects/brands
  • ✗ Generic "dark theme" requests (use theme-factory)
  • ✗ Artifacts without a visual component (plain text)
  • ✗ Creative art with an intentionally distinctive identity
Key Concepts
≠
≠ theme-factory
specific brand
+
+ canvas-design
creative + brand
🔄
Post-process
end of the pipeline
🚫
Fixed scope
Anthropic only

📋 Module 2.2 Summary

✓

brand-guidelines applies the colors and fonts official from Anthropic — Dark #141413, Light #faf9f5, orange/blue/green accents, Poppins and Lora

✓

Activates when the request mentions Anthropic brand colors, style guidelines, visual formatting, or company design standards

✓

Uses python-pptx with RGBColor for precision; system fonts (Poppins/Lora) with Arial/Georgia fallbacks

✓

Unlike theme-factory (generic themes), brand-guidelines is about ONE specific brand with a fixed palette

✓

Accent cycling in non-text shapes: orange → blue → green, maintaining visual interest while keeping brand consistency

✓

Works well with frontend-design, web-artifacts-builder, and canvas-design as a pipeline post-processing step

Next module:
🖼️
Module 2.3 — canvas-design
Visual compositions in Canvas and SVG — generative art creation and visual layouts with complete creative freedom.