Colour & theme
Give a visual your brand colour, a gradient, or leave it as ink that adapts to light and dark themes.
Out of the box every pattern is ink: shades of grey that follow the theme. It's dark on a light background and light on a dark one, and the view's background is transparent, so your app's surface shows through. From there you have three tools: a colour, a gradient, and the mode that decides how colours behave across themes.
A brand colour
{
"fxSpec": "1.8",
"object": "orb",
"pattern": "breathing",
"color": {
"value": "#E5484D",
"mix": 0.8,
"mode": "fixed"
}
}
| Key | Meaning |
|---|---|
color.value | The colour: a hex string (#E5484D) or a DTCG colour object. |
color.mix | How far every element moves toward it, 0–1. A binding can drive it (color.mix), e.g. to warm the visual up as a value rises. |
color.lightness | A bias from −1 (darker) to +1 (lighter); 0 keeps the pattern's own depth shading. |
color.mode | ink (default) or fixed, below. |
Ink or fixed
inkkeeps the pattern's shading readable on every theme: on a dark theme, lightness is mirrored, so dark ink turns light. Use it when the visual should feel like part of your UI.fixedkeeps the exact colour on every theme. Use it for a brand mark, or when the visual always sits on the same surface.
The theme itself comes from the system by default. Views take theme: "auto" | "light" | "dark" when your app manages its own.
A gradient
A gradient colours elements by their position across the frame (CSS linear-gradient angles: 0° points up, 90° to the right). On rings, beacons and signal traces the colour also sweeps along each stroke.
{
"fxSpec": "1.8",
"object": "ring",
"pattern": "tracking",
"gradient": {
"stops": [
"#0091FF",
"#8E4EC6",
"#E5484D"
],
"angle": 90,
"strength": 1
}
}
Two or three stops; mid places the middle one. path: "long" goes the long way round the colour wheel. strength fades the whole gradient in and out, and is bindable as gradient.strength.
Every colour prop
One brand colour for the whole frame. In an FX Spec: /color. Off until color.mix is above 0.
| Prop | FX Spec | Type | Range | Default | Description |
|---|---|---|---|---|---|
color.hue | /color/hue | number | 0–360 deg | Hue of the picked colour (FX Spec accepts a hex value instead). | |
color.lightness | /color/lightness | number | -1–1 | 0 | Lightness bias: below 0 darker, above 0 lighter; 0 keeps the pattern's own shading. |
color.mix | /color/mix | number | 0–1 fraction | 0 | How far every element moves to the picked colour. Also accepted: colorMix. |
color.mode | /color/mode | choice: ink · fixed | Ink mirrors lightness on dark themes; fixed keeps the exact colour in both. | ||
color.saturation | /color/saturation | number | 0–1 fraction | Saturation of the picked colour. |
A colour ramp by position across the frame. In an FX Spec: /gradient. Off until gradient.strength is above 0.
| Prop | FX Spec | Type | Range | Default | Description |
|---|---|---|---|---|---|
gradient.angle | /gradient/angle | number | -360–720 (UI 0–360) deg | 90 | Direction of the ramp, CSS-style (0 = up, clockwise). |
gradient.hue2 | /gradient/hue2 | number | -720–1080 deg | 320 | Hue at the end (or middle, with a third stop) of the ramp. |
gradient.hue3 | /gradient/hue3 | number | -720–1080 deg | Optional third stop's hue; absent = a two-stop ramp. | |
gradient.hue | /gradient/hue | number | 0–360 deg | 200 | Hue at the start of the ramp. |
gradient.mid | /gradient/mid | number | 0.05–0.95 fraction | 0.5 | Position of the middle stop along the ramp (three stops). |
gradient.saturation | /gradient/saturation | number | 0–1 fraction | 0.8 | Saturation the ramp blends toward. |
gradient.strength | /gradient/strength | number | 0–1 fraction | 0 | Amount of the colour ramp; 0 turns it off. Also accepted: gradientStrength. |