Guide

How the Style Generator works

Design your whole token system — colour, type, spacing, shape — against a real Bricks page that restyles as you drag. Then export it, or apply it to your site in one click.

1. What it does

A design system is a set of CSS variables: a few brand colours, a type scale, a spacing scale, corner radii. Every Renmoe layout is built on those variables, which is why a pasted layout instantly looks like your site — provided your site defines them.
The Style Generator is where you author that set. You move four colours, two sliders and a couple of ratios; it derives the full system — 142 variables — and shows you the result on a real page, not a swatch sheet.
The preview is a genuine Bricks layout. Nav, hero, cards, pricing table, form, footer — all real elements reading the same var(--*) names your pasted layouts will use. If it looks right here, it will look right on your site.

What you get out of it

  • CSS — a :root{} block you can paste anywhere.
  • Bricks JSON — the exact shape Bricks’ own variable manager reads.
  • Core Framework — the handful of base values to type into Core Framework’s settings.
  • Apply to Bricks site — admins can write the whole set straight into this site’s global variables.

2. How it works, end to end

1

Pick your brand colours

Four colours drive everything: Primary, Secondary, Tertiary and Accent. Each one generates its own family — opacity steps, four lighter tints and four darker shades.
2

Set the scales

Type and spacing are fluid: you give a base size and a ratio for mobile and for desktop, and every step becomes a clamp() that grows smoothly between 320px and 1366px.
3

Watch the preview

Every change repaints the Bricks preview immediately. Flip it to dark, or to mobile, to check the system holds up before you commit to it.
4

Export or apply

Copy the CSS, hand the JSON to Bricks, or — as an admin — apply it to this site directly. A backup is taken first, so you can step back.
Your work is kept in the browser as you go, so you can close the tab and pick the same palette up later on the same machine. Undo and Redo step through every change you have made this session.

3. The preview

The right-hand side is a full marketing page assembled from real Bricks elements. It is not a mock-up: it reads the same variable names the library uses, so it is the most honest test you can get short of pasting a layout onto your own site.
  • Light / Dark (Shape tab) flips the surface and text tokens so you can see both themes of your palette.
  • Desktop / Mobile collapses the preview’s real columns, so you can check your scales at a narrow width without resizing your browser.
  • The colour ramp under the panel changes with the tab you are on — palette swatches on Colors, the type ladder on Type, spacing bars on Space, radius samples on Shape.

4. Colors tab

Four colours, each entered as a hex value or picked from the swatch. Type a hex and press Enter or click away — an invalid value snaps back rather than breaking the preview.
Role What it drives
Primary Buttons, links, highlights — the colour people remember.
Secondary Your dark neutral. It also seeds the page background, surfaces, headings and body text.
Tertiary Muted tone for meta text and quiet UI.
Accent A second highlight for badges and small emphasis.

The steps are generated for you

Each of Primary, Secondary and Tertiary produces 19 variables: the base, ten opacity steps (-5 to -90), four lighter tints (-l-1…-l-4) and four darker shades (-d-1…-d-4). Accent produces its base plus the ten opacity steps.
Primary #7B3FF2
→
--primary, --primary-20, --primary-l-3, --primary-d-2 …

Palette presets and Generate

The preset dropdown loads a ready-made palette — Violet, Ocean, Forest, Sunset, Grape or Slate. ✦ Generate invents a fresh harmonious palette from a random hue; press it until something catches your eye, then fine-tune. Both are fully undoable.

The contrast readout

Under the colours, five real pairings are scored against WCAG: body text, headings, text on primary, text on accent, and primary on a surface. 4.5 is the AA threshold for normal text.
A Fail here is not a bug in the tool — it is telling you that combination is genuinely hard to read. "On primary" failing usually means your primary is too light for white text: darken it, or plan to use dark text on primary buttons.

5. Type tab

Two Google Fonts pickers — heading and body — and four numbers that define a fluid type scale.
Control What it does
Base size — mobile / desktop Your body-copy size at each end of the range. Everything else is measured from it.
Scale — mobile / desktop The ratio between steps. Smaller ratios on mobile keep headings from overwhelming a narrow screen; 1.125 mobile with 1.2 desktop is a safe pairing.
The result is text-xs through text-6xl, each a clamp() that interpolates between your mobile and desktop values across a 320–1366px viewport. No breakpoints, no jumps.
Fonts load from Google Fonts in the preview, and the CSS export starts with the matching @import so your site loads them too.

6. Space tab

The same idea applied to spacing: a base size for mobile and desktop, and one ratio. That produces fifteen fluid steps, space-6xs through space-6xl, which drive gaps, padding and section rhythm throughout every layout.
A ratio of 1.25 gives a comfortable, gentle progression. Push it toward 1.5 for dramatic, editorial spacing; pull it to 1.15 for dense, app-like interfaces.

7. Shape tab

One slider sets your corner radius, and the rest of the scale is derived from it: radius-xs, radius-sm, radius-md (your base), radius-lg, radius-xl, plus radius-full for pills.
The other two controls on this tab are preview settings rather than tokens — the light/dark theme and the desktop/mobile viewport described above.
Base 0.75rem
→
--radius-xs .25 / --radius-md .75 / --radius-lg 1.5rem

8. Export

The Export button opens a drawer with three tabs. All of them describe the same system — 142 variables — in different dialects.
Format Use it when
CSS You want a :root{} block. Paste it into Bricks → Settings → Custom CSS, your child theme, or anywhere else. Includes the Google Fonts @import when you picked fonts.
Bricks You want native Bricks variables. It is a JSON array of {id, name, value} — exactly what Bricks’ variable manager expects.
Core Framework You use Core Framework. It lists the base values to type into its settings; Core Framework then generates its own variants. The names already line up.

What is in the export

  • The four colour families and all their generated steps
  • The fluid type and space scales, and the radius scale
  • The surface tokens — bg-body, bg-surface, text-title, text-body, border-primary — matching whichever preview theme you have selected
  • The framework constants Renmoe layouts expect: light and dark with their opacity steps, the shadow scale, columns-1…columns-8, and the screen-width bounds
Those last two groups are what make a generated style actually drive a pasted layout. Export with the theme you intend to ship — switching Light/Dark changes the surface tokens you get.

9. Apply to your site

If you are an administrator, the export drawer also offers Apply to Bricks site. It merges the tokens straight into this site's Bricks global variables: same-named variables are updated in place, new ones are added, and nothing else is touched.
  1. Your current variables are backed up automatically before anything is written.
  2. The tokens are merged, and Bricks regenerates its variable stylesheet on the spot.
  3. The button reports how many were updated and how many added.

Revert

Revert restores the backup taken before your last Apply. Click it again to step further back — the last five applies are kept, so experimenting is safe. When there is nothing left to restore it tells you so rather than doing something surprising.
Apply writes to the site you are on. On renmoe.com that means the Renmoe site itself, so it is deliberately limited to administrators. On your own install, this is the fastest way to move a generated system into Bricks.

10. Import and round-trip

The Import button takes you the other way. Paste either a :root{…} CSS block or a Bricks variables JSON array, press Import, and the controls move to match: brand colours, fonts, radius, and the type and space scales are all read back out.
That makes the generator a round-trip editor. Export a system, come back weeks later, paste it in, adjust one ratio, export again. Administrators also get Load this site's variables, which drops the current Bricks variables into the box so you can pull an existing site into the tool and evolve it.
Colours may shift by a hair on the way back (a hex converts to HSL and back), and only the settings the generator owns are read — anything else in your CSS is ignored rather than clobbered.

11. A full walkthrough

Building a brand system from scratch

  1. Press ✦ Generate a few times until a palette feels close, or load a preset.
  2. Set Primary to your actual brand hex. Check the contrast readout — aim for 4.5+ on body text and headings.
  3. On Type, pick your fonts, then set the desktop base to your body size (16px = 1rem) and the desktop ratio to taste.
  4. On Space, nudge the ratio until the preview’s section rhythm looks like your brand — tight and efficient, or open and editorial.
  5. On Shape, set the radius, then flip to Dark and Mobile to sanity-check both.
  6. Press Export. Take the CSS, or hand the Bricks JSON to your variable manager. Admins can press Apply to Bricks site instead.
  7. Paste any Renmoe layout. It arrives already wearing your system.

12. Troubleshooting and FAQ