# Style, tokens and fonts

> Fills, gradients, image fills, borders, shadows, blur, text styles, color tokens and embedded fonts in Envy, and how each maps to Godot and CSS.

Source: https://envyui.com/docs/style

## Paint

Frames, buttons and shapes have a **fill** (a color or a `$token`), or a linear or radial **gradient** instead. An **image fill** paints an image over that, clipped to the corners, as cover, contain, stretch or tile.

On top of the main fill, frames and buttons can stack **extra fills** and **extra strokes**, each with its own opacity, drawn under the children.

| Property | Notes |
|---|---|
| `radius` | Per corner |
| `border` | Drawn inside the layer, never affects layout |
| `shadow` | x, y, blur, color |
| `innerShadow` | x, y, blur, spread, color; above the fill, below the children |
| `backdropBlur` | Blurs what is behind the layer (frosted glass) |
| `layerBlur` | Blurs the layer itself and its children |
| `opacity`, `clip` | Group opacity and clipping |

In Godot, paint becomes a `StyleBoxFlat`; gradients, shapes and blurs are drawn by the addon's paint and shader code. See [known differences](/docs/differences) for the small places the two runtimes differ.

## Color tokens

Every color can be a token: write `$ember` instead of `#f2a24e`. Change the token and every layer that uses it follows, on every screen. Theme presets in the [starter kit](/kit) are sets of token values.

## Text

Text layers have content, font, size, weight, color, alignment, line height, letter spacing, wrapping, uppercase, an outline and a shadow. In Godot they become a `Label` with `LabelSettings`.

**Text styles** are shared typography (Display, Title, Button, Body…). A layer that uses a style follows it, so changing one style restyles every screen.

Text can include data: `HP {player.hp} / {player.hpMax}` updates as the game sets data. See [Data and events](/docs/data).

## Fonts

Envy has the whole Google Fonts catalog in its font picker. For the game, **embed** the fonts you use: the font files travel inside the document, and both runtimes use them with no setup.

- On the web, the runtime registers each embedded font directly, so a strict content security policy can't block it.
- In Godot, `EnvyUI` builds a `FontFile` for each embedded face. An entry in `EnvyUI.fonts` for the same family still wins.

The Last Hunt embeds Jaini, Archivo at two widths and Spectral Italic.

## Shapes

Ellipse, polygon, star, line and **path**. Draw paths with the pen tool (N): click for corners, drag for curves, then edit points. Closed paths are filled and stroked, open paths are stroked. Both runtimes draw the same geometry.