Design System

These update in real time when you apply a theme from Theme Studio or any open tab.

Semantic colors

Font family and scale follow --line-height, --h1-size, --h2-size from Theme Studio. Adjust in the Typography accordion.

Cards

Buttons

Badges

Forms

Status dots

System tiles

Progress bar

Animated background

Subtle radial gradient animation for primary pages.

.bg-wave {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(30,58,138,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(15,52,96,0.14) 0%, transparent 70%),
    var(--bg);
  animation: bgwave 18s ease-in-out infinite alternate;
}
@keyframes bgwave {
  0%   { background-position: 0% 0%,   100% 100%, 0 0; }
  100% { background-position: 30% 80%,  80%  20%, 0 0; }
}

All tokens are CSS custom properties on :root. Reference them anywhere:

/* Backgrounds */
background: var(--bg);          /* page background */
background: var(--surface);     /* card / panel */
background: var(--surface-2);   /* input / nested surface */
background: var(--deep);        /* darkest layer */

/* Text */
color: var(--hi);               /* headings */
color: var(--text);             /* body */
color: var(--text-2);           /* secondary */
color: var(--muted);            /* disabled / placeholder */

/* Accent */
color: var(--accent);           /* primary action */
background: var(--acc-bg);      /* accent chip background */
color: var(--acc-hi);           /* accent chip text */

/* Structure */
border-color: var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
transition: all var(--transition);

Export from Theme Studio

Click Export CSS in the theme panel to download a :root { } block you can paste into any project.