## Header Area

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

App Header
surface #FFFFFF font_primary Inter
AI

### 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-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 |
font_primary | --font-primary | 'Inter', system-ui, sans-serif | font stack
font_url | font_url | Google Fonts URL | external URL
radius | --radius-md | 6px |
success | --success | #10B77F |
warning | --warning | #F59F0A |
error | --error | #EA580C |