---
name: brand-token-template
description: "Template for recording a company's verified design tokens, fonts, logo assets, and voice in an Agent Skill. Use when extracting a website's brand for decks or other visual work without copying private brand data."
---

# Brand-token skill template

Copy this structure to a new folder named `<company-slug>-brand`, then change frontmatter `name` to the folder's exact kebab-case name. Replace **every** angle-bracket placeholder with information from the organization's authorized source. This template deliberately contains no real company's brand.

## Frontmatter to put in the new brand skill

```yaml
---
name: <company-slug>-brand
description: "Verified brand tokens for <ORGANIZATION_NAME>. Use when building branded HTML decks or visual documents for this organization."
metadata:
  source_url: "<OFFICIAL_BRAND_URL>"
  extracted_on: "<YYYY-MM-DD>"
---
```

Keep the copied skill's body short and structured as below. Metadata values are provenance, not a substitute for checking whether a site or asset has changed.

## Colors

| Token | Value | Typical use | Evidence |
| --- | --- | --- | --- |
| `bg_primary` | `<LIGHT_HEX>` | Main light slide background | `<CSS_VARIABLE_OR_ELEMENT>` |
| `bg_dark` | `<DARK_HEX>` | Cover or dark slide | `<CSS_VARIABLE_OR_ELEMENT>` |
| `ink` | `<INK_HEX>` | Text on light slides | `<CSS_VARIABLE_OR_ELEMENT>` |
| `text_muted` | `<MUTED_COLOR>` | Secondary text | `<CSS_VARIABLE_OR_ELEMENT>` |
| `accent` | `<ACCENT_HEX>` | CTA and key emphasis | `<CSS_VARIABLE_OR_ELEMENT>` |
| `accent_hover` | `<ACCENT_HOVER_HEX>` | Interactive hover | `<CSS_VARIABLE_OR_ELEMENT>` |
| `border_light` | `<BORDER_HEX>` | Hairlines and cards | `<CSS_VARIABLE_OR_ELEMENT>` |

Use extra tokens only when they reflect an observed visual rule. Check accessible contrast in the finished design; do not assume that a button color is readable as small text.

## Typography

- Display: `<DISPLAY_FONT>` with `<LICENSE_OR_PUBLIC_HOSTING_NOTE>`.
- Body: `<BODY_FONT>` with `<LICENSE_OR_PUBLIC_HOSTING_NOTE>`.
- Mono or label font, if used: `<LABEL_FONT>`.
- Font source: `<FONT_STYLESHEET_OR_SELF_HOSTED_URL>`.
- Safe fallback stack: `<FONT_FALLBACK_STACK>`.

Do not redistribute proprietary font binaries just because a browser can download them. Record a licensed fallback if the brand font cannot legally or reliably travel with the deck.

## Asset registry

| Asset | Absolute URL | Where it works |
| --- | --- | --- |
| Logo for light background | `<VERIFIED_LIGHT_LOGO_URL>` | Light slides |
| Logo for dark background | `<VERIFIED_DARK_LOGO_URL>` | Dark slides |
| Square icon | `<VERIFIED_ICON_URL>` | Small branding |
| Hero image, if provided | `<VERIFIED_HERO_IMAGE_URL>` | Cover |
| Share image, if provided | `<VERIFIED_SHARE_IMAGE_URL>` | Metadata |

Use real `<img src="...">` URLs for logos after checking they load; do not manually copy or redraw logo SVG paths. Mark optional missing assets as "not found" rather than making one up. Resolve relative paths against the original page URL.

## Voice and layout rules

- Official tagline: `<VERIFIED_TAGLINE_OR_NOT_FOUND>`.
- Official description: `<VERIFIED_DESCRIPTION_OR_NOT_FOUND>`.
- Tone: `<TWO_OR_THREE_RULES_BACKED_BY_PUBLIC_COPY>`.
- Composition: `<OBSERVED_SPACING_OR_MOTIF>`.
- Don't: `<ACTUAL_RESTRICTION_IF_DOCUMENTED>`.

Do not invent a mission statement or customer result from visual cues.

## CSS mapping for a deck

```css
:root {
  --bg: <LIGHT_HEX>;
  --dark: <DARK_HEX>;
  --ink: <INK_HEX>;
  --accent: <ACCENT_HEX>;
  --accent-hover: <ACCENT_HOVER_HEX>;
  --border: <BORDER_HEX>;
  --muted: <MUTED_COLOR>;
  --font-display: <DISPLAY_FONT_STACK>;
  --font-body: <BODY_FONT_STACK>;
}
```

Replace placeholders before using this CSS. Keep the extracted values and their source together so the next editor can update them without guessing. Use `html-presentations` for a responsive deck, then visually verify logos, colors, fonts, and contrast in the browser.