Style, tokens and fonts
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 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 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.
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,
EnvyUIbuilds aFontFilefor each embedded face. An entry inEnvyUI.fontsfor 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.