Defining Intents
In this documentation we present you with a starting set of predefined intents that cover the most use cases for our design system. We deliberately chose to use same colors for both background and foreground color as the starting point as in most cases we want to keep same color features across both background and foreground elements.
When to define new intents
You might find that the predefined intents do not fully cover your specific use cases. Creating custom intents can help tailor the design tokens to better fit your product's unique requirements. Such scenarios may include:
- setting up a new design system;
- improving accessibility;
- enhancing visual hierarchy;
- addressing specific brand needs;
- researching new products or patterns.
Generator
step: 525
oklch: 0.525 0.214 260
rgb: 95 226
hex: #005fe2
difference: 0.82%vs #0761E6
OKLCH
- lightness
0.533- chroma
0.215- hue
260
Tokens
- Step
533- Type
background- Intent
brand
RGB
- red
0- green
0- blue
0
- Preview
- CSS Custom Properties
- Figma JSON
- TypeScript
Intent: brand, attention: full
| Token name | light | dark |
|---|---|---|
background.brand.full.default / blend.solid | #000000 | #ffffff |
background.brand.full.default / blend.low | #000000e6 | #ffffffe6 |
background.brand.full.default / blend.medium | #000000b3 | #ffffffb3 |
background.brand.full.default / blend.high | #00000080 | #ffffff80 |
background.brand.full.default / blend.strong | #0000004d | #ffffff4d |
background.brand.full.default / blend.full | #00000000 | #ffffff00 |
background.brand.full.hovered / blend.solid | #003f9d | #ccdfff |
background.brand.full.hovered / blend.low | #003f9de6 | #ccdfffe6 |
background.brand.full.hovered / blend.medium | #003f9db3 | #ccdfffb3 |
background.brand.full.hovered / blend.high | #003f9d80 | #ccdfff80 |
background.brand.full.hovered / blend.strong | #003f9d4d | #ccdfff4d |
background.brand.full.hovered / blend.full | #003f9d00 | #ccdfff00 |
background.brand.full.pressed / blend.solid | #0058d4 | #98bfff |
background.brand.full.pressed / blend.low | #0058d4e6 | #98bfffe6 |
background.brand.full.pressed / blend.medium | #0058d4b3 | #98bfffb3 |
background.brand.full.pressed / blend.high | #0058d480 | #98bfff80 |
background.brand.full.pressed / blend.strong | #0058d44d | #98bfff4d |
background.brand.full.pressed / blend.full | #0058d400 | #98bfff00 |
background.brand.full.selected / blend.solid | #003483 | #b2cfff |
background.brand.full.selected / blend.low | #003483e6 | #b2cfffe6 |
background.brand.full.selected / blend.medium | #003483b3 | #b2cfffb3 |
background.brand.full.selected / blend.high | #00348380 | #b2cfff80 |
background.brand.full.selected / blend.strong | #0034834d | #b2cfff4d |
background.brand.full.selected / blend.full | #00348300 | #b2cfff00 |
Intent: brand, attention: strong
| Token name | light | dark |
|---|---|---|
background.brand.strong.default / blend.solid | #004cb8 | #7daeff |
background.brand.strong.default / blend.low | #004cb8e6 | #7daeffe6 |
background.brand.strong.default / blend.medium | #004cb8b3 | #7daeffb3 |
background.brand.strong.default / blend.high | #004cb880 | #7daeff80 |
background.brand.strong.default / blend.strong | #004cb84d | #7daeff4d |
background.brand.strong.default / blend.full | #004cb800 | #7daeff00 |
background.brand.strong.hovered / blend.solid | #2377fd | #448bff |
background.brand.strong.hovered / blend.low | #2377fde6 | #448bffe6 |
background.brand.strong.hovered / blend.medium | #2377fdb3 | #448bffb3 |
background.brand.strong.hovered / blend.high | #2377fd80 | #448bff80 |
background.brand.strong.hovered / blend.strong | #2377fd4d | #448bff4d |
background.brand.strong.hovered / blend.full | #2377fd00 | #448bff00 |
background.brand.strong.pressed / blend.solid | #629dff | #0d67ec |
background.brand.strong.pressed / blend.low | #629dffe6 | #0d67ece6 |
background.brand.strong.pressed / blend.medium | #629dffb3 | #0d67ecb3 |
background.brand.strong.pressed / blend.high | #629dff80 | #0d67ec80 |
background.brand.strong.pressed / blend.strong | #629dff4d | #0d67ec4d |
background.brand.strong.pressed / blend.full | #629dff00 | #0d67ec00 |
background.brand.strong.selected / blend.solid | #448bff | #2377fd |
background.brand.strong.selected / blend.low | #448bffe6 | #2377fde6 |
background.brand.strong.selected / blend.medium | #448bffb3 | #2377fdb3 |
background.brand.strong.selected / blend.high | #448bff80 | #2377fd80 |
background.brand.strong.selected / blend.strong | #448bff4d | #2377fd4d |
background.brand.strong.selected / blend.full | #448bff00 | #2377fd00 |
Intent: brand, attention: high
| Token name | light | dark |
|---|---|---|
background.brand.high.default / blend.solid | #0d67ec | #0d67ec |
background.brand.high.default / blend.low | #0d67ece6 | #0d67ece6 |
background.brand.high.default / blend.medium | #0d67ecb3 | #0d67ecb3 |
background.brand.high.default / blend.high | #0d67ec80 | #0d67ec80 |
background.brand.high.default / blend.strong | #0d67ec4d | #0d67ec4d |
background.brand.high.default / blend.full | #0d67ec00 | #0d67ec00 |
background.brand.high.hovered / blend.solid | #448bff | #004cb8 |
background.brand.high.hovered / blend.low | #448bffe6 | #004cb8e6 |
background.brand.high.hovered / blend.medium | #448bffb3 | #004cb8b3 |
background.brand.high.hovered / blend.high | #448bff80 | #004cb880 |
background.brand.high.hovered / blend.strong | #448bff4d | #004cb84d |
background.brand.high.hovered / blend.full | #448bff00 | #004cb800 |
background.brand.high.pressed / blend.solid | #7daeff | #003483 |
background.brand.high.pressed / blend.low | #7daeffe6 | #003483e6 |
background.brand.high.pressed / blend.medium | #7daeffb3 | #003483b3 |
background.brand.high.pressed / blend.high | #7daeff80 | #00348380 |
background.brand.high.pressed / blend.strong | #7daeff4d | #0034834d |
background.brand.high.pressed / blend.full | #7daeff00 | #00348300 |
background.brand.high.selected / blend.solid | #629dff | #003f9d |
background.brand.high.selected / blend.low | #629dffe6 | #003f9de6 |
background.brand.high.selected / blend.medium | #629dffb3 | #003f9db3 |
background.brand.high.selected / blend.high | #629dff80 | #003f9d80 |
background.brand.high.selected / blend.strong | #629dff4d | #003f9d4d |
background.brand.high.selected / blend.full | #629dff00 | #003f9d00 |
Intent: brand, attention: medium
| Token name | light | dark |
|---|---|---|
background.brand.medium.default / blend.solid | #629dff | #004cb8 |
background.brand.medium.default / blend.low | #629dffe6 | #004cb8e6 |
background.brand.medium.default / blend.medium | #629dffb3 | #004cb8b3 |
background.brand.medium.default / blend.high | #629dff80 | #004cb880 |
background.brand.medium.default / blend.strong | #629dff4d | #004cb84d |
background.brand.medium.default / blend.full | #629dff00 | #004cb800 |
background.brand.medium.hovered / blend.solid | #2377fd | #0d67ec |
background.brand.medium.hovered / blend.low | #2377fde6 | #0d67ece6 |
background.brand.medium.hovered / blend.medium | #2377fdb3 | #0d67ecb3 |
background.brand.medium.hovered / blend.high | #2377fd80 | #0d67ec80 |
background.brand.medium.hovered / blend.strong | #2377fd4d | #0d67ec4d |
background.brand.medium.hovered / blend.full | #2377fd00 | #0d67ec00 |
background.brand.medium.pressed / blend.solid | #0058d4 | #448bff |
background.brand.medium.pressed / blend.low | #0058d4e6 | #448bffe6 |
background.brand.medium.pressed / blend.medium | #0058d4b3 | #448bffb3 |
background.brand.medium.pressed / blend.high | #0058d480 | #448bff80 |
background.brand.medium.pressed / blend.strong | #0058d44d | #448bff4d |
background.brand.medium.pressed / blend.full | #0058d400 | #448bff00 |
background.brand.medium.selected / blend.solid | #0d67ec | #2377fd |
background.brand.medium.selected / blend.low | #0d67ece6 | #2377fde6 |
background.brand.medium.selected / blend.medium | #0d67ecb3 | #2377fdb3 |
background.brand.medium.selected / blend.high | #0d67ec80 | #2377fd80 |
background.brand.medium.selected / blend.strong | #0d67ec4d | #2377fd4d |
background.brand.medium.selected / blend.full | #0d67ec00 | #2377fd00 |
Intent: brand, attention: low
| Token name | light | dark |
|---|---|---|
background.brand.low.default / blend.solid | #b2cfff | #002869 |
background.brand.low.default / blend.low | #b2cfffe6 | #002869e6 |
background.brand.low.default / blend.medium | #b2cfffb3 | #002869b3 |
background.brand.low.default / blend.high | #b2cfff80 | #00286980 |
background.brand.low.default / blend.strong | #b2cfff4d | #0028694d |
background.brand.low.default / blend.full | #b2cfff00 | #00286900 |
background.brand.low.hovered / blend.solid | #7daeff | #004cb8 |
background.brand.low.hovered / blend.low | #7daeffe6 | #004cb8e6 |
background.brand.low.hovered / blend.medium | #7daeffb3 | #004cb8b3 |
background.brand.low.hovered / blend.high | #7daeff80 | #004cb880 |
background.brand.low.hovered / blend.strong | #7daeff4d | #004cb84d |
background.brand.low.hovered / blend.full | #7daeff00 | #004cb800 |
background.brand.low.pressed / blend.solid | #448bff | #0d67ec |
background.brand.low.pressed / blend.low | #448bffe6 | #0d67ece6 |
background.brand.low.pressed / blend.medium | #448bffb3 | #0d67ecb3 |
background.brand.low.pressed / blend.high | #448bff80 | #0d67ec80 |
background.brand.low.pressed / blend.strong | #448bff4d | #0d67ec4d |
background.brand.low.pressed / blend.full | #448bff00 | #0d67ec00 |
background.brand.low.selected / blend.solid | #629dff | #0058d4 |
background.brand.low.selected / blend.low | #629dffe6 | #0058d4e6 |
background.brand.low.selected / blend.medium | #629dffb3 | #0058d4b3 |
background.brand.low.selected / blend.high | #629dff80 | #0058d480 |
background.brand.low.selected / blend.strong | #629dff4d | #0058d44d |
background.brand.low.selected / blend.full | #629dff00 | #0058d400 |
Intent: brand, attention: base
| Token name | light | dark |
|---|---|---|
background.brand.base.default / blend.solid | #ffffff | #000000 |
background.brand.base.default / blend.low | #ffffffe6 | #000000e6 |
background.brand.base.default / blend.medium | #ffffffb3 | #000000b3 |
background.brand.base.default / blend.high | #ffffff80 | #00000080 |
background.brand.base.default / blend.strong | #ffffff4d | #0000004d |
background.brand.base.default / blend.full | #ffffff00 | #00000000 |
background.brand.base.hovered / blend.solid | #ccdfff | #003f9d |
background.brand.base.hovered / blend.low | #ccdfffe6 | #003f9de6 |
background.brand.base.hovered / blend.medium | #ccdfffb3 | #003f9db3 |
background.brand.base.hovered / blend.high | #ccdfff80 | #003f9d80 |
background.brand.base.hovered / blend.strong | #ccdfff4d | #003f9d4d |
background.brand.base.hovered / blend.full | #ccdfff00 | #003f9d00 |
background.brand.base.pressed / blend.solid | #98bfff | #0058d4 |
background.brand.base.pressed / blend.low | #98bfffe6 | #0058d4e6 |
background.brand.base.pressed / blend.medium | #98bfffb3 | #0058d4b3 |
background.brand.base.pressed / blend.high | #98bfff80 | #0058d480 |
background.brand.base.pressed / blend.strong | #98bfff4d | #0058d44d |
background.brand.base.pressed / blend.full | #98bfff00 | #0058d400 |
background.brand.base.selected / blend.solid | #b2cfff | #003483 |
background.brand.base.selected / blend.low | #b2cfffe6 | #003483e6 |
background.brand.base.selected / blend.medium | #b2cfffb3 | #003483b3 |
background.brand.base.selected / blend.high | #b2cfff80 | #00348380 |
background.brand.base.selected / blend.strong | #b2cfff4d | #0034834d |
background.brand.base.selected / blend.full | #b2cfff00 | #00348300 |
Intent: brand
/**
* [IMPORTANT]: Private properties marked ---- are not intended for direct usage
*/
:root,
:host {
/**
* Blend scale
*/
----blend--0: 0;
----blend--10: 0.1;
----blend--20: 0.2;
----blend--30: 0.3;
----blend--40: 0.4;
----blend--50: 0.5;
----blend--60: 0.6;
----blend--70: 0.7;
----blend--80: 0.8;
----blend--90: 0.9;
----blend--100: 1;
/**
* Color scales
*/
/* Swatch scale for brand: */
----intent--brand: 0.2154 26;
----swatch--brand-0: 0 0 0;
----swatch--brand-25: ;
----swatch--brand-50: 2;
----swatch--brand-75: 1 7;
----swatch--brand-100: 3 16;
----swatch--brand-125: 5 26;
----swatch--brand-150: 9 36;
----swatch--brand-175: 14 47;
----swatch--brand-200: 19 58;
----swatch--brand-225: 24 69;
----swatch--brand-250: 29 81;
----swatch--brand-275: 34 93;
----swatch--brand-300: 4 105;
----swatch--brand-325: 46 118;
----swatch--brand-350: 52 131;
----swatch--brand-375: 57 144;
----swatch--brand-400: 63 157;
----swatch--brand-425: 7 171;
----swatch--brand-450: 76 184;
----swatch--brand-475: 82 198;
----swatch--brand-500: 88 212;
----swatch--brand-525: 95 226;
----swatch--brand-550: 13 103 236;
----swatch--brand-575: 25 111 245;
----swatch--brand-600: 35 119 253;
----swatch--brand-625: 52 129 255;
----swatch--brand-650: 68 139 255;
----swatch--brand-675: 83 148 255;
----swatch--brand-700: 98 157 255;
----swatch--brand-725: 112 166 255;
----swatch--brand-750: 125 174 255;
----swatch--brand-775: 138 183 255;
----swatch--brand-800: 152 191 255;
----swatch--brand-825: 165 199 255;
----swatch--brand-850: 178 207 255;
----swatch--brand-875: 191 215 255;
----swatch--brand-900: 204 223 255;
----swatch--brand-925: 217 231 255;
----swatch--brand-950: 229 239 255;
----swatch--brand-975: 242 247 255;
----swatch--brand-1000: 255 255 255;
/**
* Blend tokens
*/
--blend--solid: var(----blend--100);
--blend--low: var(----blend--90);
--blend--medium: var(----blend--70);
--blend--high: var(----blend--50);
--blend--strong: var(----blend--30);
--blend--full: var(----blend--0);
/**
* Color tokens
*
* Provided tokens are not fully functional on their own.
* They must be used with rgb() CSS function to create CSS color, e.g.:
*
* color: rgb(var(--background--critical-medium-hovered--dark));
*
* These tokens can be combined with blend tokens to create semi-transparent colors, e.g.:
*
* color: rgb(var(--foreground--critical-high-default--light) / var(--blend--medium));
* background-color: rgb(var(--background--critical-medium-default--light) / var(--blend--medium));
* border-color: rgb(var(--border--critical-medium-default--light) / var(--blend--medium));
*/
/**
* Abstract background tokens for brand intent:
*/
--background--brand-base-default--light: var(----swatch--brand-1000);
--background--brand-base-default--dark: var(----swatch--brand-0);
--background--brand-base-hovered--light: var(----swatch--brand-900);
--background--brand-base-hovered--dark: var(----swatch--brand-400);
--background--brand-base-pressed--light: var(----swatch--brand-800);
--background--brand-base-pressed--dark: var(----swatch--brand-500);
--background--brand-base-selected--light: var(----swatch--brand-850);
--background--brand-base-selected--dark: var(----swatch--brand-350);
--background--brand-low-default--light: var(----swatch--brand-850);
--background--brand-low-default--dark: var(----swatch--brand-300);
--background--brand-low-hovered--light: var(----swatch--brand-750);
--background--brand-low-hovered--dark: var(----swatch--brand-450);
--background--brand-low-pressed--light: var(----swatch--brand-650);
--background--brand-low-pressed--dark: var(----swatch--brand-550);
--background--brand-low-selected--light: var(----swatch--brand-700);
--background--brand-low-selected--dark: var(----swatch--brand-500);
--background--brand-medium-default--light: var(----swatch--brand-700);
--background--brand-medium-default--dark: var(----swatch--brand-450);
--background--brand-medium-hovered--light: var(----swatch--brand-600);
--background--brand-medium-hovered--dark: var(----swatch--brand-550);
--background--brand-medium-pressed--light: var(----swatch--brand-500);
--background--brand-medium-pressed--dark: var(----swatch--brand-650);
--background--brand-medium-selected--light: var(----swatch--brand-550);
--background--brand-medium-selected--dark: var(----swatch--brand-600);
--background--brand-high-default--light: var(----swatch--brand-550);
--background--brand-high-default--dark: var(----swatch--brand-550);
--background--brand-high-hovered--light: var(----swatch--brand-650);
--background--brand-high-hovered--dark: var(----swatch--brand-450);
--background--brand-high-pressed--light: var(----swatch--brand-750);
--background--brand-high-pressed--dark: var(----swatch--brand-350);
--background--brand-high-selected--light: var(----swatch--brand-700);
--background--brand-high-selected--dark: var(----swatch--brand-400);
--background--brand-strong-default--light: var(----swatch--brand-450);
--background--brand-strong-default--dark: var(----swatch--brand-750);
--background--brand-strong-hovered--light: var(----swatch--brand-600);
--background--brand-strong-hovered--dark: var(----swatch--brand-650);
--background--brand-strong-pressed--light: var(----swatch--brand-700);
--background--brand-strong-pressed--dark: var(----swatch--brand-550);
--background--brand-strong-selected--light: var(----swatch--brand-650);
--background--brand-strong-selected--dark: var(----swatch--brand-600);
--background--brand-full-default--light: var(----swatch--brand-0);
--background--brand-full-default--dark: var(----swatch--brand-1000);
--background--brand-full-hovered--light: var(----swatch--brand-400);
--background--brand-full-hovered--dark: var(----swatch--brand-900);
--background--brand-full-pressed--light: var(----swatch--brand-500);
--background--brand-full-pressed--dark: var(----swatch--brand-800);
--background--brand-full-selected--light: var(----swatch--brand-350);
--background--brand-full-selected--dark: var(----swatch--brand-850);
}
Intent: brand
{
"Scales": {
"__scales": {
"swatch": {
"brand": {
"0": {
"$type": "color",
"$value": "#000000"
},
"25": {
"$type": "color",
"$value": "#000000"
},
"50": {
"$type": "color",
"$value": "#000002"
},
"75": {
"$type": "color",
"$value": "#000107"
},
"100": {
"$type": "color",
"$value": "#000310"
},
"125": {
"$type": "color",
"$value": "#00051a"
},
"150": {
"$type": "color",
"$value": "#000924"
},
"175": {
"$type": "color",
"$value": "#000e2f"
},
"200": {
"$type": "color",
"$value": "#00133a"
},
"225": {
"$type": "color",
"$value": "#001845"
},
"250": {
"$type": "color",
"$value": "#001d51"
},
"275": {
"$type": "color",
"$value": "#00225d"
},
"300": {
"$type": "color",
"$value": "#002869"
},
"325": {
"$type": "color",
"$value": "#002e76"
},
"350": {
"$type": "color",
"$value": "#003483"
},
"375": {
"$type": "color",
"$value": "#003990"
},
"400": {
"$type": "color",
"$value": "#003f9d"
},
"425": {
"$type": "color",
"$value": "#0046ab"
},
"450": {
"$type": "color",
"$value": "#004cb8"
},
"475": {
"$type": "color",
"$value": "#0052c6"
},
"500": {
"$type": "color",
"$value": "#0058d4"
},
"525": {
"$type": "color",
"$value": "#005fe2"
},
"550": {
"$type": "color",
"$value": "#0d67ec"
},
"575": {
"$type": "color",
"$value": "#196ff5"
},
"600": {
"$type": "color",
"$value": "#2377fd"
},
"625": {
"$type": "color",
"$value": "#3481ff"
},
"650": {
"$type": "color",
"$value": "#448bff"
},
"675": {
"$type": "color",
"$value": "#5394ff"
},
"700": {
"$type": "color",
"$value": "#629dff"
},
"725": {
"$type": "color",
"$value": "#70a6ff"
},
"750": {
"$type": "color",
"$value": "#7daeff"
},
"775": {
"$type": "color",
"$value": "#8ab7ff"
},
"800": {
"$type": "color",
"$value": "#98bfff"
},
"825": {
"$type": "color",
"$value": "#a5c7ff"
},
"850": {
"$type": "color",
"$value": "#b2cfff"
},
"875": {
"$type": "color",
"$value": "#bfd7ff"
},
"900": {
"$type": "color",
"$value": "#ccdfff"
},
"925": {
"$type": "color",
"$value": "#d9e7ff"
},
"950": {
"$type": "color",
"$value": "#e5efff"
},
"975": {
"$type": "color",
"$value": "#f2f7ff"
},
"1000": {
"$type": "color",
"$value": "#ffffff"
}
}
},
"blend": {
"0": {
"$type": "number",
"$value": 0
},
"10": {
"$type": "number",
"$value": 10
},
"20": {
"$type": "number",
"$value": 20
},
"30": {
"$type": "number",
"$value": 30
},
"40": {
"$type": "number",
"$value": 40
},
"50": {
"$type": "number",
"$value": 50
},
"60": {
"$type": "number",
"$value": 60
},
"70": {
"$type": "number",
"$value": 70
},
"80": {
"$type": "number",
"$value": 80
},
"90": {
"$type": "number",
"$value": 90
},
"100": {
"$type": "number",
"$value": 100
}
}
}
},
"Blends": {
"solid": {
"$type": "number",
"$value": "{__scales/blend/100}"
},
"low": {
"$type": "number",
"$value": "{__scales/blend/90}"
},
"medium": {
"$type": "number",
"$value": "{__scales/blend/70}"
},
"high": {
"$type": "number",
"$value": "{__scales/blend/50}"
},
"strong": {
"$type": "number",
"$value": "{__scales/blend/30}"
},
"full": {
"$type": "number",
"$value": "{__scales/blend/0}"
}
},
"Colors": {
"background": {
"brand": {
"base": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/1000}",
"dark": "{__scales/swatch/brand/0}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/900}",
"dark": "{__scales/swatch/brand/400}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/800}",
"dark": "{__scales/swatch/brand/500}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/850}",
"dark": "{__scales/swatch/brand/350}"
}
}
},
"low": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/850}",
"dark": "{__scales/swatch/brand/300}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/750}",
"dark": "{__scales/swatch/brand/450}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/650}",
"dark": "{__scales/swatch/brand/550}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/700}",
"dark": "{__scales/swatch/brand/500}"
}
}
},
"medium": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/700}",
"dark": "{__scales/swatch/brand/450}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/600}",
"dark": "{__scales/swatch/brand/550}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/500}",
"dark": "{__scales/swatch/brand/650}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/550}",
"dark": "{__scales/swatch/brand/600}"
}
}
},
"high": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/550}",
"dark": "{__scales/swatch/brand/550}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/650}",
"dark": "{__scales/swatch/brand/450}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/750}",
"dark": "{__scales/swatch/brand/350}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/700}",
"dark": "{__scales/swatch/brand/400}"
}
}
},
"strong": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/450}",
"dark": "{__scales/swatch/brand/750}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/600}",
"dark": "{__scales/swatch/brand/650}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/700}",
"dark": "{__scales/swatch/brand/550}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/650}",
"dark": "{__scales/swatch/brand/600}"
}
}
},
"full": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/0}",
"dark": "{__scales/swatch/brand/1000}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/400}",
"dark": "{__scales/swatch/brand/900}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/500}",
"dark": "{__scales/swatch/brand/800}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/brand/350}",
"dark": "{__scales/swatch/brand/850}"
}
}
}
}
}
}
}
We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.
const scales = {
"blend": {
"0": 0,
"10": 0.1,
"20": 0.2,
"30": 0.3,
"40": 0.4,
"50": 0.5,
"60": 0.6,
"70": 0.7,
"80": 0.8,
"90": 0.9,
"100": 1
},
"intent": {
"brand": "0.533 0.215 260"
},
"swatch": {
"brand": {
"0": "0 0 0",
"25": " ",
"50": " 2",
"75": " 1 7",
"100": " 3 16",
"125": " 5 26",
"150": " 9 36",
"175": " 14 47",
"200": " 19 58",
"225": " 24 69",
"250": " 29 81",
"275": " 34 93",
"300": " 4 105",
"325": " 46 118",
"350": " 52 131",
"375": " 57 144",
"400": " 63 157",
"425": " 7 171",
"450": " 76 184",
"475": " 82 198",
"500": " 88 212",
"525": " 95 226",
"550": "13 103 236",
"575": "25 111 245",
"600": "35 119 253",
"625": "52 129 255",
"650": "68 139 255",
"675": "83 148 255",
"700": "98 157 255",
"725": "112 166 255",
"750": "125 174 255",
"775": "138 183 255",
"800": "152 191 255",
"825": "165 199 255",
"850": "178 207 255",
"875": "191 215 255",
"900": "204 223 255",
"925": "217 231 255",
"950": "229 239 255",
"975": "242 247 255",
"1000": "255 255 255"
}
}
} as const;
export const tokens = {
"light": {
"blend": {
"solid": 100,
"low": 90,
"medium": 70,
"high": 50,
"strong": 30,
"full": scales.blend[0]
},
"color": {
"background": {
"brand": {
"base": {
"default": scales.swatch.brand[1000],
"hovered": scales.swatch.brand[900],
"pressed": scales.swatch.brand[800],
"selected": scales.swatch.brand[850]
},
"low": {
"default": scales.swatch.brand[850],
"hovered": scales.swatch.brand[750],
"pressed": scales.swatch.brand[650],
"selected": scales.swatch.brand[700]
},
"medium": {
"default": scales.swatch.brand[700],
"hovered": scales.swatch.brand[600],
"pressed": scales.swatch.brand[500],
"selected": scales.swatch.brand[550]
},
"high": {
"default": scales.swatch.brand[550],
"hovered": scales.swatch.brand[650],
"pressed": scales.swatch.brand[750],
"selected": scales.swatch.brand[700]
},
"strong": {
"default": scales.swatch.brand[450],
"hovered": scales.swatch.brand[600],
"pressed": scales.swatch.brand[700],
"selected": scales.swatch.brand[650]
},
"full": {
"default": scales.swatch.brand[0],
"hovered": scales.swatch.brand[400],
"pressed": scales.swatch.brand[500],
"selected": scales.swatch.brand[350]
}
}
}
}
},
"dark": {
"blend": {
"solid": 100,
"low": 90,
"medium": 70,
"high": 50,
"strong": 30,
"full": scales.blend[0]
},
"color": {
"background": {
"brand": {
"base": {
"default": scales.swatch.brand[0],
"hovered": scales.swatch.brand[400],
"pressed": scales.swatch.brand[500],
"selected": scales.swatch.brand[350]
},
"low": {
"default": scales.swatch.brand[300],
"hovered": scales.swatch.brand[450],
"pressed": scales.swatch.brand[550],
"selected": scales.swatch.brand[500]
},
"medium": {
"default": scales.swatch.brand[450],
"hovered": scales.swatch.brand[550],
"pressed": scales.swatch.brand[650],
"selected": scales.swatch.brand[600]
},
"high": {
"default": scales.swatch.brand[550],
"hovered": scales.swatch.brand[450],
"pressed": scales.swatch.brand[350],
"selected": scales.swatch.brand[400]
},
"strong": {
"default": scales.swatch.brand[750],
"hovered": scales.swatch.brand[650],
"pressed": scales.swatch.brand[550],
"selected": scales.swatch.brand[600]
},
"full": {
"default": scales.swatch.brand[1000],
"hovered": scales.swatch.brand[900],
"pressed": scales.swatch.brand[800],
"selected": scales.swatch.brand[850]
}
}
}
}
}
} as const;
Up Next
Typography Tokens
Typography tokens define text styles and typographic hierarchy in our user interfaces.