Anthropic brand styling

Contract

When an artifact must carry Anthropic's look-and-feel, render it with the EXACT brand hex values and the exact type stack below — never approximate, round, or substitute a "close enough" color or font. Apply whenever a task asks for Anthropic-branded colors, typography, or visual style.

Rules

Core (neutral) palette — hex, always lowercase

| Token | Hex | Use for | |---|---|---| | Dark | #141413 | primary text, dark backgrounds | | Light | #faf9f5 | light backgrounds, text on dark surfaces | | Mid gray | #b0aea5 | secondary elements, muted text, borders | | Light gray | #e8e6dc | subtle/section backgrounds, callout boxes |

Accent palette

| Token | Hex | Rank | |---|---|---| | Orange | #d97757 | PRIMARY accent — the first accent you reach for | | Blue | #6a9bcc | secondary accent | | Green | #788c5d | tertiary accent |

• The primary accent is orange #d97757 — never a generic orange like #ff6600,

#ff7f50 (coral), or #e67e22.

• When coloring several non-text shapes (bars, cards, chips), cycle the accents in

this fixed order and repeat: orange #d97757 → blue #6a9bcc → green #788c5d → orange #d97757 → blue #6a9bcc → …

Typography

• Headings (24pt and larger): Poppins, with Arial as the fallback.
• Body text: Lora, with Georgia as the fallback.
• Always declare the fallback explicitly, ending in a generic family:
• Headings: font-family: Poppins, Arial, sans-serif;
• Body: font-family: Lora, Georgia, serif;
• Poppins is sans-serif; Lora is serif. Do not swap them.

Foreground/background pairing

• Body or heading text on a LIGHT surface is #141413.
• Text on a DARK surface (#141413 background) is #faf9f5.
• Never use pure black #000000 or pure white #ffffff for brand text or

backgrounds — the brand neutrals #141413 / #faf9f5 replace them everywhere.

Code-target conversions

• CSS: emit the lowercase hex string directly (#d97757).
• python-pptx: convert each hex to RGBColor(0xRR, 0xGG, 0xBB) — e.g. #d97757

→ RGBColor(0xD9, 0x77, 0x57), #141413 → RGBColor(0x14, 0x14, 0x13).

• Tailwind/CSS variables: map a semantic name to the exact hex; do not alias to a

built-in palette entry (gray-900, orange-500).

Worked examples

Each BEFORE is the bare model's most common wrong default; AFTER conforms.

Light surface + text

css
/* BEFORE — generic web defaults */
.page { background: #ffffff; color: #000000; }

/* AFTER — Anthropic neutrals */
.page { background: #faf9f5; color: #141413; }

Primary accent button

css
/* BEFORE — a generic "orange" */
.btn-primary { background: #ff6600; color: #ffffff; }

/* AFTER — brand orange + brand light */
.btn-primary { background: #d97757; color: #faf9f5; }

Heading font

css
/* BEFORE — falls back to a common UI font */
h1, h2 { font-family: Helvetica, Arial, sans-serif; }

/* AFTER — Poppins with declared fallback */
h1, h2 { font-family: Poppins, Arial, sans-serif; }

Body font

css
/* BEFORE — a generic serif (or worse, the heading font reused) */
p { font-family: Georgia, "Times New Roman", serif; }

/* AFTER — Lora with declared fallback */
p { font-family: Lora, Georgia, serif; }

Dark hero banner

css
/* BEFORE — black bg, white text */
.hero { background: #000000; color: #ffffff; }

/* AFTER — brand dark + brand light */
.hero { background: #141413; color: #faf9f5; }

Multi-series chart (accent cycle)

text
BEFORE: bars colored #1f77b4, #ff7f0e, #2ca02c (matplotlib defaults)
AFTER:  bar 1 #d97757, bar 2 #6a9bcc, bar 3 #788c5d  (orange → blue → green)

Neutral grays

css
/* BEFORE — generic grays */
.border { border-color: #cccccc; }
.subtle-bg { background: #f0f0f0; }

/* AFTER — brand grays */
.border { border-color: #b0aea5; }   /* mid gray */
.subtle-bg { background: #e8e6dc; }   /* light gray */

python-pptx fill

python
# BEFORE — raw black + a guessed orange
shape.fill.fore_color.rgb = RGBColor(0, 0, 0)

# AFTER — brand dark, exact channels
shape.fill.fore_color.rgb = RGBColor(0x14, 0x14, 0x13)
accent.fill.fore_color.rgb = RGBColor(0xD9, 0x77, 0x57)  # #d97757

Edge cases & exceptions

• Only one accent needed: use orange #d97757. It is always the first pick.
• More shapes than three accents: keep cycling — card 4 is orange #d97757,

card 5 is blue #6a9bcc, and so on. Do not invent a fourth accent.

• Text legibility on an accent fill: put #faf9f5 text on orange/green/blue

fills (not #ffffff), and #141413 if the design calls for dark text.

• A "subtle" or "callout" background that is not the main page: that is light

gray #e8e6dc, distinct from the page background #faf9f5.

• Fonts unavailable in the environment: the fallback IS the plan — Arial for

headings, Georgia for body. Keep Poppins/Lora first in the stack regardless.

• Asked for the "secondary"/"tertiary" accent: secondary is blue #6a9bcc,

tertiary is green #788c5d — never a tint of the orange.

Do / Don't

• Never #000000 / #ffffff. Always #141413 / #faf9f5.
• Never a generic orange (#ff6600, #ff7f50). Always #d97757.
• Never Helvetica, Inter, Roboto, Times, or Calibri. Always Poppins (headings) /

Lora (body).

• Never drop the fallback. Always declare Poppins, Arial, … and Lora, Georgia, ….
• Never reorder the accent cycle. Always orange → blue → green.
• Never uppercase or 3-digit hex (#FFF, #D97757). Always 6-digit lowercase.

Common mistakes

• Defaulting to #ffffff/#000000 because they are the web defaults.
• Picking a "nice orange" from memory instead of the exact #d97757.
• Using Arial/Helvetica/Inter as the heading font because they are common.
• Reusing the heading font for body text instead of switching to Lora.
• Coloring all chart series the same, or in matplotlib/d3 default order, instead

of the orange→blue→green cycle.

• Substituting generic grays (#ccc, #999) for #b0aea5 / #e8e6dc.
• Emitting uppercase or shorthand hex.

Quick checklist

• ] Backgrounds/text use #faf9f5 and #141413, never #fff/#000.
• ] Primary accent is exactly #d97757.
• ] Accents cycle orange #d97757 → blue #6a9bcc → green #788c5d.
• ] Headings = Poppins (Arial fallback); body = Lora (Georgia fallback).
• ] Grays are #b0aea5 (mid) and #e8e6dc (light).
• ] All hex is 6-digit lowercase.