Theme customiser
Choose a brand and adjust its colors, type and density. The whole interface updates as you edit, and your choices survive reloads. Download brand.css to bring those nine tokens into your app.
Make it your brand
Nine tokens connect identity and density across the whole kit. Choose a starting point, edit it, then download brand.css below.
- Small
- Medium
- Large
Cards, tables and banners share Large. Controls use Small, capped at 8px; compact indicators cap at 4px. Density changes content spacing while the shell frame stays still.
Advanced theme preview
Operational states
One current filter. Tab between links; use arrows, Home or End to move focus, and Enter to follow a filter.
Known zero filters show 0. Unknown counts have no bubble. Hide the group when the collection itself is empty.
Could not load records
The request failed. Try again to load your records.
Swatch grid (live tokens)
Buttons
Form controls
We never share this.
At least 8 characters.
Card + badges + alert
Deployment status
Every component that reads --mui-* tokens — from this alert to the minimap on the xyflow page — re-renders instantly.
Export
Paste this :root block after maud-ui.css. The export contains exactly the nine brand tokens; advanced theme tweaks stay in this preview.
/* Radius: sm = brand * 0.5; md = brand; lg = min(brand * 1.5, 12px). Controls = min(sm, 8px). */
:root {
--mui-brand-accent: #466752;
--mui-brand-accent-ink: #ffffff;
--mui-brand-font-heading: Georgia, serif;
--mui-brand-font-body: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--mui-brand-radius: 0.5rem;
--mui-brand-density: 1;
--mui-brand-logo-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22m16%203%2011%2012h-6l7%209H18v5h-4v-5H4l7-9H5Z%22%2F%3E%3C%2Fsvg%3E");
--mui-brand-logo-size: 2rem;
--mui-brand-logo-radius: 0;
}