Color
Anywhere a color goes (fill, stroke, color, a gradient stop), you can write:
| Form | Is |
|---|---|
#1A1423, #1A142380 | a color, optionally with alpha |
@ink | the kit color ink, bound to its variable |
@Theme/surface | a variable in another collection |
@Theme/surface|#FFFFFF | a variable, painting the fallback until it exists |
@ink/40%, #1A1423/40% | the color at 40% of its opacity |
{"linear": [stops], "angle": 90} | a linear gradient; angle 0 runs left to right, 90 top to bottom |
{"radial": [stops]} | a radial gradient from the center |
Stops are colors spread evenly, or [color, position] pairs with positions from 0 to 1.
{
"kit": {
"colors": {"saffron": "#F29F05", "rose": "#D9485F", "dusk": "#2B1E4A"}
},
"nodes": [
{
"name": "Paints",
"gap": 16,
"row": [
{
"type": "rectangle",
"size": 96,
"cornerRadius": 20,
"fill": {"linear": ["@saffron", "@rose"], "angle": 45}
},
{
"type": "ellipse",
"size": 96,
"fill": {"radial": ["@saffron", ["@rose", 0.6], "@dusk"]}
},
{
"type": "rectangle",
"size": 96,
"cornerRadius": 20,
"fill": "@dusk/20%"
},
{
"type": "rectangle",
"size": 96,
"cornerRadius": 20,
"fill": "@rose",
"stroke": "@dusk",
"strokeWidth": 3
}
]
}
]
}
A linear gradient between two kit colors, a radial one with a stop placed at 0.6, a tint, and a stroke.
Modes
Give the kit modes and a value per mode for each color. "mode": "Dark" on any layer shows it, and everything inside it, in that mode.
{
"kit": {
"modes": ["Light", "Dark"],
"colors": {
"bg": ["#FFFFFF", "#15121C"],
"fg": ["#1A1423", "#F6F1EA"],
"accent": ["#D9485F", "#FF7A8F"]
}
},
"nodes": [
{
"name": "Light",
"at": [0, 0],
"color": "@fg",
"fill": "@bg",
"padding": 20,
"gap": 10,
"cornerRadius": 16,
"column": [
{"text": "Evening practice", "font": "Inter 18/24 700"},
{
"row": [{"text": "Yaman", "color": "@accent"}],
"padding": [4, 10],
"cornerRadius": 10,
"fill": "@accent/15%"
}
]
},
{
"name": "Dark",
"mode": "Dark",
"at": [220, 0],
"color": "@fg",
"fill": "@bg",
"padding": 20,
"gap": 10,
"cornerRadius": 16,
"column": [
{"text": "Evening practice", "font": "Inter 18/24 700"},
{
"row": [{"text": "Yaman", "color": "@accent"}],
"padding": [4, 10],
"cornerRadius": 10,
"fill": "@accent/15%"
}
]
}
]
}
The same card twice; the second says "mode": "Dark". The tint @accent/15% follows the mode because it is a variable of its own.
For a variable collection that is not the kit's, write "mode": {"Theme": "Dark"}.
Exporting
facet --doc f.facet tokens export --format css writes the variables as CSS custom properties, one block per mode; --format dtcg writes Design Tokens Community Group JSON.