Utility catalog.

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Fill

fill-<color> | fill-<expr>

Polygon and point fill color. Color names are any swatch from the palette below, or a `match()` / `interpolate()` expression bound to feature properties.

fill-stone-200
fill-rose-500
fill-transparent
fill match(.continent) { "Europe" -> sky-500, _ -> gray-400 }

Stroke

stroke-<color> | stroke-<N> | stroke-dasharray-N-N

Line and outline appearance. `stroke-<N>` sets width in pixels (or unsuffixed for screen-space, suffixed for world-units). Dash patterns use a hyphen-separated list of on/off lengths.

stroke-slate-700
stroke-1.5
stroke-dasharray-8-4
stroke-linecap-round
stroke-linejoin-miter
stroke-align-inset
stroke-offset-2

Opacity

opacity-<N>

Layer opacity in 0-100 range. `opacity-80` = 0.8.

opacity-100
opacity-80
opacity-30

Size

size-<N> | size-<N>px | size-<N>km | size-[expr]

Point glyph size. Bare numbers are screen-space pixels; suffix `km` switches to world-space. Bracketed expressions evaluate per-feature on the GPU.

size-8
size-300km
size-[sqrt(.pop_max) / 80]

Shape

shape-<symbol-name>

Pick a built-in symbol (circle, square, triangle, star, diamond, arrow) or a user-defined `symbol` from a top-level declaration.

shape-circle
shape-star
shape-arrow

Anchor

anchor-<position>

How a point glyph anchors to its world position. `anchor-bottom` makes the marker stand up like a pin; `anchor-center` keeps it symmetric.

anchor-center
anchor-bottom
anchor-top

Animation

animation-<keyframes-name> | animation-duration-<ms> | animation-ease-<curve> | animation-infinite | animation-delay-<ms>

Attach a top-level `keyframes` block to a layer. All animation lifecycle modifiers share the `animation-` prefix.

animation-pulse animation-duration-1500
animation-ease-in-out animation-infinite
animation-delay-200

Label

label-[<expr>] | label-size-<N> | label-color-<color> | label-halo-<N> | label-halo-color-<color> | label-anchor-<pos> | label-offset-x-<N> | label-offset-y-<N> | label-rotate-<deg> | label-letter-spacing-<N> | label-max-width-<N> | label-line-height-<N> | label-justify-<a> | label-font-<name> | label-padding-<N> | label-along-path | label-line-center | label-allow-overlap | label-ignore-placement | label-uppercase | label-lowercase | label-none

Per-feature SDF text labels. Bracket expression sets text content (Mapbox `{name}` token form supported, plus Python-style format specs `{lat:.4f}` and GIS specs `{coord:dms}`). Sibling `label-*` utilities tune typography, layout, and placement. Defaults: 12 px, layer fill colour, no halo, center anchor, no rotation, single-line. `label-max-width-<em>` enables greedy word-break wrapping; multiple `label-font-<name>` utilities stack into a CSS font-fallback chain (browser walks per glyph, ideal for CJK + Latin mix). Anchors: center / top / bottom / left / right. Justify: auto / left / center / right. Renders via the OffscreenCanvas worker → atlas → WGSL pipeline.

label-[.name]
label-["Lat: {.lat:.4f}°N"]
label-["{.coord:dms}"] label-size-14
label-[.name] label-color-#fff label-halo-1 label-halo-color-#000
label-[.name] label-uppercase label-anchor-top label-offset-y-8
label-[.name] label-rotate-30 label-letter-spacing-2
label-[.name] label-max-width-7 label-line-height-1.1 label-justify-center
label-[.name] label-font-Noto-Sans-Regular label-font-Noto-Sans-CJK-Regular
label-[.name] label-allow-overlap label-padding-4
label-[.name] label-along-path  // road / waterway names follow the line

Visibility

visible | hidden | pointer-events-none

Layer visibility + interaction control. `pointer-events-none` lets clicks pass through (e.g., for raster basemaps under a pickable vector layer).

visible
hidden
pointer-events-none

Modifiers

<fieldName>:

Prefix any utility to make it conditional on a feature property. `priority:fill-rose-500` applies when the feature's `priority` field is truthy. (Zoom-driven values use the `interpolate(zoom, …)` builtin in a binding bracket — see below.)

priority:fill-rose-500
highway:stroke-amber-500 highway:stroke-2

Zoom-driven values

<utility>-[interpolate(zoom, z1, v1, z2, v2, …)]

Sample any utility value as a function of camera zoom. Stops are linearly interpolated between the listed zooms; values outside the range clamp to the nearest stop. The same `interpolate(input, …)` builtin works on feature properties (`interpolate(.population, 0, white-100, 1e6, red-500)`).

opacity-[interpolate(zoom, 8, 40, 14, 100)]
stroke-[interpolate(zoom, 11, 1, 19, 2.5)]
fill-extrusion-height-[interpolate(zoom, 14, 0, 14.5, .render_height)]