Attributes

The Attributes tab is where a survey's entire visual identity lives — see Theming for how light/dark mode is resolved from what you set here.

The Attributes tab — theme settings, element selection highlight color, and sizing tokens.

Colors (20, each set separately for light and dark)

Ten color pairs, each a color plus its "content" (foreground/text) color to use on top of it: primary/primaryContent, secondary/secondaryContent, accent/accentContent, neutral/neutralContent, three base surface shades base100/base200/base300 plus baseContent, and semantic colors info/infoContent, success/successContent, warning/warningContent, error/errorContent.

Sizing (9 numeric tokens)

radiusSelectors (checkboxes/toggles/badges), radiusField (buttons/inputs/selects/tabs), radiusBox (cards/modals/alerts), borderWidth, fontSize, sizeField, sizeSelector, allFieldsSize (radio/checkbox item width), and spacing.

Theme variant

Which of your color pairs (primary/secondary/neutral) is treated as the survey's "default" accent color where a component needs one color and doesn't have its own explicit choice.

Theme mode

System / Light / Dark — see Theming for exactly how this interacts with the visitor's own OS preference.

Font family

Pick a generic font stack (sans-serif, serif, monospace, cursive, fantasy, system-ui), or Inherit to let the widget pick up whatever font already cascades down from the page it's embedded on.

Element selection highlight color

A single color swatch, separate from the 20 theme colors above — only relevant when Let visitors select a specific element is turned on. It's the outline color drawn around whichever part of the page the visitor pointed at, both on the live picker (while they're choosing) and on the full-page snapshot shown later in the response detail.

Back to Survey creation