AI Prompt Template for On-Brand Charts & Data Visuals
Generate structured text specifications, charting rules, color token mappings, and typography guidelines to style on-brand data visuals with AI.
Objective: Create a reusable AI prompt for language models that generates structured charting rules, visual hierarchy guidelines, and brand styling specifications (color token mapping, typography, axis treatments, gridlines, and legend placements) to ensure quantitative data visuals align with brand guidelines.
How the Base Prompt Was Formed
The base prompt was formed through these deliberate steps:
- Defined the core analytical narrative (
{{data_story}}) so the language model recommends a chart structure that accurately serves the data communication goal before aesthetics are applied. - Bound chart elements directly to brand color tokens: mapped primary, secondary, and accent colors (
{{primary_color}},{{secondary_color}},{{accent_color}}) to data series, baselines, and callouts. - Enforced typographic standards by specifying the approved brand body typeface (
{{body_font}}) for ticks, axis titles, and data labels. - Mandated functional layout rules: explicitly instructed the model to output text specifications for axis treatments, gridline subtlety (opacity/weight), and legend orientation to maintain high data-ink ratios.
- Kept the prompt strictly structured as a text-generation instruction, producing styling parameters and rules rather than attempting raster image rendering.
Language models excel at text-based reasoning about chart logic, accessibility, and visual hierarchies. Use this prompt to generate complete design specifications and styling tokens, then implement the rules inside charting libraries (e.g., Recharts, Chart.js, Vega-Lite) or presentation tools.
Base Prompt Template
Recommend a chart type and styling rules for showing {{data_story}} in {{brand_name}}'s brand style. Use the brand color palette ({{primary_color}}, {{secondary_color}}, {{accent_color}}) and {{body_font}} for labels. Specify axis treatment, gridline visibility, and legend placement.
Snippets and Variables
| Element | Type | Example Value | Description |
|---|---|---|---|
| {{data_story}} | variable | monthly subscription growth over the past year | The metric, trend, comparison, or insight being conveyed |
| {{brand_name}} | variable | Bock Coffee | The name of the brand or company |
| {{primary_color}} | variable | #6B4226 | Core brand color used for primary data series |
| {{secondary_color}} | variable | #C98A4B | Secondary color for baseline or comparison series |
| {{accent_color}} | variable | #E8734A | Highlight color for peak values, callouts, or targets |
| {{body_font}} | variable | Inter | Standard brand body typeface for labels, axes, & legends |
Keep gridlines low-contrast (e.g., subtle 10% opacity neutrals) and reserve your brand's bold accent color exclusively for key insight callouts or milestones.
Filled Base Prompt
Recommend a chart type and styling rules for showing monthly subscription growth over the past year in Bock Coffee's brand style. Use the brand color palette (#6B4226, #C98A4B, #E8734A) and Inter for labels. Specify axis treatment, gridline visibility, and legend placement.
Extended Example Values
-
{{data_story}}
- monthly subscription growth over the past year
- customer acquisition cost breakdown across 5 marketing channels
- quarterly net revenue retention compared against industry benchmarks
- supply chain carbon footprint reduction year-over-year
-
{{brand_name}}
- Bock Coffee
- Apex Biotech
- FinScale Analytics
- Terra Energy
-
{{primary_color}}
- #6B4226
- #0F2D59
- #111827
- #1B4D3E
-
{{secondary_color}}
- #C98A4B
- #4A90E2
- #6B7280
- #74A57F
-
{{accent_color}}
- #E8734A
- #00C49F
- #6366F1
- #F59E0B
-
{{body_font}}
- Inter
- Roboto
- Source Sans 3
- Plus Jakarta Sans
On This Page