Brand Theming for AI Agent Visualizations

When AI agents generate visualizations for different clients or projects, consistent brand identity matters. This guide describes the brand module architecture — a pattern for defining brand themes once and applying them across all three visualization tools (Infographic MCP, Chart MCP, Mermaid MCP).

The Problem

Each visualization tool has its own theming mechanism:

• Infographic MCP — registerTheme() JS API or themeConfig parameter
• Chart MCP — theme + style.palette + style.backgroundColor
• Mermaid MCP — themeVariables directive + backgroundColor parameter

Without coordination, agents must manually translate brand colors into each tool’s format on every render. The brand module pattern solves this.

Brand Module Architecture

A brand module is a JavaScript file that registers a brand’s visual identity with the Infographic engine and exports configuration objects for the other tools.

brands/
  brad-wenner-digital.js
  dungeon-church.js
  commune.js

Structure of a brand module

// brands/dungeon-church.js
import {
  registerTheme,
  registerPalette,
  registerFont,
  registerPattern,
  registerResourceLoader,
  generateThemeColors
} from '@antv/infographic';
 
// === Brand Constants ===
const BRAND = {
  name: 'dungeon-church',
  accent: '#ff2600',
  bg: '#000000',
  text: '#ffffff',
  textMuted: '#999999',
  style: 'gothic',    // rough, clean, playful, etc.
  fonts: {
    heading: 'Cinzel',
    body: 'Inter'
  }
};
 
// === Infographic Registration ===
const themeColors = generateThemeColors({
  colorPrimary: BRAND.accent,
  colorBg: BRAND.bg,
  isDarkMode: true
});
 
registerFont({ name: 'Cinzel', source: 'google', weights: [400, 700] });
registerFont({ name: 'Inter', source: 'google', weights: [400, 600] });
 
registerPalette(BRAND.name, {
  category: [BRAND.accent, '#cc0000', '#990000', '#660000', '#ff4444'],
  diverging: ['#ff2600', '#666666', '#0044cc']
});
 
registerTheme(BRAND.name, {
  colorPrimary: BRAND.accent,
  colorBg: BRAND.bg,
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    fill: BRAND.text,
    fontFamily: BRAND.fonts.heading
  },
  base: {
    text: {
      fontFamily: BRAND.fonts.body,
      fontSize: 14,
      fill: BRAND.text
    },
    shape: {
      stroke: '#333333',
      strokeWidth: 1
    }
  },
  item: {
    label: { fill: BRAND.text, fontWeight: 'bold' },
    desc: { fill: BRAND.textMuted },
    value: { fill: BRAND.accent, fontWeight: 'bold' }
  },
  stylize: {
    rough: {
      roughness: 2,
      bowing: 3,
      fill: 'hachure',
      fillWeight: 2
    }
  }
});
 
// Optional: logo injection
registerResourceLoader(async ({ type, data }) => {
  if (type === 'icon' && data === 'brand-logo') {
    // Load SVG from Forgejo or base64
    const response = await fetch('https://git.brads.house/commune/assets/raw/branch/main/dungeon-church-logo.svg');
    const svgText = await response.text();
    const parser = new DOMParser();
    return parser.parseFromString(svgText, 'image/svg+xml').documentElement;
  }
});
 
// === Chart MCP Config ===
export const chartConfig = {
  theme: 'dark',
  style: {
    palette: [BRAND.accent, '#cc0000', '#990000', '#ff4444', '#ff6644'],
    backgroundColor: BRAND.bg,
    texture: 'rough'  // matches the gothic aesthetic
  }
};
 
// === Mermaid Config ===
export const mermaidThemeVariables = {
  primaryColor: BRAND.accent,
  primaryTextColor: BRAND.text,
  primaryBorderColor: '#660000',
  lineColor: '#666666',
  secondaryColor: '#1a1a1a',
  tertiaryColor: '#0d0d0d',
  fontFamily: `${BRAND.fonts.body}, sans-serif`,
  fontSize: '14px',
  background: BRAND.bg,
  mainBkg: '#1a0000',
  nodeBorder: '#440000',
  textColor: BRAND.text,
  nodeTextColor: BRAND.text,
  edgeLabelBackground: '#1a1a1a'
};
 
export const mermaidBgColor = BRAND.bg;
 
// === Infographic themeConfig (for MCP parameter) ===
export const infographicThemeConfig = {
  colorPrimary: BRAND.accent,
  colorBg: BRAND.bg,
  title: { fill: BRAND.text, fontFamily: BRAND.fonts.heading },
  base: { text: { fill: BRAND.text, fontFamily: BRAND.fonts.body } },
  item: { value: { fill: BRAND.accent } }
};

Usage pattern

An agent selects the brand module based on context (client name, project), then applies the appropriate config to each tool:

import { chartConfig, mermaidThemeVariables, mermaidBgColor, infographicThemeConfig } from './brands/dungeon-church.js';
 
// Chart MCP call
generateChart({ type: 'bar', ...chartConfig, data: [...] });
 
// Mermaid — inject themeVariables into diagram code
const mermaidCode = `
flowchart TD
    A[Ritual] --> B[Summoning]`;
 
// Infographic MCP — pass themeConfig
generateInfographic({
  template: 'list-waterfall-badge-card',
  themeConfig: infographicThemeConfig,
  data: { ... }
});

Real Brand Examples

Brad Wenner Digital

Full specification: Digitech Branding: Chartreuse Color System

Property	Value
Accent	#d8e84e (chartreuse)
Background	#151719 (near-black)
Text	#ffffff
Style	Clean, modern
Font	System/sans-serif

Dungeon Church

Property	Value
Accent	#ff2600 (red)
Background	#000000 (pure black)
Text	#ffffff
Style	Gothic, rough
Font heading	Cinzel (serif)
Logo art	Ouroboros + horned crest by Heavy Symmetry (in Forgejo)

Cross-Tool Theming Comparison

Capability	Infographic MCP	Chart MCP	Mermaid MCP
Primary color	colorPrimary	style.palette[0]	primaryColor
Background	colorBg	style.backgroundColor	background + backgroundColor param
Font family	base.text.fontFamily	❌ Not supported	fontFamily
Custom palette	registerPalette()	style.palette: [...]	Limited (primary/secondary/tertiary)
Sketch style	stylize.rough	style.texture: 'rough'	❌ Not supported
Dark mode	Theme config	theme: 'dark'	theme: 'dark' or themeVariables
Custom fonts	registerFont()	❌	Font must be available in renderer
Logo injection	registerResourceLoader()	❌	❌
Custom patterns	registerPattern()	❌	❌

Key insight: Infographic MCP has the deepest theming capabilities. Chart MCP covers the essentials (palette + background + texture). Mermaid supports color theming well but lacks font loading and advanced styling.

Upcoming: themeConfig MCP Parameter

A themeConfig parameter is being added to the generate_infographic MCP tool. This will allow passing the full theme configuration inline without needing HTML post-processing or pre-registered themes:

{
  "template": "list-waterfall-badge-card",
  "themeConfig": {
    "colorPrimary": "#ff2600",
    "colorBg": "#000000",
    "base": { "text": { "fill": "#ffffff" } }
  },
  "data": { "..." }
}

This eliminates the main friction point in brand theming — no JavaScript execution needed, just pass the config alongside your data.

Implementation Checklist

1. Define brand constants — accent, bg, text colors, fonts, style keywords
2. Use generateThemeColors() — derive harmonious palette from primary color
3. Register fonts — registerFont() for custom typography
4. Create theme — registerTheme() for full Infographic control
5. Export chart config — palette + backgroundColor for Chart MCP
6. Export mermaid variables — map brand colors to themeVariables
7. Test across all three tools — render one sample with each to verify consistency

---

Reference compiled 2026-02-19 for commune AI agent workflows.