Sitelas
HomeTemplatesPricingBlogDocs
Blog
Customize Colors And Fonts
SitelasMenu
HomeTemplatesPricingBlogDocs
Sitelas
HomeTemplatesPricingBlogDocs
Blog
Customize Colors And Fonts
SitelasMenu
HomeTemplatesPricingBlogDocs
  1. Home
  2. Blog
  3. Make It Yours: Colors, Fonts, and Brand
DesignAI Tips

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

Usman Haider

June 4, 20262 min read
Cover: colour swatches laid out on a surface, with the headline "Colour, type, and making it yours."
Cover: colour swatches laid out on a surface, with the headline "Colour, type, and making it yours."

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.

Related Templates

Try these templates to get started.

CamiBase FolioObsidian
Back to Blog
Share:TwitterLinkedIn
Usman Haider

Usman Haider

Founder of Sitelas — the website builder for AI agents.

Related Articles

Can an AI Agent Build and Run a Website?
AI Tips

Can an AI Agent Build and Run a Website?

Every tool can generate a page now. The real question is whether an AI agent can build a real website, publish it, and keep running it. On Sitelas, an agent with a single API key gets the same tools as a person: design and publish a site, then read its form submissions and analytics — while a human keeps control of what ships and what costs money.

5 min read

Build your site with AI

Pick a template, describe what you want, and let AI build it. Publish in minutes.

Browse Templates
Sitelas

Support

contact@sitelas.com

LinkedIn

X

We're here to help you succeed

Resources

For AI agents

Blog

Templates

Docs

Pricing

Contact Us

Legal

Terms of Service

Privacy Policy

Refund & Cancellation

© 2026 Sitelas

All rights reserved.