Theme Configuration Reference

Visual guide for configuring the AI Data Analyst appearance via instance.yaml under the theme: key. Each configurable property is mapped to a CSS variable that controls the corresponding UI element shown below.

Header Area

The top navigation bar with logo, title, and subtitle.

App Header
surface #FFFFFF font_primary Inter

AI Data Analyst

Ask questions about your data in natural language
text_secondary #6B7280 border #E5E7EB

Page Layout

Background, cards, buttons, and text hierarchy.

Page Structure
background #F5F7FA radius 6px surface #FFF

Analysis Results

Revenue grew 12% quarter over quarter, driven by the enterprise segment.

Run Query Export
primary #0073D1

Primary heading text

Secondary descriptive text shown below.

text_primary #1A253C

Chat / Query Interface

The conversational query area with input fields and response bubbles.

Chat Panel
Show me monthly revenue for 2025 broken down by region.
Here is the revenue breakdown. The top region is North America at $4.2M.
border #E5E7EB primary (focus) #0073D1
primary_light rgba(0,115,209,0.1)

Status Indicators

Success, warning, and error states used in badges, alerts, and inline messages.

Status Badges
Query completed — success: #10B77F Slow response — warning: #F59F0A Connection lost — error: #EA580C

Color Palette

Every configurable color with its YAML key, CSS variable, and default value.

primary
--primary
#0073D1
primary_dark
--primary-dark
#005BA3
primary_light
--primary-light
rgba(0, 115, 209, 0.1)
text_primary
--text-primary
#1A253C
text_secondary
--text-secondary
#6B7280
background
--background
#F5F7FA
surface
--surface
#FFFFFF
border
--border
#E5E7EB
success
--success
#10B77F
warning
--warning
#F59F0A
error
--error
#EA580C

Typography

Controlled by font_primary (the font-family stack) and font_url (a Google Fonts URL to load the typeface).

Font Weight Samples — Inter
400 The quick brown fox jumps over the lazy dog. 0123456789
500 The quick brown fox jumps over the lazy dog. 0123456789
600 The quick brown fox jumps over the lazy dog. 0123456789
700 The quick brown fox jumps over the lazy dog. 0123456789
Tip: To use a different font, set font_url to the Google Fonts stylesheet URL and font_primary to the corresponding family name with fallbacks, e.g. 'Roboto', system-ui, sans-serif.

Shape & Border Radius

The radius key sets --radius-md, the base border-radius for cards, buttons, inputs, and badges.

4px Sharp / Compact
6px Default
8px Moderate
12px Rounded
16px Pill-like

Quick Start YAML

Copy this block into your instance.yaml and adjust values to match your brand.

# instance.yaml - Theme configuration # All keys are optional; defaults are shown below. theme: # -- Brand colors -- primary: "#0073D1" # Main accent: buttons, links, focus rings primary_dark: "#005BA3" # Hover / active state for primary elements primary_light: "rgba(0, 115, 209, 0.1)" # Tinted backgrounds (chat bubbles, highlights) # -- Text -- text_primary: "#1A253C" # Headings and body text text_secondary: "#6B7280" # Descriptions, labels, meta text # -- Surfaces -- background: "#F5F7FA" # Page background surface: "#FFFFFF" # Cards, panels, header, modals border: "#E5E7EB" # Borders and dividers # -- Typography -- font_primary: "'Inter', system-ui, sans-serif" font_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" # -- Shape -- radius: "6px" # Base border-radius for UI elements # -- Status colors -- success: "#10B77F" # Completed, positive states warning: "#F59F0A" # Slow queries, caution states error: "#EA580C" # Failures, validation errors

Full Key Reference

Complete mapping of YAML keys to CSS custom properties.

YAML Key CSS Variable Default Preview
primary--primary#0073D1
primary_dark--primary-dark#005BA3
primary_light--primary-lightrgba(0,115,209,0.1)
text_primary--text-primary#1A253C
text_secondary--text-secondary#6B7280
background--background#F5F7FA
surface--surface#FFFFFF
border--border#E5E7EB
font_primary--font-primary'Inter', system-ui, sans-seriffont stack
font_urlfont_urlGoogle Fonts URLexternal URL
radius--radius-md6px
success--success#10B77F
warning--warning#F59F0A
error--error#EA580C