Custom Colors & Fonts

Custom Colors & Fonts

Custom Colors & Fonts is Brickser AI's design system feature — one tab where you set your brand identity once and have every section the agent has inserted pick it up. Built on a CSS-variable foundation, with WCAG-accessibility-ready defaults and full light and dark mode support out of the box.

Where to find it

In the Brickser AI sidebar, click the Style tab. You'll find six groups: Theme, Colors, Text & Surface, Typography, Buttons, and Advanced.

Theme: light and dark

The design system ships with both light and dark modes, side by side. Toggle between them at the top of the Style tab — your choice is the mode the site renders in. Both modes are tuned to pass WCAG color contrast standards by default, so you can ship either one without manual contrast checking.

Two more controls sit next to the mode toggle:

• Shuffle — generate a fresh theme variation from your current brand color.
• Reset — return to the imported Brickser AI defaults.

Colors

Set your primary brand color in the Colors section. The agent uses it to derive a full set of semantic tokens — brand fill, brand foreground, brand inverted, brand hover, brand inverted hover — so sections always render the right shade for the right context, with hover and inversion states handled automatically.

If your identity uses two brand colors, click the + slot to add a secondary.

Text & Surface

Four cards control the foundation of every page:

• TEXT 1 — primary text (headings, body copy)
• TEXT 2 — secondary, muted text (descriptions, captions)
• BG 1 — primary background (page, cards)
• BG 2 — secondary surface (alternating sections, subtle panels)

A tertiary text and tertiary background are derived automatically for inverted contexts and deeper surfaces.

Typography

Pick two fonts:

• Heading font — applied to H1–H6.
• Body font — applied to paragraphs, lists, buttons, and inputs.

Both pick from the full Google Fonts library. Brickser AI registers the chosen fonts via WordPress's enqueue system — no manual <link> tags, no separate font loader plugin. You can also tune heading and body weights inline.

Buttons

The Buttons section sets the default look for every button across the site — fill style, padding, and corner treatment. Two live previews (a filled Get Started and an outline Learn More) update in real time as you adjust.

Advanced

Two more knobs round out the system:

• Corners — None (square) or Rounded for cards, panels, and inputs site-wide.
• Image — None or Rounded for image radius treatment site-wide.

Variables reference

Every color resolves to a CSS custom property with the --clr-* prefix. You can reference these in any custom Bricks CSS you write.

Group	Variable	Purpose
Brand	--clr-brand	Filled background (buttons, icons)
	--clr-brand-fg	Text / stroke on brand background
	--clr-brand-inv	APCA-safe brand on surface (outline, minimal)
	--clr-brand-hover	Filled hover state
	--clr-brand-inv-hover	Outline / minimal hover (subtle tint)
Text	--clr-text-primary	Headings, body text
	--clr-text-secondary	Muted text, descriptions
	--clr-text-tertiary	Inverted text on dark / light sections
Background	--clr-bg-primary	Page background, cards
	--clr-bg-secondary	Alternate sections, subtle panels
	--clr-bg-tertiary	Deeper surface, input backgrounds
Border	--clr-border-color	Card borders, dividers

Per-element overrides

The Style tab settings are the defaults. Anything you change directly on an element in Bricks (a specific button color, a specific heading font) wins over the global setting for that element. Useful when one section needs to break the pattern without touching everything else.