This panel is the central look-and-feel editor for the whole platform. Every SAGRIS app reads the same design tokens, so a change you save here retunes all of them at once — no redeploy, no per-app edits.
/assets/theme.json).Use Reset to defaults to discard your changes and return to the built-in palette.
Note: Saving is admin-gated and platform-wide — what you publish here is what every user sees. Preview thoroughly before publishing. See What each control does for the meaning of each token.
The editor groups the design tokens into four sections. Colours use a picker plus a hex field; sizes use a slider.
The background and panel colours that build the dark UI — page background, panel, raised panel, and the two border shades. Adjust these to change the overall "depth" of the interface.
The four text brightnesses, from primary (brightest) through body, muted, and dim. Keep enough contrast against the Surfaces colours for readability.
The semantic colours: Blue/signal (primary highlight), OK/green, Warning, and Error. These drive buttons, badges, and status messages across every app.
| Control | Effect |
|---|---|
| Body font | Base UI/text size. |
| Heading font | Title-bar / heading size. |
| Corner radius | Roundness of buttons, cards, and inputs. |
| Sidebar width | Width of the left sidebar in the apps that have one. |
The font and spacing tokens are fluid — they scale with the viewport (balanced across width and height) so the UI keeps its proportions on any monitor. The sliders here set the baseline that the fluid scaling builds on.
Tip: Change one group at a time and watch the live preview. If something looks wrong platform-wide after publishing, Reset to defaults restores the canonical palette.