Custom Themes

A theme is a stylesheet that belongs to a workspace. Apply it to a feedback form, an assessment, or a page, and its public render takes on your styling — participants and visitors see your look instead of the default one.

Themes are created per workspace and applied per item: one theme can style any number of forms, assessments, and pages, and every item picks which theme (if any) it uses.

Themes live under Tools → Themes in the workspace sidebar. Any workspace member can browse the list; creating and editing themes requires the Manage workspace permission. You can also generate a starting theme with AI — describe the look you're after and refine the result in the editor (each generation uses one AI generation from the monthly allowance).

The editor shows a live preview of your CSS and validates it as you type, so you get instant feedback — including per-line errors — before anything is saved.

To apply a theme: in the form or assessment builder open Settings → Theme and pick one. For pages, choose the theme in Page settings → Theme.

You write ordinary CSS — no wrapper syntax, no special dialect. When a theme is saved, the stylesheet is automatically sanitized and scoped so it can only affect the rendered form, assessment, or page it is applied to. You never add any scoping yourself.

:root, html, and body selectors are re-anchored to the themed region, so :root { --primary: … } overrides the design tokens for just that render — the quickest way to recolor everything at once.

For dark mode, target .amp-dark (e.g. .amp-dark .amp-card { … }). If you write .dark on a root selector it is mapped to .amp-dark automatically.

:root {
  --primary: oklch(0.55 0.22 275);
}

.amp-dark .amp-card {
  border-color: oklch(0.45 0.05 275);
}

Three kinds of hooks are stable API for theme authors: structural amp-* classes, data-slot attributes on UI primitives, and the design token CSS variables. Anything else — like utility class names you may spot in the markup — can change without notice.

Structural classes

Component attributes

Every shadcn UI primitive in the render carries a data-slot attribute you can target directly — a stable alternative to guessing at class names. A few of the most useful:

Design token variables

Design tokens are global CSS variables you can override from a :root { … } block in your theme. Color tokens are OKLch values.

Themes can replace the default question entrance animation with a spring-physics preset played by the app's own animation engine. You declare plain CSS variables on :root — the theme stays pure CSS, no scripting involved — and every question animates in with the chosen preset, staggered one after another.

Presets apply wherever questions enter the screen: the initial reveal on single-page assessments and forms, each step of a multi-step assessment, and every card in one-by-one mode. An unknown preset value is simply ignored and the default animation plays instead.

Presets

Variables

:root {
  --amp-motion: scale-in;
  --amp-motion-duration: 0.6s;
  --amp-motion-stagger: 90ms;
}

Three complete themes you can paste straight into the editor.

Brand colors & radius

Override design tokens on :root for light mode and .amp-dark for dark mode — the fastest way to make a render match your brand.

:root {
  --primary: oklch(0.5 0.2 300);
  --ring: oklch(0.5 0.2 300);
  --card: oklch(0.99 0.005 300);
  --radius: 1rem;
}

.amp-dark {
  --primary: oklch(0.78 0.16 300);
  --card: oklch(0.24 0.02 300);
  --border: oklch(0.35 0.03 300);
}

Neo-brutalist cards

Hard shadows, thick borders, and no blur — restyle the card, the title, and every button directly.

.amp-card {
  border: 3px solid oklch(0.2 0 0);
  border-radius: 0;
  box-shadow: 8px 8px 0 oklch(0.2 0 0);
}

.amp-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

[data-slot="button"] {
  border: 3px solid oklch(0.2 0 0);
  border-radius: 0;
  box-shadow: 4px 4px 0 oklch(0.2 0 0);
}

[data-slot="button"]:hover {
  translate: -2px -2px;
  box-shadow: 6px 6px 0 oklch(0.2 0 0);
}

Entrance animation & motion presets

A motion preset for the questions (see Motion presets above) combined with hand-rolled keyframes for the header — note the required theme- prefix on the keyframes name.

:root {
  /* Built-in spring entrance */
  --amp-motion: scale-in;
  --amp-motion-stagger: 90ms;
}

/* …or hand-rolled keyframes */
@keyframes theme-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.amp-header {
  animation: theme-rise 400ms ease-out both;
}

Export any theme as a .json file from its row menu on the Themes page, and bring it into another workspace with the Import button.

Imported CSS is re-validated on import, so a theme file is held to exactly the same rules as CSS written in the editor.

The theme library is a public gallery of ready-made themes curated by Amperlise. Browse it from the Browse library button on your workspace's Themes page — every theme has a live preview against a sample form, assessment, and page, plus its full CSS source.

Use in workspace copies a library theme into a workspace of your choice as a regular custom theme: you can apply it as-is or open it in the theme editor and make it your own. Copies are independent — later changes to the library theme never touch your workspace.

Library CSS passes through exactly the same validation as CSS you write yourself, and applying a copied theme still requires the Professional plan's Custom Themes feature.