Guide

How Custom Mapping works

Custom Mapping is a translator. Tell Renmoe what your Bricks variables are called, and every layout you copy arrives already speaking your naming system — no find-and-replace, no broken spacing, no orphan colours.

1. What it does

Every Renmoe layout is built on CSS variables — var(--space-l) for a gap, var(--text-2xl) for a heading size, var(--primary) for your brand colour. When you paste a layout into Bricks, those names have to exist on your site, or the layout falls back to browser defaults.
Most people are fine, because the Renmoe framework installs exactly those names. But if your site already has its own variables — --sp-l, --fs-2xl, --brand — you normally face two bad options: rename hundreds of variables on your site, or hand-edit every layout you paste.
Custom Mapping is the third option. You describe your naming system once. Renmoe then rewrites the code at the moment you copy it, so what lands on your clipboard already says var(--sp-l) instead of var(--space-l).

Two things it deliberately does not do

  • It never changes your website. Not one variable in your Bricks install is created, renamed or deleted.
  • It never changes the Renmoe library. Other members’ copies are unaffected — the mapping is saved to your account only.

2. Do you need it?

You can skip it if…

  • You installed the Renmoe framework CSS, or imported Renmoe Core into Bricks.
  • You are starting a fresh site and are happy to use Renmoe’s names.
  • Your variables are already called --space-*, --text-*, --primary, and so on.
With no mapping saved, layouts copy with Renmoe's default names — which is exactly what you want here.

You want it if…

  • You have an existing site with a variable system you cannot rename.
  • You use another framework — Automatic.css, Core Framework, Frames, your own boilerplate.
  • Your scale is numbered (--space-1 … --space-9) rather than t-shirt sized.
  • You have fewer steps than Renmoe, and want the extras folded into the nearest size you actually have.
Custom Mapping is a member tool. If you are not signed in on a paid plan the page still shows the tool, but every control is locked — view plans or log in.

3. How it works, end to end

1

You describe your naming system

Seven tabs — Spacing, Typography, Colors, Radius, Grid, Other variables, Review. You never type out a list of variables: you set a prefix and a few rules, and the tool works out every name for you.
2

Renmoe builds a rewrite list

Behind the scenes this becomes a plain list of pairs: space-l → sp-l, primary-20 → brand-20. The Review tab is that list, in full, before you commit to it.
3

You press Save mapping

The list is stored on your Renmoe account — not in a cookie, not in one browser. Log in on another machine and it follows you.
4

Every Copy rewrites on the way out

When you press Copy on any layout, Renmoe swaps the names on your list before the code reaches your clipboard. Paste into Bricks as normal. Nothing else in your workflow changes.
Only names are rewritten, never values. If your --sp-l is 40px where Renmoe's --space-l was 32px, the pasted layout uses your 40px. That is the point: layouts inherit your design system instead of fighting it.

4. Before you start

Spend two minutes with your own variable list open in another tab — in Bricks that is Bricks → Settings → Theme styles or the variable manager, or your framework's own settings panel. You are looking for three things:
  • The prefix you use for each family: is it --space-, --sp-, --gap-?
  • The step labels: t-shirt (xs, s, m, l, xl), numbers (1, 2, 3), or something bespoke.
  • How many steps you have. Renmoe uses 13 spacing steps and 9 text steps; if you have 7, the tool folds the extras into your nearest size.
Write nothing down — you set all of this in the tool, and the live preview beside every tab shows the exact names you are producing as you type.

5. Spacing tab

Renmoe layouts use 13 spacing steps for gaps, padding and vertical rhythm:

--space-4xs --space-3xs --space-2xs --space-xs --space-s --space-m --space-l --space-xl --space-2xl --space-3xl --space-4xl --space-5xl --space-6xl

Every control, explained

Control What it does
Scale type T-shirt keeps size labels (xs, s, m, l…). Numeric numbers your steps from 1 upward in range order (--sp-1, --sp-2…). Custom unlocks the preview table on the right so you can type each name by hand — use it when your names follow no pattern at all.
Naming convention (prefix) The bit before the step label. Type sp and your names become --sp-m. The -- is added for you; do not type it.
Start step and End step The smallest and largest step your site actually has. If you stop at xl, everything bigger in a Renmoe layout is pulled down to your xl rather than pointing at a variable you do not own.
Baseline step Your normal size — the one marked Base in the preview. The min and max sizes below are measured from here, larger steps stepping up and smaller ones stepping down.
Reverse variable names Flips the order names are handed out, for systems where the biggest step carries the smallest number. Only the labels move; sizes stay where they are.
Min base size + Min ratio (Mobile) Your scale at its smallest viewport: the baseline size in px, and how sharply each step grows.
Max base size + Max ratio (Desktop) The same at full width. The ratios are the classic musical ones — 1.25 Major Third, 1.333 Perfect Fourth, 1.618 Golden.
The px sizes and ratios are a preview aid, not part of the mapping. Only names are saved. Set the numbers so the preview roughly matches your real scale — it is the quickest way to confirm you picked the right start, end and baseline — but do not lose time fine-tuning them. Renmoe never overwrites your values.

What "nearest step" means

Say your spacing runs xs to xl — five steps against Renmoe's thirteen. A layout calling for --space-4xl cannot use a variable you do not have, so it maps down to your largest, --sp-xl. Anything smaller than your xs maps up to --sp-xs. The layout loses a little of its extremes, but it never references a missing variable — which is the thing that would actually break the design.
Defaults on this tab: prefix space, range 4xs–6xl, baseline m, 16px / 1.25 mobile, 20px / 1.333 desktop.

6. Typography tab

Identical controls to Spacing, applied to the nine text steps:

--text-xs --text-s --text-m --text-l --text-xl --text-2xl --text-3xl --text-4xl --text-5xl

Common real-world settings: prefix fs for a font-size scale (--fs-m), or Numeric if your type ramp runs --text-1 … --text-9. Keep the baseline on your body-copy size — that is the anchor everything else is measured from.
Defaults on this tab: prefix text, range xs–5xl, baseline m, 16px / 1.2 mobile, 20px / 1.25 desktop.

7. Colors tab

Colours are simple renames — one field per role, no scale settings. Type your name and the preview list updates as you go.
Renmoe role Used for
--primary Main brand colour — buttons, links, accents.
--secondary Supporting brand colour.
--tertiary Muted neutral tone, often used for meta text.
--accent Highlight colour.
--light and --dark The two ends of the neutral range.
--bg-body, --bg-surface Page background, and card or panel background.
--text-title, --text-body Heading and body text colour.
--border-primary Default border colour.

Shades come along automatically

Renmoe layouts use tinted variants of the brand roles — opacity steps like --primary-20, lighter steps like --primary-l-2, darker ones like --primary-d-3. You never list these. Rename primary to brand and every variant follows: --primary-20 becomes --brand-20, --primary-l-2 becomes --brand-l-2.
  • Primary, Secondary, Tertiary — the full set: opacity steps 5 to 90, four lighter steps, four darker steps.
  • Light and Dark — opacity steps only (--light-10, --dark-50).
  • Accent and the semantic colours — the base name only.
Because variants are generated from the role name, your own tinted variables need to follow the same pattern for the rewrite to land on something real. If your site has --brand but no --brand-20, a layout using a 20% tint points at a variable that does not exist. Either add the tints to your palette, or expect to adjust those few spots by hand.

8. Radius tab

Corner radii for cards, buttons, inputs and images. Six steps:

--radius-xs --radius-sm --radius-md --radius-lg --radius-xl --radius-full

The controls match Spacing. Two things are worth knowing:
  • The labels here are sm / md / lg, not s / m / l like the other scales.
  • full is the pill shape, not a rung on the ladder. It only maps if your own range includes it, and no sized step is ever collapsed onto it — a large radius will never accidentally turn your cards into pills.
Defaults on this tab: prefix radius, range xs–full, baseline md, 12px at both ends.

9. Grid tab

Renmoe grids use --columns-1 through --columns-8. Set your prefix — col gives --col-3 — and the range you actually define. A layout asking for six columns when you stop at four gets your four-column variable rather than a dead reference.

10. Other variables tab

The leftovers — everything that is not part of a scale. One field each: rename what you need and leave the rest alone.
Group Variables
Shadows --shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-primary
Layout widths --max-screen-width, --min-screen-width
Semantic spacing --btn-space, --card-space, --footer-space, --header-space
Semantic type --hero-title-size, --post-title-size, --nav-link-size
Leaving a field at its default simply means "no change" — that variable copies through untouched.
Not every field here changes a copy. The shadows and --max-screen-width appear in real layouts, so renaming them takes effect. The semantic spacing and semantic type variables — and --min-screen-width — are part of the Renmoe framework but are not currently used by any layout in the library, so renaming them is harmless and simply does nothing to what you paste. The same is true of --accent on the Colors tab.

11. Review and save

The Review tab is the whole mapping in one column: --space-l → --sp-l, one line per rewrite, with a count at the top. Read it before saving — it is the fastest way to catch a mistyped prefix, because a wrong prefix shows up as a hundred wrong lines at once.
A count of zero is not a failure. It means your names already match Renmoe's, and layouts will copy with the default names.

The buttons along the bottom

Button What it does
Back / Next Move between tabs. You can also click any tab directly — there is no required order and no step you must complete.
Reset Puts every field back to Renmoe defaults and deletes the mapping saved on your account. You are asked to confirm first.
N variables remapped A live counter across all tabs, so you can see at a glance whether a change registered.
Save mapping Commits it to your account. The button confirms with a tick and the number saved. Nothing takes effect until you press this.
Variable names may contain letters, numbers, hyphens and underscores. Anything else is stripped on save, and an empty field falls back to the Renmoe default.

12. Worked examples

A. Short prefixes

Your site uses --sp-m and --fs-xl.
Spacing: leave Scale type on T-shirt, change the prefix to sp. Typography: prefix fs. Done — two fields.
--space-l
→
--sp-l

B. A numbered scale

Your spacing runs --space-1 (smallest) to --space-9 (largest).
Spacing: Scale type Numeric, prefix space. Then set Start and End so the range covers exactly nine steps — for example 3xs to 4xl. The preview numbers them 1 to 9 in order; check the count matches before moving on.
--space-m
→
--space-5

C. A different colour language

Your palette is --brand, --brand-alt, --ink, --paper.
Colors: Primary → brand, Secondary → brand-alt, --text-body → ink, --bg-body → paper. The tinted variants of Primary and Secondary follow automatically.
--primary-20
→
--brand-20

D. A smaller scale than Renmoe's

You only define xs through xl.
Spacing: Start xs, End xl. Everything outside that folds into your nearest step, so a hero built on --space-5xl still renders with generous padding rather than none.
--space-5xl
→
--space-xl

E. Names with no pattern

Your spacing is --gap-tight, --gap-normal, --gap-roomy.
Spacing: Scale type Custom, then type each name straight into the preview table on the right. Set Start and End first, so you are only filling in rows you actually have.
--space-m
→
--gap-normal

13. Check that it worked

  1. Save on the Review tab and wait for the saved confirmation.
  2. Open any layout in the library and press Copy.
  3. Paste into Bricks. Open one element’s spacing or colour setting — the value should read your variable name, not Renmoe’s.
  4. Faster check without Bricks: paste into a plain text editor and search for --. Every variable should be one of yours.
Copies are not retroactive. Layouts you pasted before saving the mapping keep the old names — re-copy and re-paste them if you want them converted. Equally, if you change the mapping later, only copies made after the change use the new names.

14. Troubleshooting and FAQ