# Text and effect styles

> Save a text's type settings or a layer's shadows and blurs as a named style, apply it anywhere and change every use at once.

Source: https://uxdeck.app/guide/styles (checked against uxdeck on 16 October 2026)

A style is a named set of values your file shares. A **text style** holds a font, its weight, size, line height, letter spacing and the rest of the type settings: Heading / H1, Body / Regular. An **effect style** holds a layer's shadows and blurs: Elevation / Card. Change a style and every layer that uses it changes, on every page of the file.

Colours are not styles in uxdeck. Keep them as colour [variables](/guide/variables), which also give you modes such as Light and Dark.

## Create a style

1. Select one layer that looks the way you want: a text for a text style, a layer with a shadow for an effect style (any blurs it has come along too).
2. Open the style row: at the top of the **Typography** section for text, at the top of the **Shadow** section for effects. It reads **Apply text style** (or **No text styles yet** in a new file).
3. Choose **Create text style…** (or **Create effect style…**), type a name and confirm.

Name it with a slash, such as `Heading / H1`, and it is filed in a **Heading** group in the menu and in Assets.

## Apply a style

- Select one or more layers, open the style row and pick the style. The menu shows each text style's font and size beside its name.
- Or open the **Assets** tab: **Text styles** and **Effect styles** list every style with how many layers use it. Select layers and click a style to apply it.

A layer that follows a style shows the style's name in the row. Several layers with different styles read **Mixed styles**.

## Change a style everywhere

1. Change one layer that uses the style: a bigger size, a softer shadow.
2. Open the style row and choose **Update Heading / H1 from this layer** (the style's own name is in the item).

Every layer that uses it changes, on every page. Someone else's change to a style reaches you as soon as they make it.

## Rename, detach and delete

From the style row:

- **Rename style…** changes its name everywhere.
- The unlink button beside the row (**Detach style**) keeps the layer's look but stops it following the style.
- **Delete style…** asks first. The layers that use it keep how they look and stop following it.

## What a text style holds

Font family, weight, italic, size, line height, letter spacing, text case, underline, strikethrough, paragraph spacing and paragraph indent. Colour and alignment are not part of it: set those on each layer, or use a colour variable. See [Text and type settings](/guide/text).

An effect style holds the layer's whole list of effects: drop and inner shadows, layer blur and background blur. See [Fill, stroke, shadow and blur](/guide/fill-stroke-effects).

## On your site

When you publish or export, text styles become CSS classes, so the type scale in your code reads the way you designed it.

## Catches

- **Changing a value by hand detaches.** Set a different size on a heading that follows Heading / H1 and it stops following the style. Update the style from it if you meant to change them all.
- **Mixed styles in one text** keep their values but not the link to a style.
- **There are no colour styles or grid styles.** Use colour variables for colours.
- **Create and Update need one layer selected,** so uxdeck knows whose values to take.
- **Styles belong to their file.** A Figma file you import brings its text and effect styles with it, and its colour styles as a colour variable collection.

Text and effect styles are on every plan.