🎨

Brand Style Applier

Verified

by OpenClaw

Configure your brand once (colors, fonts, voice rules) and have the agent apply it consistently to every artifact it produces — emails, slide decks, HTML pages, social posts. Generalized from Anthropic's brand-guidelines example skill so you can plug in your own brand instead of theirs.

brandstylebrandingcolorstypographyvoicedesignconsistency
View on GitHub

Brand Style Applier

Keep brand consistency across everything the agent produces.

Setup — one-time per user

The user defines their brand once in the skill's configEntries (or paste it in chat). Required fields:

brand_name: "Acme Corp"
colors:
  primary: "#2563eb"
  primary_text: "#0f172a"
  background: "#f8fafc"
  accent_1: "#f59e0b"
  accent_2: "#10b981"
fonts:
  heading: "Inter, system-ui, sans-serif"
  body: "Inter, system-ui, sans-serif"
  mono: "JetBrains Mono, monospace"
voice:
  tone: "professional, friendly, never salesy"
  avoid_words: ["leverage", "synergy", "robust", "world-class"]
  prefer_words: ["help", "use", "build"]
  reading_level: "8th grade"
logo_url: "https://acme.com/logo.svg"   # optional

If the user hasn't configured this yet, ask them to paste the brand spec or generate a starter from their website.

How to apply

To HTML / CSS

Use the brand colors as CSS custom properties:

<style>
  :root {
    --color-primary: <colors.primary>;
    --color-text: <colors.primary_text>;
    --color-bg: <colors.background>;
    --color-accent-1: <colors.accent_1>;
  }
  body { font-family: <fonts.body>; color: var(--color-text); background: var(--color-bg); }
  h1, h2, h3 { font-family: <fonts.heading>; }
  .accent { color: var(--color-accent-1); }
</style>

To slide decks (.pptx via the pptx skill)

  • Title slides: heading font + primary color background.
  • Body slides: body font, primary_text color on background.
  • Charts/shapes: cycle through accent_1, accent_2.

To emails

  • HTML email: inline the CSS above (email clients strip <style>).
  • Plain text: just enforce voice rules (no need for colors).

To social posts

  • Use the voice rules. Strip avoid_words, prefer the prefer_words list when natural.
  • Match the brand's reading level.

Voice enforcement pass

After writing any text, run a self-check:

  1. Scan for words in voice.avoid_words → suggest replacements.
  2. Check sentence length — long sentences violate "8th grade" reading level.
  3. Check tone matches voice.tone — professional means no slang; friendly means no jargon.

Output format

When producing an artifact, prefix the response with a 2-line brand-applied summary:

[Brand: Acme Corp]
[Voice check: PASS — no avoid_words, reading level matches]

Anti-patterns

  • Don't pick colors that aren't in the brand spec — even if they "look better."
  • Don't use Google Fonts the user didn't specify.
  • Don't override the voice rules just because a draft sounds bland — the brand chose those rules.