Make It Yours: Colors, Fonts, and Brand
Three ways to set the look of your site — Claude on the connector, the in-editor chat, or the Theme panel directly. Plus the brand-token system that drives them all.
Usman Haider

Every Sitelas template ships with a default theme. Three paths to make it yours — pick whichever matches where you already work.
Path A: Ask Claude
If you've installed the Sitelas connector on claude.ai, brand changes are a chat turn:
"Switch the palette to warm cream backgrounds, deep forest green accents, and a serif heading."
Claude calls apply_palette with a full palette spec — primary, secondary, accent, background, surface, text (primary / secondary / muted), border — plus typography pairing. For lighter overrides, apply_brand takes just color and typography deltas.
Path B: The in-editor AI chat
At yourname.sitelas.com/edit, the editor sidebar runs Gemini 2.5 Pro over the same MCP tools. Same prompt, same tools, different chat surface. Costs AI credits, which Pro includes $10 of each month. Driving the same tools from your own agent costs no Sitelas credits.
Path C: The Theme panel
If you'd rather pick from a UI, the editor's Theme panel exposes every brand token directly. Each template ships with curated presets you can switch between without committing.
What brand tokens drive
Sitelas's CSS variable system means brand changes apply consistently across every primitive — buttons, headers, footers, forms, cards. The token surface:
- Color: primary, secondary, accent, background, surface, text (primary / secondary / muted), border.
- Typography: heading and body font families, base size, line height.
- Theme-adaptive: tokens swap consistently across light / dark / warm modes.
Palette tips that hold up
- Start from one color. Ask Claude to build the rest of the palette around it.
- Contrast first. Light gray on white is the most common mistake. The fixture validator (
validate_fixture) flags WCAG AA violations automatically. - Cap accents. Two or three colors at most — primary, neutral, optional accent.
Type pairing tips
- Safest: one family for everything (e.g. Inter).
- Classic: serif headings + sans body.
- Avoid: more than two families, or decorative fonts in body copy.

Usman Haider
Founder of Sitelas — the website builder for AI agents.
