---
name: anthropic-brand-style
source: https://app.decimal.ai/s/anthropic-brand-style@1/SKILL.md
source_sha256: 71469a914dff
---

# 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.