---
name: infographic-themes
description: Engine substrate — theme registry for create_infographic. Not injected into agent prompts. Tuning happens in config/themes.yaml.
title: Infographic Themes
category: _meta
status: active
author: system
metadata:
  priority: 0
---
## Purpose

This skill is the engine substrate for visual themes applied by the
`create_infographic` tool. It is **not** a behavioral skill — the
agent never reads this body directly. The `_exec_create_infographic`
engine function reads `config/themes.yaml` at render time via
`SkillLoader.get_skill_config("infographic-themes", "themes")`.

## How it works

When a user-facing skill (e.g. `infographic-data`) tells the agent to
call `create_infographic(theme="bright", layout="stat-grid", ...)`,
the engine:

1. Resolves the named theme from `config/themes.yaml`.
2. Falls back to the built-in `bright` theme when theme is missing,
   empty, `"default"`, or not found in the registry — zero regression
   for callers that don't pass a theme.
3. Applies canvas, colors, fonts, and layout flags deterministically
   into both an SVG (saved to disk) and an HTML card (pushed to
   canvas) so the two surfaces match.

## Adding a new theme

Edit `config/themes.yaml`. Each theme declares:

- `label`, `description` — human-readable metadata
- `canvas.width`, `canvas.height` — SVG viewport in pixels
- `colors.*` — hex strings without the `#` prefix
- `fonts.title`, `fonts.body` — font family names. Pick web-safe stacks
  that work without user installs (`Inter, Calibri, Arial`,
  `Georgia, serif`, `JetBrains Mono, Consolas, monospace`).
- `sizes.*` — pixel sizes for headline / number / label / caption
- `layout.*` — flags the engine reads (`accent_bar`, `card_radius`,
  `divider`, `card_shadow`, etc.)

No code change required — the engine reads YAML on every render.

## Rules

- Themes must declare every key the engine expects. Partial themes
  fall through to `bright` rather than render broken output.
- Font stacks must end in a generic family (`sans-serif`, `serif`,
  `monospace`) so missing fonts degrade gracefully.
- Hex colors are 6 chars, no `#` prefix, uppercase.
- Light themes should keep contrast ratio ≥ 4.5:1 for body text;
  dark themes ≥ 7:1 for headlines on dark backgrounds.