Make It Yours: Colors, Fonts, and Brand

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 from your $5 free balance.

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.