Recipes
A recipe is the variant mechanism underneath the Builder: pure data (a base fragment, variant dimensions, an optional compound rule, defaults) that composes into a stylesheet by the options you pick. Nothing here is a React component you import — each snippet below is produced by the same pipeline the render engine runs, so the CSS you copy is exactly what the system emits, every value a token.
Button
Tone, size and a solid/outline variant. The tone is factored into a --btn-bg custom property, so outline reuses it as ink for any tone without a per-combination rule.
The recipe (data)
{
"base": {
"&": {
"--btn-bg": "color.primary",
"--btn-fg": "color.on-primary",
"display": "inline-flex",
"align-items": "center",
"justify-content": "center",
"gap": "space.2",
"border": "1px solid transparent",
"border-radius": "radius.md",
"font-family": "font.family-base",
"cursor": "pointer",
"color": "var(--btn-fg)",
"background": "var(--btn-bg)"
}
},
"variants": {
"tone": {
"primary": {
"&": {
"--btn-bg": "color.primary",
"--btn-fg": "color.on-primary"
}
},
"danger": {
"&": {
"--btn-bg": "color.danger",
"--btn-fg": "color.on-danger"
}
},
"neutral": {
"&": {
"--btn-bg": "color.surface-alt",
"--btn-fg": "color.text"
}
}
},
"size": {
"sm": {
"&": {
"padding": "space.1 space.3"
}
},
"md": {
"&": {
"padding": "space.2 space.5"
}
},
"lg": {
"&": {
"padding": "space.3 space.6"
}
}
},
"variant": {
"solid": {},
"outline": {
"&": {
"background": "transparent",
"color": "var(--btn-bg)",
"border-color": "var(--btn-bg)"
}
}
}
},
"default": {
"tone": "primary",
"size": "md",
"variant": "solid"
}
}Generated CSS
.rx-button-0{--btn-bg:var(--fx-color-primary);--btn-fg:var(--fx-color-on-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-space-2);border:1px solid transparent;border-radius:var(--fx-radius-md);font-family:var(--fx-font-family-base);cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);padding:var(--fx-space-2) var(--fx-space-5)}
.rx-button-1{--btn-bg:var(--fx-color-danger);--btn-fg:var(--fx-color-on-danger);display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-space-2);border:1px solid transparent;border-radius:var(--fx-radius-md);font-family:var(--fx-font-family-base);cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);padding:var(--fx-space-2) var(--fx-space-5)}
.rx-button-2{--btn-bg:var(--fx-color-surface-alt);--btn-fg:var(--fx-color-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-space-2);border:1px solid transparent;border-radius:var(--fx-radius-md);font-family:var(--fx-font-family-base);cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);padding:var(--fx-space-2) var(--fx-space-5)}
.rx-button-3{--btn-bg:var(--fx-color-primary);--btn-fg:var(--fx-color-on-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-space-2);border:1px solid transparent;border-radius:var(--fx-radius-md);font-family:var(--fx-font-family-base);cursor:pointer;color:var(--btn-bg);background:transparent;padding:var(--fx-space-2) var(--fx-space-5);border-color:var(--btn-bg)}
.rx-button-4{--btn-bg:var(--fx-color-primary);--btn-fg:var(--fx-color-on-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-space-2);border:1px solid transparent;border-radius:var(--fx-radius-md);font-family:var(--fx-font-family-base);cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);padding:var(--fx-space-1) var(--fx-space-3)}12 distinct tokens, 0 off-system.
Badge
A status pill in four tones — each tone is a paired fill/on-colour from the token set.
NeutralSuccessWarningInfo
The recipe (data)
{
"base": {
"&": {
"--bdg-bg": "color.surface-alt",
"--bdg-fg": "color.text",
"display": "inline-flex",
"align-items": "center",
"padding": "space.1 space.3",
"border-radius": "radius.full",
"font-family": "font.family-base",
"color": "var(--bdg-fg)",
"background": "var(--bdg-bg)"
}
},
"variants": {
"tone": {
"neutral": {
"&": {
"--bdg-bg": "color.surface-alt",
"--bdg-fg": "color.text"
}
},
"success": {
"&": {
"--bdg-bg": "color.success",
"--bdg-fg": "color.on-success"
}
},
"warning": {
"&": {
"--bdg-bg": "color.warning",
"--bdg-fg": "color.on-warning"
}
},
"info": {
"&": {
"--bdg-bg": "color.info",
"--bdg-fg": "color.on-info"
}
}
}
},
"default": {
"tone": "neutral"
}
}Generated CSS
.rx-badge-0{--bdg-bg:var(--fx-color-surface-alt);--bdg-fg:var(--fx-color-text);display:inline-flex;align-items:center;padding:var(--fx-space-1) var(--fx-space-3);border-radius:var(--fx-radius-full);font-family:var(--fx-font-family-base);color:var(--bdg-fg);background:var(--bdg-bg)}
.rx-badge-1{--bdg-bg:var(--fx-color-success);--bdg-fg:var(--fx-color-on-success);display:inline-flex;align-items:center;padding:var(--fx-space-1) var(--fx-space-3);border-radius:var(--fx-radius-full);font-family:var(--fx-font-family-base);color:var(--bdg-fg);background:var(--bdg-bg)}
.rx-badge-2{--bdg-bg:var(--fx-color-warning);--bdg-fg:var(--fx-color-on-warning);display:inline-flex;align-items:center;padding:var(--fx-space-1) var(--fx-space-3);border-radius:var(--fx-radius-full);font-family:var(--fx-font-family-base);color:var(--bdg-fg);background:var(--bdg-bg)}
.rx-badge-3{--bdg-bg:var(--fx-color-info);--bdg-fg:var(--fx-color-on-info);display:inline-flex;align-items:center;padding:var(--fx-space-1) var(--fx-space-3);border-radius:var(--fx-radius-full);font-family:var(--fx-font-family-base);color:var(--bdg-fg);background:var(--bdg-bg)}12 distinct tokens, 0 off-system.
Alert
A message block with a tone accent bar — the accent is a custom property re-pointed per tone.
Heads upAn informational message.
All doneYour changes were saved.
CarefulThis action needs review.
BlockedSomething went wrong.
The recipe (data)
{
"base": {
"&": {
"--alt-accent": "color.info",
"display": "flex",
"flex-direction": "column",
"gap": "space.1",
"padding": "space.4 space.5",
"border-radius": "radius.md",
"border-left": "3px solid var(--alt-accent)",
"background": "color.surface-alt",
"color": "color.text"
}
},
"variants": {
"tone": {
"info": {
"&": {
"--alt-accent": "color.info"
}
},
"success": {
"&": {
"--alt-accent": "color.success"
}
},
"warning": {
"&": {
"--alt-accent": "color.warning"
}
},
"danger": {
"&": {
"--alt-accent": "color.danger"
}
}
}
},
"default": {
"tone": "info"
}
}Generated CSS
.rx-alert-0{--alt-accent:var(--fx-color-info);display:flex;flex-direction:column;gap:var(--fx-space-1);padding:var(--fx-space-4) var(--fx-space-5);border-radius:var(--fx-radius-md);border-left:3px solid var(--alt-accent);background:var(--fx-color-surface-alt);color:var(--fx-color-text)}
.rx-alert-1{--alt-accent:var(--fx-color-success);display:flex;flex-direction:column;gap:var(--fx-space-1);padding:var(--fx-space-4) var(--fx-space-5);border-radius:var(--fx-radius-md);border-left:3px solid var(--alt-accent);background:var(--fx-color-surface-alt);color:var(--fx-color-text)}
.rx-alert-2{--alt-accent:var(--fx-color-warning);display:flex;flex-direction:column;gap:var(--fx-space-1);padding:var(--fx-space-4) var(--fx-space-5);border-radius:var(--fx-radius-md);border-left:3px solid var(--alt-accent);background:var(--fx-color-surface-alt);color:var(--fx-color-text)}
.rx-alert-3{--alt-accent:var(--fx-color-danger);display:flex;flex-direction:column;gap:var(--fx-space-1);padding:var(--fx-space-4) var(--fx-space-5);border-radius:var(--fx-radius-md);border-left:3px solid var(--alt-accent);background:var(--fx-color-surface-alt);color:var(--fx-color-text)}10 distinct tokens, 0 off-system.
Card
Elevation and an accent border as independent dimensions, with a compound rule for the raised-and-accented case.
FlatDefault surface card.
RaisedLifted with a shadow.
AccentPrimary border.
Raised + accentThe compound case.
The recipe (data)
{
"base": {
"&": {
"display": "flex",
"flex-direction": "column",
"gap": "space.2",
"padding": "space.5",
"background": "color.surface",
"border": "1px solid color.border",
"border-radius": "radius.lg"
}
},
"variants": {
"elevate": {
"flat": {},
"raised": {
"&": {
"box-shadow": "shadow.md"
}
}
},
"tone": {
"plain": {},
"accent": {
"&": {
"border-color": "color.primary"
}
}
}
},
"compound": [
{
"when": {
"elevate": "raised",
"tone": "accent"
},
"style": {
"&": {
"box-shadow": "shadow.md",
"border-color": "color.primary"
}
}
}
],
"default": {
"elevate": "flat",
"tone": "plain"
}
}Generated CSS
.rx-card-0{display:flex;flex-direction:column;gap:var(--fx-space-2);padding:var(--fx-space-5);background:var(--fx-color-surface);border:1px solid var(--fx-color-border);border-radius:var(--fx-radius-lg)}
.rx-card-1{display:flex;flex-direction:column;gap:var(--fx-space-2);padding:var(--fx-space-5);background:var(--fx-color-surface);border:1px solid var(--fx-color-border);border-radius:var(--fx-radius-lg);box-shadow:var(--fx-shadow-md)}
.rx-card-2{display:flex;flex-direction:column;gap:var(--fx-space-2);padding:var(--fx-space-5);background:var(--fx-color-surface);border:1px solid var(--fx-color-border);border-radius:var(--fx-radius-lg);border-color:var(--fx-color-primary)}
.rx-card-3{display:flex;flex-direction:column;gap:var(--fx-space-2);padding:var(--fx-space-5);background:var(--fx-color-surface);border:1px solid var(--fx-color-border);border-radius:var(--fx-radius-lg);box-shadow:var(--fx-shadow-md);border-color:var(--fx-color-primary)}7 distinct tokens, 0 off-system.
How this stays honest
Every recipe is checked two ways at build time: the merged spec is scanned for token-namespace paths that are not real tokens (a typo would be caught before it renders), and the compiled CSS is scanned so every --fx-* reference is a registry token. Custom properties like --btn-bg are plumbing — they carry the chosen colour without multiplying variants, and the token scan ignores them by construction. An off-system value would surface here as a failure, not drift silently.