Brand Kits

Apply consistent branding to your charts with custom colors, fonts, and styling. Brand kits work with both bare charts and full card compositions.

Built-in Presets

Six presets are available immediately without creating a custom kit. Pass the preset name as brandKitId:

Preset ID	Description
obsidian	Dark slate background, warm ember accent — high contrast
linen	Light warm background, subtle grid — clean and readable
polar	Cool blue-grey palette, suited for analytical dashboards
studio	Neutral studio tones, versatile across light and dark contexts
ember	Warm orange-red palette, energetic and bold
harbor	Muted coastal tones, calm and professional

Using a Preset

json

{
  "type": "bar",
  "brandKitId": "obsidian",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{ "label": "Revenue", "data": [12000, 15000, 18000] }]
  }
}

Brand Kit + Card Composition

Brand kits apply their palette, font, and styling to both the chart region and the card shell (header, KPI strip, footer). This is the recommended combination for polished, on-brand outputs:

json

{
  "type": "bar",
  "width": 800,
  "height": 480,
  "brandKitId": "obsidian",
  "header": {
    "eyebrow": "Q4 2024",
    "title": "Monthly Revenue",
    "badge": { "text": "+14%", "backgroundColor": "#166534", "color": "#dcfce7" }
  },
  "kpiStrip": [
    { "label": "MRR",    "value": "$25,000", "color": "#22c55e" },
    { "label": "Growth", "value": "+14%",    "color": "#22c55e" },
    { "label": "Churn",  "value": "1.2%",    "color": "#f87171" }
  ],
  "footer": { "left": "chart-output.com", "right": "Updated daily" },
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
    "datasets": [{ "label": "Revenue", "data": [12000, 15000, 18000, 22000, 25000] }]
  }
}

See Card Composition for the full card field reference.

Creating a Custom Brand Kit

Via the Dashboard

Go to Brand Kits in your dashboard
Click Create kit
Set colors, font, grid style, and corner rounding
Save — you'll receive a UUID to use as brandKitId
Optionally click Apply to Playground to preview the kit on your chart spec

Via the API

json

POST /api/v1/brand-kits
{
  "name": "Acme Corp",
  "primaryColor": "#e85729",
  "accentColor": "#3a6cf5",
  "font": "Inter",
  "gridStyle": "subtle",
  "rounding": 4,
  "isDefault": false
}

The response includes the id (UUID) to use as brandKitId in render requests.

Kit Fields

Field	Description
`primaryColor`	Main chart elements (bars, lines, primary series)
`accentColor`	Secondary elements and highlights
`font`	Font family applied to all text on the chart and card
`gridStyle`	`"none"` or `"subtle"`
`rounding`	Bar corner radius in pixels (0, 4, or 8)
`isDefault`	When true, applied automatically to all renders that omit `brandKitId`