Skip to content
Theme generator

Your brand, our components.

Pick semantic colors and a radius scale, preview them on real Sisyphos UI components, then copy the CSS variables or the applyTheme() snippet into your app.

Live preview
Default
Shipped
Blocked
Review
Draft
This field is required
Invitation sent
Ada will receive an email shortly.
CSS variables
Paste into a global stylesheet or a scoped block.
:root {
  --sisyphos-color-primary: #ff7022;
  --sisyphos-color-primary-lighter: #ffe3d5;
  --sisyphos-color-primary-light: #ffab7e;
  --sisyphos-color-primary-dark: #f85800;
  --sisyphos-color-primary-contained: #da4d00;
  --sisyphos-color-success: #22c55e;
  --sisyphos-color-success-lighter: #a9f0c3;
  --sisyphos-color-success-light: #5fe390;
  --sisyphos-color-success-dark: #1ca24d;
  --sisyphos-color-success-contained: #178841;
  --sisyphos-color-error: #fb3748;
  --sisyphos-color-error-lighter: #fee6e8;
  --sisyphos-color-error-light: #fd919a;
  --sisyphos-color-error-dark: #fa0f23;
  --sisyphos-color-error-contained: #e60518;
  --sisyphos-color-warning: #ffab00;
  --sisyphos-color-warning-lighter: #ffe6b3;
  --sisyphos-color-warning-light: #ffc95c;
  --sisyphos-color-warning-dark: #d69000;
  --sisyphos-color-warning-contained: #b87b00;
  --sisyphos-color-info: #00b8d9;
  --sisyphos-color-info-lighter: #8ceeff;
  --sisyphos-color-info-light: #36e0ff;
  --sisyphos-color-info-dark: #0095b0;
  --sisyphos-color-info-contained: #007b92;
  --sisyphos-radius-xxs: 4px;
  --sisyphos-radius-xs: 6px;
  --sisyphos-radius-s: 8px;
  --sisyphos-radius-md: 12px;
  --sisyphos-radius-lg: 16px;
  --sisyphos-radius-xl: 24px;
  --sisyphos-radius-full: 9999px;
}
applyTheme()
Set at runtime — useful for per-tenant theming.
import { applyTheme } from "@sisyphos-ui/core";
// (or your framework umbrella: @sisyphos-ui/{react,vue,angular})

applyTheme({
  color: {
    primary: "#ff7022",
    success: "#22c55e",
    error: "#fb3748",
    warning: "#ffab00",
    info: "#00b8d9",
  },
  // Radius preset: balanced
  // (apply each --sisyphos-radius-* via the CSS block above,
  //  or pass individual keys to applyTheme once you know them)
});