Fonts & custom CSS
Fine-grained control when you need it — fonts, per-element styling, and raw CSS as a last resort.
Fonts
Set the project font from the Style panel (or a font scope token: sans / serif / mono). The
heading and body scale come from the theme, so type stays consistent across the project.
Per-element styling
Select an element and adjust it in the Properties panel, or set style tokens in its sx — spacing,
background, radius, shadow, text size/weight, alignment, width. Prefer tokens: they're theme-aware and stay
consistent if you change the theme later.
Custom CSS (last resort)
For something the tokens don't cover, set an inline style object on an element. Use it sparingly — inline
CSS ignores the theme, so it won't follow a restyle. Reach for scope tokens first.
Token styling cascades and stays on-theme; raw style is a one-off. When in doubt, ask the agent to "use
the theme's tokens" rather than hard-coding colors.