Branding
Update your site's colors, fonts, and logo to match your brand. Changes apply instantly across every page.
Opening branding settings
Click the Branding or Design icon in the left sidebar (it looks like a paint swatch). The branding panel opens on the right.
Logo
Click Upload logo to add your logo. Supported formats: PNG, SVG, WebP, JPG.
For best results:
- Use a PNG or SVG with a transparent background
- Upload at 2x the display size (e.g. if your logo shows at 160px wide, upload at 320px wide)
If you have separate light and dark versions, you can upload both. ClearCMS will use the right one depending on your header's background color.
Logo color extraction
When you upload a logo, ClearCMS automatically extracts the dominant brand colors from the image. You'll see suggested colors appear below the logo field — click Apply all to use them as your primary, secondary, and accent colors, or click individual swatches to apply them one at a time.
Colors
Your site uses a small set of named colors. Changing these updates every block on your site that uses them.
| Color | Used for |
|---|---|
| Primary | Buttons, links, accents |
| Background | Page background |
| Surface | Cards, panels, section backgrounds |
| Text | Body text |
| Heading | Headline text |
Click any color swatch to open the color picker. You can type in a color code (e.g. #1a56db) or use the picker to choose visually.
Simple vs Advanced mode
The color section has two modes, toggled in the top-right corner:
- Simple -- you only set a primary color. ClearCMS builds the rest of the color scheme from it. This is the fastest way to get a matching set of colors.
- Advanced -- gives you individual control over every color (primary, secondary, accent, background, and text).
Light / dark toggle
In Simple mode, a light/dark toggle lets you switch between a light background (#ffffff) and a dark background (#111827). ClearCMS re-derives all other colors to match.
Contrast checking
ClearCMS automatically checks that text is readable on colored backgrounds. When you pick a primary color, it chooses a matching text color (white or dark) that is easy to read. You do not need to check this yourself.
Fonts
Choose fonts for headings and body text separately. ClearCMS includes a library of Google Fonts.
Font pair presets
At the top of the typography section, you'll see curated font pair presets — pre-selected combinations that work well together. Click a preset to apply both the heading and body font at once:
| Preset | Heading | Body |
|---|---|---|
| Modern | Inter | Inter |
| Classic | Playfair Display | Source Sans 3 |
| Playful | Poppins | Nunito |
| Professional | Merriweather | Open Sans |
| Minimal | Geist | Geist |
| Bold | Montserrat | Roboto |
You can also pick fonts individually. Click Heading font or Body font to open the font selector. Type to search by name (e.g. "Inter", "Playfair Display"). Click a font to preview it on your site.
Font size and line spacing can be adjusted with the sliders below the font selector.
Applying changes
Branding changes are saved immediately as you make them, but are not published to your live site until you click Publish in the top bar.
This means you can experiment with colors and fonts without affecting what visitors see.
Branding changes are saved as a draft. They will not appear on your live site until you click Publish in the top bar.
How branding affects your site
When you update branding, a single color change updates buttons, headings, backgrounds, and all other styled parts of your site at once. You do not need to update each page separately.
Branding values are available as design tokens through the public API, so custom frontends stay in sync. See Design Tokens for details.
Resetting to defaults
Click Reset to defaults at the bottom of the branding panel to undo all changes and return to the template's original design. This cannot be undone.