Style Presets

Style presets let you define named collections of CSS properties that can be applied to any element. Each preset generates a CSS class, so changes to a preset automatically update every element that uses it.

Creating a Preset

  1. Click the Styling button (palette icon) in the editor toolbar
  2. Scroll to the Style Presets section
  3. Click Add Preset and give it a name (e.g., "Primary Button")
  4. Click the Edit button to open the visual style editor
  5. Set layout, typography, and visual properties using the same controls as the element Styles tab

The preset name is automatically converted to a CSS class name. For example, "Primary Button" becomes .primary-button.

Applying Presets to Elements

  1. Select an element in the layout editor
  2. In the Styles tab of the Property Inspector, find the Presets section at the top
  3. Type the name of a preset to search and select it
  4. The preset appears as a tag/chip on the element

You can apply multiple presets to a single element. If presets conflict on a property, the one that appears later in the preset list (in the Styling panel) takes priority.

Inline Style Overrides

Inline styles set directly on an element always override preset properties. This lets you apply a preset as a base style and customize specific properties per element.

Preset Order and Cascade

The order of presets in the Preset Manager (Styling panel) determines CSS cascade priority. Presets lower in the list override properties from presets higher in the list. Drag presets to reorder them.

Using Presets with Design Tokens

Preset style values can reference design tokens. For example, set a preset's background color to a color token. When the token value changes (including for dark mode), the preset automatically adapts.

Presets in the CSS Editor

Because presets generate CSS classes, you can reference them in the global CSS editor for additional customization. The class name is the sanitized version of the preset label (lowercase, spaces become hyphens).

Export Behavior

When exporting your sheet, only presets that are actually used by elements are included in the CSS output. Presets used in roll templates are scoped to their respective template CSS.