Template Expressions

Use {{ expression }} syntax in layer properties (content, src, color, etc.) to make templates dynamic. Expressions can reference brand tokens, variables, and call helper functions.

Fallbacks for optional brand assets

Brand tokens (logos, colors, images) may not always be defined. Use use or isDefined to provide fallbacks so templates work when assets are missing.

use (fallback chain)

Returns the first defined (non-null, non-undefined) value. Use for optional logos, colors, or images. Use function call syntax with parentheses and commas.

{{ use(brand.logos.logo, brand.logos.icon) }}
{{ use(brand.colors.primary, "#333333") }}
{{ use(brand.images.background, "https://picsum.photos/1200/630") }}

If brand.logos.logo is defined, it's used. Otherwise brand.logos.icon. If both are empty, returns "".

isDefined (alias)

Same as use — returns the first defined argument.

{{ isDefined(brand.logos.logo, default.logo) }}

Math functions

Function	Example
min	`{{ min(a, b) }}`
max	`{{ max(a, b) }}`
abs	`{{ abs(x) }}`
round, ceil, floor	`{{ round(3.7) }}`
clamp	`{{ clamp(value, 0, 100) }}` — clamps value between min and max

Color functions (chroma-js)

All color functions accept hex, named colors, or brand token paths like brand.colors.primary.

Light / dark

Function	Description	Example
lighten	Lighten a color	`{{ lighten(brand.colors.primary, 1.5) }}`
darken	Darken a color	`{{ darken(brand.colors.primary, 2) }}`
saturate	Increase saturation	`{{ saturate(brand.colors.accent, 2) }}`
desaturate	Decrease saturation	`{{ desaturate(brand.colors.primary, 1) }}`
getLuminance	0 (black) to 1 (white)	`{{ getLuminance(brand.colors.primary) }}`
isLight	True if luminance > 0.5	`{{ isLight(brand.colors.primary) }}`
isDark	True if luminance < 0.5	`{{ isDark(brand.colors.primary) }}`

Mixing and blending

Function	Description	Example
mix	Mix two colors	`{{ mix(brand.colors.primary, brand.colors.secondary, 0.3) }}`
shade	Mix with black	`{{ shade(brand.colors.primary, 0.5) }}`
tint	Mix with white	`{{ tint(brand.colors.primary, 0.5) }}`
blend	Blend modes (multiply, darken, lighten, screen, overlay, burn, dodge)	`{{ blend(c1, c2, "multiply") }}`
average	Average of colors	`{{ average([c1, c2, c3]) }}`

Scales and gradients

Function	Description	Example
scaleColors	Color at position (0–1) or array of n colors	`{{ scaleColors([brand.colors.primary, brand.colors.secondary], 0.5) }}`
scaleColors	Get 5 colors from gradient	`{{ scaleColors(["#ff0000","#0000ff"], 5) }}`

Other color helpers

Function	Description	Example
alpha	Set opacity (0–1)	`{{ alpha(brand.colors.primary, 0.5) }}`
luminance	Set luminance (0–1)	`{{ luminance(brand.colors.primary, 0.5) }}`
contrast	WCAG contrast ratio (4.5+ for text)	`{{ contrast(brand.colors.primary, brand.colors.secondary) }}`
hex	Get hex from any color	`{{ hex(brand.colors.primary) }}`
colorCss	Get rgb/rgba string	`{{ colorCss(brand.colors.primary) }}`
colorValid	Check if valid color	`{{ colorValid(brand.colors.primary) }}`
temperature	Color from Kelvin (2000=candle, 6500=daylight)	`{{ temperature(3500) }}`

Brand token paths

Path	Use case
brand.logos.logo, brand.logos.icon	Image src for logos
brand.logos.logoDark, brand.logos.logoLight	Light/dark variants
brand.colors.primary, brand.colors.secondary	Colors
brand.colors.darkTitleText, brand.colors.lightTitleText	Text on dark/light backgrounds
brand.typography.heading, brand.typography.body	Font families
brand.images.background, brand.images.picture	Hero/background images
brand.copy.tagline, brand.copy.description	Text content

Best practices

Always use fallbacks for optional assets — {{ use(brand.logos.logo, brand.logos.icon) }} so the template works when a logo isn't set.
Use isLight/isDark for text contrast — Pick light or dark text based on background: {{ isDark(brand.colors.primary) ? "#ffffff" : "#000000" }} (if your expression syntax supports ternaries).
Use contrast() — Ensure text readability: aim for 4.5:1 or higher.
scaleColors for gradients — Generate consistent color ramps from brand colors.