DESIGN SYSTEM / OPTIONAL DOCUMENTATION TOOL
Theme editor
Preview all seven SYNTYR themes and generate copyable CSS-variable overrides. The tool uses a small, standalone browser script; the SYNTYR CSS library remains JavaScript-free.
Palette controls
Calculating contrast…
System overview
Colors change instantly without altering any CSS distribution files.
Only the preview area is customized. The surrounding documentation retains its own Studio palette.
CSS output
Paste this unlayered override into your application CSS after syntyr.core.css. Test text and control contrast across the rest of your interface before deployment.
The ratio checks only the foreground/background of the primary button. It does not certify the theme, other surfaces, focus states, or WCAG compliance.