Foreground Tokens
Foreground color tokens define the colors used for text, icons, and other foreground elements across our user interfaces.
Prerequisites
In this section assumes that you are already familiar with the concept of Intents, Attentions, and States explained in the Color Tokens section.
Also, make sure to review the Background Color Tokens section to understand how background colors are constructed, as foreground colors interact closely with background colors.
Before we dive in
Foreground tokens are way more complex than the background tokens. The foreground always appears on top of a background and that needs to be taken into account when defining foreground colors.
When selecting the right foreground color tokens for a specific use case, we need to ask ourselves these four (plus one) questions:
- Should the foreground intent align with the background intent or differ from it?
- Should the foreground have additional or reduced attention compared to the background?
- Should the state of the foreground be separate from the background state?
- Should the foreground blend with the background or its color should remain prominent?
Each of these aspects has its own set of exceptions and rules due to the complexity of foreground blending, legibility requirements, accessibility standards, and visual hierarchy considerations.
Final question that should guide your decisions:
"Will the user interact with the foreground or the whole background?"
Whole background states include, e.g.:
- buttons or interactive cards where the user clicks/taps anywhere on the background to trigger an action,
- input fields where the user focuses on the whole input area to type text.
Foreground only states include, e.g.:
- links within a paragraph where only the text is clickable,
- icons that trigger actions when clicked/tapped.
There is never a one-size-fits-all answer to these questions. However, you should start with less and only add complexity as needed:
- Start with a simple background with no attention against its surroundings.
- Use a neutral foreground color with medium attention on top of it.
- Adjust intent, attention, add state of background and/or or intent, attention, add state and blending of the foreground to achieve the desired user experience.
- Iterate and test different combinations to find the optimal balance between aesthetics, usability, and accessibility.
Always prioritize legibility and accessibility when making these decisions.
Naming Convention
foreground.<intent>.<attention>.<state> / blend.<blend>To create foreground color tokens we combine three aspects: intent, attention, and state. Each intent creates a combination with all attention and state levels. To control transparency, compose with a separate blend.<blend> token.
Not every application will need all combinations, so choose the ones that best fit your use cases.
Default Foreground Tokens
important
The following set of tokens represent the default options that should cover most use cases in our design system. No values are strictly enforced here, however, we recommend using these as a starting point for your products.
- Preview
- CSS Custom Properties
- Figma JSON
- TypeScript
Intent: neutral, attention: full
| Token name | light | dark |
|---|---|---|
foreground.neutral.full.default / blend.solid | T#000000 | T#ffffff |
foreground.neutral.full.default / blend.low | T#000000e6 | T#ffffffe6 |
foreground.neutral.full.default / blend.medium | T#000000b3 | T#ffffffb3 |
foreground.neutral.full.default / blend.high | T#00000080 | T#ffffff80 |
foreground.neutral.full.default / blend.strong | T#0000004d | T#ffffff4d |
foreground.neutral.full.default / blend.full | T#00000000 | T#ffffff00 |
foreground.neutral.full.hovered / blend.solid | T#4c473f | T#e3ddd3 |
foreground.neutral.full.hovered / blend.low | T#4c473fe6 | T#e3ddd3e6 |
foreground.neutral.full.hovered / blend.medium | T#4c473fb3 | T#e3ddd3b3 |
foreground.neutral.full.hovered / blend.high | T#4c473f80 | T#e3ddd380 |
foreground.neutral.full.hovered / blend.strong | T#4c473f4d | T#e3ddd34d |
foreground.neutral.full.hovered / blend.full | T#4c473f00 | T#e3ddd300 |
foreground.neutral.full.pressed / blend.solid | T#67635a | T#c2bdb3 |
foreground.neutral.full.pressed / blend.low | T#67635ae6 | T#c2bdb3e6 |
foreground.neutral.full.pressed / blend.medium | T#67635ab3 | T#c2bdb3b3 |
foreground.neutral.full.pressed / blend.high | T#67635a80 | T#c2bdb380 |
foreground.neutral.full.pressed / blend.strong | T#67635a4d | T#c2bdb34d |
foreground.neutral.full.pressed / blend.full | T#67635a00 | T#c2bdb300 |
foreground.neutral.full.selected / blend.solid | T#3e3a32 | T#d3cdc3 |
foreground.neutral.full.selected / blend.low | T#3e3a32e6 | T#d3cdc3e6 |
foreground.neutral.full.selected / blend.medium | T#3e3a32b3 | T#d3cdc3b3 |
foreground.neutral.full.selected / blend.high | T#3e3a3280 | T#d3cdc380 |
foreground.neutral.full.selected / blend.strong | T#3e3a324d | T#d3cdc34d |
foreground.neutral.full.selected / blend.full | T#3e3a3200 | T#d3cdc300 |
Intent: neutral, attention: strong
| Token name | light | dark |
|---|---|---|
foreground.neutral.strong.default / blend.solid | T#59554c | T#e3ddd3 |
foreground.neutral.strong.default / blend.low | T#59554ce6 | T#e3ddd3e6 |
foreground.neutral.strong.default / blend.medium | T#59554cb3 | T#e3ddd3b3 |
foreground.neutral.strong.default / blend.high | T#59554c80 | T#e3ddd380 |
foreground.neutral.strong.default / blend.strong | T#59554c4d | T#e3ddd34d |
foreground.neutral.strong.default / blend.full | T#59554c00 | T#e3ddd300 |
foreground.neutral.strong.hovered / blend.solid | T#858076 | T#c2bdb3 |
foreground.neutral.strong.hovered / blend.low | T#858076e6 | T#c2bdb3e6 |
foreground.neutral.strong.hovered / blend.medium | T#858076b3 | T#c2bdb3b3 |
foreground.neutral.strong.hovered / blend.high | T#85807680 | T#c2bdb380 |
foreground.neutral.strong.hovered / blend.strong | T#8580764d | T#c2bdb34d |
foreground.neutral.strong.hovered / blend.full | T#85807600 | T#c2bdb300 |
foreground.neutral.strong.pressed / blend.solid | T#a39e94 | T#a39e94 |
foreground.neutral.strong.pressed / blend.low | T#a39e94e6 | T#a39e94e6 |
foreground.neutral.strong.pressed / blend.medium | T#a39e94b3 | T#a39e94b3 |
foreground.neutral.strong.pressed / blend.high | T#a39e9480 | T#a39e9480 |
foreground.neutral.strong.pressed / blend.strong | T#a39e944d | T#a39e944d |
foreground.neutral.strong.pressed / blend.full | T#a39e9400 | T#a39e9400 |
foreground.neutral.strong.selected / blend.solid | T#948e85 | T#b3ada4 |
foreground.neutral.strong.selected / blend.low | T#948e85e6 | T#b3ada4e6 |
foreground.neutral.strong.selected / blend.medium | T#948e85b3 | T#b3ada4b3 |
foreground.neutral.strong.selected / blend.high | T#948e8580 | T#b3ada480 |
foreground.neutral.strong.selected / blend.strong | T#948e854d | T#b3ada44d |
foreground.neutral.strong.selected / blend.full | T#948e8500 | T#b3ada400 |
Intent: neutral, attention: high
| Token name | light | dark |
|---|---|---|
foreground.neutral.high.default / blend.solid | T#67635a | T#c2bdb3 |
foreground.neutral.high.default / blend.low | T#67635ae6 | T#c2bdb3e6 |
foreground.neutral.high.default / blend.medium | T#67635ab3 | T#c2bdb3b3 |
foreground.neutral.high.default / blend.high | T#67635a80 | T#c2bdb380 |
foreground.neutral.high.default / blend.strong | T#67635a4d | T#c2bdb34d |
foreground.neutral.high.default / blend.full | T#67635a00 | T#c2bdb300 |
foreground.neutral.high.hovered / blend.solid | T#858076 | T#a39e94 |
foreground.neutral.high.hovered / blend.low | T#858076e6 | T#a39e94e6 |
foreground.neutral.high.hovered / blend.medium | T#858076b3 | T#a39e94b3 |
foreground.neutral.high.hovered / blend.high | T#85807680 | T#a39e9480 |
foreground.neutral.high.hovered / blend.strong | T#8580764d | T#a39e944d |
foreground.neutral.high.hovered / blend.full | T#85807600 | T#a39e9400 |
foreground.neutral.high.pressed / blend.solid | T#a39e94 | T#858076 |
foreground.neutral.high.pressed / blend.low | T#a39e94e6 | T#858076e6 |
foreground.neutral.high.pressed / blend.medium | T#a39e94b3 | T#858076b3 |
foreground.neutral.high.pressed / blend.high | T#a39e9480 | T#85807680 |
foreground.neutral.high.pressed / blend.strong | T#a39e944d | T#8580764d |
foreground.neutral.high.pressed / blend.full | T#a39e9400 | T#85807600 |
foreground.neutral.high.selected / blend.solid | T#948e85 | T#948e85 |
foreground.neutral.high.selected / blend.low | T#948e85e6 | T#948e85e6 |
foreground.neutral.high.selected / blend.medium | T#948e85b3 | T#948e85b3 |
foreground.neutral.high.selected / blend.high | T#948e8580 | T#948e8580 |
foreground.neutral.high.selected / blend.strong | T#948e854d | T#948e854d |
foreground.neutral.high.selected / blend.full | T#948e8500 | T#948e8500 |
Intent: neutral, attention: medium
| Token name | light | dark |
|---|---|---|
foreground.neutral.medium.default / blend.solid | T#948e85 | T#67635a |
foreground.neutral.medium.default / blend.low | T#948e85e6 | T#67635ae6 |
foreground.neutral.medium.default / blend.medium | T#948e85b3 | T#67635ab3 |
foreground.neutral.medium.default / blend.high | T#948e8580 | T#67635a80 |
foreground.neutral.medium.default / blend.strong | T#948e854d | T#67635a4d |
foreground.neutral.medium.default / blend.full | T#948e8500 | T#67635a00 |
foreground.neutral.medium.hovered / blend.solid | T#767168 | T#858076 |
foreground.neutral.medium.hovered / blend.low | T#767168e6 | T#858076e6 |
foreground.neutral.medium.hovered / blend.medium | T#767168b3 | T#858076b3 |
foreground.neutral.medium.hovered / blend.high | T#76716880 | T#85807680 |
foreground.neutral.medium.hovered / blend.strong | T#7671684d | T#8580764d |
foreground.neutral.medium.hovered / blend.full | T#76716800 | T#85807600 |
foreground.neutral.medium.pressed / blend.solid | T#59554c | T#a39e94 |
foreground.neutral.medium.pressed / blend.low | T#59554ce6 | T#a39e94e6 |
foreground.neutral.medium.pressed / blend.medium | T#59554cb3 | T#a39e94b3 |
foreground.neutral.medium.pressed / blend.high | T#59554c80 | T#a39e9480 |
foreground.neutral.medium.pressed / blend.strong | T#59554c4d | T#a39e944d |
foreground.neutral.medium.pressed / blend.full | T#59554c00 | T#a39e9400 |
foreground.neutral.medium.selected / blend.solid | T#67635a | T#948e85 |
foreground.neutral.medium.selected / blend.low | T#67635ae6 | T#948e85e6 |
foreground.neutral.medium.selected / blend.medium | T#67635ab3 | T#948e85b3 |
foreground.neutral.medium.selected / blend.high | T#67635a80 | T#948e8580 |
foreground.neutral.medium.selected / blend.strong | T#67635a4d | T#948e854d |
foreground.neutral.medium.selected / blend.full | T#67635a00 | T#948e8500 |
Intent: neutral, attention: low
| Token name | light | dark |
|---|---|---|
foreground.neutral.low.default / blend.solid | T#d3cdc3 | T#59554c |
foreground.neutral.low.default / blend.low | T#d3cdc3e6 | T#59554ce6 |
foreground.neutral.low.default / blend.medium | T#d3cdc3b3 | T#59554cb3 |
foreground.neutral.low.default / blend.high | T#d3cdc380 | T#59554c80 |
foreground.neutral.low.default / blend.strong | T#d3cdc34d | T#59554c4d |
foreground.neutral.low.default / blend.full | T#d3cdc300 | T#59554c00 |
foreground.neutral.low.hovered / blend.solid | T#b3ada4 | T#858076 |
foreground.neutral.low.hovered / blend.low | T#b3ada4e6 | T#858076e6 |
foreground.neutral.low.hovered / blend.medium | T#b3ada4b3 | T#858076b3 |
foreground.neutral.low.hovered / blend.high | T#b3ada480 | T#85807680 |
foreground.neutral.low.hovered / blend.strong | T#b3ada44d | T#8580764d |
foreground.neutral.low.hovered / blend.full | T#b3ada400 | T#85807600 |
foreground.neutral.low.pressed / blend.solid | T#948e85 | T#a39e94 |
foreground.neutral.low.pressed / blend.low | T#948e85e6 | T#a39e94e6 |
foreground.neutral.low.pressed / blend.medium | T#948e85b3 | T#a39e94b3 |
foreground.neutral.low.pressed / blend.high | T#948e8580 | T#a39e9480 |
foreground.neutral.low.pressed / blend.strong | T#948e854d | T#a39e944d |
foreground.neutral.low.pressed / blend.full | T#948e8500 | T#a39e9400 |
foreground.neutral.low.selected / blend.solid | T#a39e94 | T#948e85 |
foreground.neutral.low.selected / blend.low | T#a39e94e6 | T#948e85e6 |
foreground.neutral.low.selected / blend.medium | T#a39e94b3 | T#948e85b3 |
foreground.neutral.low.selected / blend.high | T#a39e9480 | T#948e8580 |
foreground.neutral.low.selected / blend.strong | T#a39e944d | T#948e854d |
foreground.neutral.low.selected / blend.full | T#a39e9400 | T#948e8500 |
Intent: neutral, attention: base
| Token name | light | dark |
|---|---|---|
foreground.neutral.base.default / blend.solid | T#ffffff | T#000000 |
foreground.neutral.base.default / blend.low | T#ffffffe6 | T#000000e6 |
foreground.neutral.base.default / blend.medium | T#ffffffb3 | T#000000b3 |
foreground.neutral.base.default / blend.high | T#ffffff80 | T#00000080 |
foreground.neutral.base.default / blend.strong | T#ffffff4d | T#0000004d |
foreground.neutral.base.default / blend.full | T#ffffff00 | T#00000000 |
foreground.neutral.base.hovered / blend.solid | T#e3ddd3 | T#4c473f |
foreground.neutral.base.hovered / blend.low | T#e3ddd3e6 | T#4c473fe6 |
foreground.neutral.base.hovered / blend.medium | T#e3ddd3b3 | T#4c473fb3 |
foreground.neutral.base.hovered / blend.high | T#e3ddd380 | T#4c473f80 |
foreground.neutral.base.hovered / blend.strong | T#e3ddd34d | T#4c473f4d |
foreground.neutral.base.hovered / blend.full | T#e3ddd300 | T#4c473f00 |
foreground.neutral.base.pressed / blend.solid | T#c2bdb3 | T#67635a |
foreground.neutral.base.pressed / blend.low | T#c2bdb3e6 | T#67635ae6 |
foreground.neutral.base.pressed / blend.medium | T#c2bdb3b3 | T#67635ab3 |
foreground.neutral.base.pressed / blend.high | T#c2bdb380 | T#67635a80 |
foreground.neutral.base.pressed / blend.strong | T#c2bdb34d | T#67635a4d |
foreground.neutral.base.pressed / blend.full | T#c2bdb300 | T#67635a00 |
foreground.neutral.base.selected / blend.solid | T#d3cdc3 | T#3e3a32 |
foreground.neutral.base.selected / blend.low | T#d3cdc3e6 | T#3e3a32e6 |
foreground.neutral.base.selected / blend.medium | T#d3cdc3b3 | T#3e3a32b3 |
foreground.neutral.base.selected / blend.high | T#d3cdc380 | T#3e3a3280 |
foreground.neutral.base.selected / blend.strong | T#d3cdc34d | T#3e3a324d |
foreground.neutral.base.selected / blend.full | T#d3cdc300 | T#3e3a3200 |
Intent: neutral
/**
* [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 neutral: */
----intent--neutral: 0.0148 82;
----swatch--neutral-0: 0 0 0;
----swatch--neutral-25: ;
----swatch--neutral-50: 1 ;
----swatch--neutral-75: 2 1 ;
----swatch--neutral-100: 5 3 1;
----swatch--neutral-125: 9 6 2;
----swatch--neutral-150: 14 11 5;
----swatch--neutral-175: 2 16 9;
----swatch--neutral-200: 25 21 14;
----swatch--neutral-225: 31 27 2;
----swatch--neutral-250: 37 33 26;
----swatch--neutral-275: 43 39 32;
----swatch--neutral-300: 5 45 38;
----swatch--neutral-325: 56 51 44;
----swatch--neutral-350: 62 58 5;
----swatch--neutral-375: 69 64 56;
----swatch--neutral-400: 76 71 63;
----swatch--neutral-425: 82 78 69;
----swatch--neutral-450: 89 85 76;
----swatch--neutral-475: 96 92 83;
----swatch--neutral-500: 103 99 9;
----swatch--neutral-525: 111 106 97;
----swatch--neutral-550: 118 113 104;
----swatch--neutral-575: 125 12 111;
----swatch--neutral-600: 133 128 118;
----swatch--neutral-625: 14 135 126;
----swatch--neutral-650: 148 142 133;
----swatch--neutral-675: 155 15 141;
----swatch--neutral-700: 163 158 148;
----swatch--neutral-725: 171 165 156;
----swatch--neutral-750: 179 173 164;
----swatch--neutral-775: 186 181 171;
----swatch--neutral-800: 194 189 179;
----swatch--neutral-825: 202 197 187;
----swatch--neutral-850: 211 205 195;
----swatch--neutral-875: 219 213 203;
----swatch--neutral-900: 227 221 211;
----swatch--neutral-925: 235 229 219;
----swatch--neutral-950: 243 238 228;
----swatch--neutral-975: 252 246 236;
----swatch--neutral-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 foreground tokens for neutral intent:
*/
--foreground--neutral-base-default--light: var(----swatch--neutral-1000);
--foreground--neutral-base-default--dark: var(----swatch--neutral-0);
--foreground--neutral-base-hovered--light: var(----swatch--neutral-900);
--foreground--neutral-base-hovered--dark: var(----swatch--neutral-400);
--foreground--neutral-base-pressed--light: var(----swatch--neutral-800);
--foreground--neutral-base-pressed--dark: var(----swatch--neutral-500);
--foreground--neutral-base-selected--light: var(----swatch--neutral-850);
--foreground--neutral-base-selected--dark: var(----swatch--neutral-350);
--foreground--neutral-low-default--light: var(----swatch--neutral-850);
--foreground--neutral-low-default--dark: var(----swatch--neutral-450);
--foreground--neutral-low-hovered--light: var(----swatch--neutral-750);
--foreground--neutral-low-hovered--dark: var(----swatch--neutral-600);
--foreground--neutral-low-pressed--light: var(----swatch--neutral-650);
--foreground--neutral-low-pressed--dark: var(----swatch--neutral-700);
--foreground--neutral-low-selected--light: var(----swatch--neutral-700);
--foreground--neutral-low-selected--dark: var(----swatch--neutral-650);
--foreground--neutral-medium-default--light: var(----swatch--neutral-650);
--foreground--neutral-medium-default--dark: var(----swatch--neutral-500);
--foreground--neutral-medium-hovered--light: var(----swatch--neutral-550);
--foreground--neutral-medium-hovered--dark: var(----swatch--neutral-600);
--foreground--neutral-medium-pressed--light: var(----swatch--neutral-450);
--foreground--neutral-medium-pressed--dark: var(----swatch--neutral-700);
--foreground--neutral-medium-selected--light: var(----swatch--neutral-500);
--foreground--neutral-medium-selected--dark: var(----swatch--neutral-650);
--foreground--neutral-high-default--light: var(----swatch--neutral-500);
--foreground--neutral-high-default--dark: var(----swatch--neutral-800);
--foreground--neutral-high-hovered--light: var(----swatch--neutral-600);
--foreground--neutral-high-hovered--dark: var(----swatch--neutral-700);
--foreground--neutral-high-pressed--light: var(----swatch--neutral-700);
--foreground--neutral-high-pressed--dark: var(----swatch--neutral-600);
--foreground--neutral-high-selected--light: var(----swatch--neutral-650);
--foreground--neutral-high-selected--dark: var(----swatch--neutral-650);
--foreground--neutral-strong-default--light: var(----swatch--neutral-450);
--foreground--neutral-strong-default--dark: var(----swatch--neutral-900);
--foreground--neutral-strong-hovered--light: var(----swatch--neutral-600);
--foreground--neutral-strong-hovered--dark: var(----swatch--neutral-800);
--foreground--neutral-strong-pressed--light: var(----swatch--neutral-700);
--foreground--neutral-strong-pressed--dark: var(----swatch--neutral-700);
--foreground--neutral-strong-selected--light: var(----swatch--neutral-650);
--foreground--neutral-strong-selected--dark: var(----swatch--neutral-750);
--foreground--neutral-full-default--light: var(----swatch--neutral-0);
--foreground--neutral-full-default--dark: var(----swatch--neutral-1000);
--foreground--neutral-full-hovered--light: var(----swatch--neutral-400);
--foreground--neutral-full-hovered--dark: var(----swatch--neutral-900);
--foreground--neutral-full-pressed--light: var(----swatch--neutral-500);
--foreground--neutral-full-pressed--dark: var(----swatch--neutral-800);
--foreground--neutral-full-selected--light: var(----swatch--neutral-350);
--foreground--neutral-full-selected--dark: var(----swatch--neutral-850);
}
Intent: neutral
{
"Scales": {
"__scales": {
"swatch": {
"neutral": {
"0": {
"$type": "color",
"$value": "#000000"
},
"25": {
"$type": "color",
"$value": "#000000"
},
"50": {
"$type": "color",
"$value": "#010000"
},
"75": {
"$type": "color",
"$value": "#020100"
},
"100": {
"$type": "color",
"$value": "#050301"
},
"125": {
"$type": "color",
"$value": "#090602"
},
"150": {
"$type": "color",
"$value": "#0e0b05"
},
"175": {
"$type": "color",
"$value": "#141009"
},
"200": {
"$type": "color",
"$value": "#19150e"
},
"225": {
"$type": "color",
"$value": "#1f1b14"
},
"250": {
"$type": "color",
"$value": "#25211a"
},
"275": {
"$type": "color",
"$value": "#2b2720"
},
"300": {
"$type": "color",
"$value": "#322d26"
},
"325": {
"$type": "color",
"$value": "#38332c"
},
"350": {
"$type": "color",
"$value": "#3e3a32"
},
"375": {
"$type": "color",
"$value": "#454038"
},
"400": {
"$type": "color",
"$value": "#4c473f"
},
"425": {
"$type": "color",
"$value": "#524e45"
},
"450": {
"$type": "color",
"$value": "#59554c"
},
"475": {
"$type": "color",
"$value": "#605c53"
},
"500": {
"$type": "color",
"$value": "#67635a"
},
"525": {
"$type": "color",
"$value": "#6f6a61"
},
"550": {
"$type": "color",
"$value": "#767168"
},
"575": {
"$type": "color",
"$value": "#7d786f"
},
"600": {
"$type": "color",
"$value": "#858076"
},
"625": {
"$type": "color",
"$value": "#8c877e"
},
"650": {
"$type": "color",
"$value": "#948e85"
},
"675": {
"$type": "color",
"$value": "#9b968d"
},
"700": {
"$type": "color",
"$value": "#a39e94"
},
"725": {
"$type": "color",
"$value": "#aba59c"
},
"750": {
"$type": "color",
"$value": "#b3ada4"
},
"775": {
"$type": "color",
"$value": "#bab5ab"
},
"800": {
"$type": "color",
"$value": "#c2bdb3"
},
"825": {
"$type": "color",
"$value": "#cac5bb"
},
"850": {
"$type": "color",
"$value": "#d3cdc3"
},
"875": {
"$type": "color",
"$value": "#dbd5cb"
},
"900": {
"$type": "color",
"$value": "#e3ddd3"
},
"925": {
"$type": "color",
"$value": "#ebe5db"
},
"950": {
"$type": "color",
"$value": "#f3eee4"
},
"975": {
"$type": "color",
"$value": "#fcf6ec"
},
"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": {
"foreground": {
"neutral": {
"base": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/1000}",
"dark": "{__scales/swatch/neutral/0}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/900}",
"dark": "{__scales/swatch/neutral/400}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/800}",
"dark": "{__scales/swatch/neutral/500}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/850}",
"dark": "{__scales/swatch/neutral/350}"
}
}
},
"low": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/850}",
"dark": "{__scales/swatch/neutral/450}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/750}",
"dark": "{__scales/swatch/neutral/600}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/650}",
"dark": "{__scales/swatch/neutral/700}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/700}",
"dark": "{__scales/swatch/neutral/650}"
}
}
},
"medium": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/650}",
"dark": "{__scales/swatch/neutral/500}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/550}",
"dark": "{__scales/swatch/neutral/600}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/450}",
"dark": "{__scales/swatch/neutral/700}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/500}",
"dark": "{__scales/swatch/neutral/650}"
}
}
},
"high": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/500}",
"dark": "{__scales/swatch/neutral/800}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/600}",
"dark": "{__scales/swatch/neutral/700}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/700}",
"dark": "{__scales/swatch/neutral/600}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/650}",
"dark": "{__scales/swatch/neutral/650}"
}
}
},
"strong": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/450}",
"dark": "{__scales/swatch/neutral/900}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/600}",
"dark": "{__scales/swatch/neutral/800}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/700}",
"dark": "{__scales/swatch/neutral/700}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/650}",
"dark": "{__scales/swatch/neutral/750}"
}
}
},
"full": {
"default": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/0}",
"dark": "{__scales/swatch/neutral/1000}"
}
},
"hovered": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/400}",
"dark": "{__scales/swatch/neutral/900}"
}
},
"pressed": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/500}",
"dark": "{__scales/swatch/neutral/800}"
}
},
"selected": {
"$type": "color",
"$value": {
"light": "{__scales/swatch/neutral/350}",
"dark": "{__scales/swatch/neutral/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": {
"neutral": "0.581 0.015 82"
},
"swatch": {
"neutral": {
"0": "0 0 0",
"25": " ",
"50": "1 ",
"75": "2 1 ",
"100": "5 3 1",
"125": "9 6 2",
"150": "14 11 5",
"175": "2 16 9",
"200": "25 21 14",
"225": "31 27 2",
"250": "37 33 26",
"275": "43 39 32",
"300": "5 45 38",
"325": "56 51 44",
"350": "62 58 5",
"375": "69 64 56",
"400": "76 71 63",
"425": "82 78 69",
"450": "89 85 76",
"475": "96 92 83",
"500": "103 99 9",
"525": "111 106 97",
"550": "118 113 104",
"575": "125 12 111",
"600": "133 128 118",
"625": "14 135 126",
"650": "148 142 133",
"675": "155 15 141",
"700": "163 158 148",
"725": "171 165 156",
"750": "179 173 164",
"775": "186 181 171",
"800": "194 189 179",
"825": "202 197 187",
"850": "211 205 195",
"875": "219 213 203",
"900": "227 221 211",
"925": "235 229 219",
"950": "243 238 228",
"975": "252 246 236",
"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": {
"foreground": {
"neutral": {
"base": {
"default": scales.swatch.neutral[1000],
"hovered": scales.swatch.neutral[900],
"pressed": scales.swatch.neutral[800],
"selected": scales.swatch.neutral[850]
},
"low": {
"default": scales.swatch.neutral[850],
"hovered": scales.swatch.neutral[750],
"pressed": scales.swatch.neutral[650],
"selected": scales.swatch.neutral[700]
},
"medium": {
"default": scales.swatch.neutral[650],
"hovered": scales.swatch.neutral[550],
"pressed": scales.swatch.neutral[450],
"selected": scales.swatch.neutral[500]
},
"high": {
"default": scales.swatch.neutral[500],
"hovered": scales.swatch.neutral[600],
"pressed": scales.swatch.neutral[700],
"selected": scales.swatch.neutral[650]
},
"strong": {
"default": scales.swatch.neutral[450],
"hovered": scales.swatch.neutral[600],
"pressed": scales.swatch.neutral[700],
"selected": scales.swatch.neutral[650]
},
"full": {
"default": scales.swatch.neutral[0],
"hovered": scales.swatch.neutral[400],
"pressed": scales.swatch.neutral[500],
"selected": scales.swatch.neutral[350]
}
}
}
}
},
"dark": {
"blend": {
"solid": 100,
"low": 90,
"medium": 70,
"high": 50,
"strong": 30,
"full": scales.blend[0]
},
"color": {
"foreground": {
"neutral": {
"base": {
"default": scales.swatch.neutral[0],
"hovered": scales.swatch.neutral[400],
"pressed": scales.swatch.neutral[500],
"selected": scales.swatch.neutral[350]
},
"low": {
"default": scales.swatch.neutral[450],
"hovered": scales.swatch.neutral[600],
"pressed": scales.swatch.neutral[700],
"selected": scales.swatch.neutral[650]
},
"medium": {
"default": scales.swatch.neutral[500],
"hovered": scales.swatch.neutral[600],
"pressed": scales.swatch.neutral[700],
"selected": scales.swatch.neutral[650]
},
"high": {
"default": scales.swatch.neutral[800],
"hovered": scales.swatch.neutral[700],
"pressed": scales.swatch.neutral[600],
"selected": scales.swatch.neutral[650]
},
"strong": {
"default": scales.swatch.neutral[900],
"hovered": scales.swatch.neutral[800],
"pressed": scales.swatch.neutral[700],
"selected": scales.swatch.neutral[750]
},
"full": {
"default": scales.swatch.neutral[1000],
"hovered": scales.swatch.neutral[900],
"pressed": scales.swatch.neutral[800],
"selected": scales.swatch.neutral[850]
}
}
}
}
}
} as const;
Up Next
Border Color Tokens
Border color tokens define the colors used for borders and dividers.
Defining Intents
Defining intents allows you to tailor color tokens to better fit your product's unique requirements.