Documentation

Formulas - Complete Guide

Formulas let you connect variables so values update automatically. This is powerful for designers because one base value can drive spacing, type, color, and mode-specific tokens across your whole system.

Start with variable references Open copy-paste recipes

On this page

Quick start

Copy these formulas directly into VariablesPlus.

{{Spacing/Base}} * 6
MODE("Light")
"Size: " & {{Size}}

What formulas are for

Use formulas to build dynamic relationships between variables. When one referenced variable changes, every related value can recalculate automatically, so your design system stays consistent with less manual work.

1. Referencing Variables

Use these official reference syntaxes:

Standard

{{VariableName}}

Collection + Variable

{{Collection:VariableName}}

Examples

{{Base}} * 2
{{Spacing:Base}} * 6

Variable references use internal IDs behind the scenes, so renaming a variable does not break existing formulas.

2. Operators

+-*/%==!=<<=>>=&&||!&

Math

Use `+`, `-`, `*`, `/`, `%` for numeric calculations.

{{Spacing/Base}} * 6
({{Layout/Width}} - {{Layout/Margin}} * 2) / 4
{{Count}} % 2

Comparisons

Use equality and greater/less-than operators for comparisons.

{{Size}} >= 16
{{State}} == "active"
{{Step}} != 0

⚠️ `==` is a loose comparison and may coerce types.

Logical

Use `&&`, `||`, `!` to combine conditions.

{{IsDesktop}} && {{IsSidebarOpen}}
{{IsDark}} || {{HasHighContrast}}
!{{IsArchived}}

Text Concatenation

Use `+` or `&` to join text values.

"Size: " + {{Size}}
"Size: " & {{Size}}

3. Built-in Functions

These are the runtime-supported functions you can use today.

Logic

`IF`, `AND`, `OR`, `NOT`, `SWITCH`

IF({{IsDark}}, "#0F172A", "#F8FAFC")
AND({{IsDesktop}}, {{HasSidebar}})
OR({{IsTablet}}, {{IsDesktop}})
NOT({{IsLocked}})
SWITCH({{Size}}, "S", 8, "M", 12, "L", 16, 20)

⚠️ `IF` is not lazy. Both branches are evaluated.

Text

`CONCATENATE`, `LEFT`, `RIGHT`, `MID`, `LEN`, `LOWER`, `UPPER`, `TRIM`, `SUBSTITUTE`, `FIND`

CONCATENATE("Hello ", {{Name}})
LEFT({{TokenName}}, 3)
RIGHT({{TokenName}}, 2)
MID({{TokenName}}, 2, 4)
LEN({{Name}})
LOWER({{Status}})
UPPER({{Status}})
TRIM({{UserInput}})
SUBSTITUTE({{Email}}, "@", " at ")
FIND("px", {{TokenName}})

Math

`ABS`, `CEILING`, `FLOOR`, `ROUND`, `MIN`, `MAX`, `POWER`, `SQRT`

ABS(-12)
CEILING({{Spacing}}, 4)
FLOOR({{Spacing}}, 4)
ROUND({{Type/Ratio}}, 2)
MIN({{MinValue}}, {{CurrentValue}})
MAX({{MaxValue}}, {{CurrentValue}})
POWER({{Type/Base}}, 2)
SQRT({{Area}})

Date

`DATE`, `DATE_DMY`, `DATE_MDY`, `TODAY`, `YEAR`, `MONTH`, `DAY`

TODAY()
DATE(2026, 2, 21, "YYYY-MM-DD")
DATE_DMY(21, 2, 2026, "DD MMM YYYY")
DATE_MDY(2, 21, 2026, "MMMM DD, YYYY")
YEAR(TODAY())
MONTH(TODAY())
DAY(TODAY())

Supported date format tokens: YYYY MMMM MMM MM DD HH mm ss

Color

`rgb`, `rgba`, `hsl`, `hsla`, `hsb`, `cd`, `cv`

rgb(34, 98, 255)
rgba(34, 98, 255, 0.4)
hsl(220, 90, 56)
hsla(220, 90, 56, 0.4)
hsb(220, 80, 95)
cd({{Brand/500}}).lighten(0.1)
cv({{Brand/500}}).darken(0.12)
cd({{Brand/500}}).alpha(0.5)
cd({{Brand/500}}).toRgb()
cd({{Brand/500}}).toString()

Color methods: .lighten(), .darken(), .alpha(), .toRgb(), .toString()

Modes

Use MODE("Light") or mode("Light") to reuse another mode value.

MODE("Light")
mode("Light")

⚠️ `MODE` throws an error if the target mode does not exist.

4. Limits & Common Pitfalls

Hard limits

10,000 characters max
15 nesting levels
100 function calls
5s timeout

Common pitfalls

`==` uses loose comparison
`IF` is not lazy
Some UI suggestions may not exist at runtime

5. Copy-Paste Recipes

{{Spacing/Base}} * 6
{{Type/Base}} * POWER({{Type/Ratio}}, 2)
MODE("Light")
cd({{Brand/200}}).alpha(0.4)
"Size: " & {{Size}}