Background Tokens
When discussing color tokens, we need to distinguish backgrounds and content colors (texts). Feel free to jump to Foreground Color Tokens if you're looking for text and icon colors, however, this section is much easier to understand when first familiarizing yourself with colors tokens. That's why we recommend starting here.
Prerequisites
In this section assumes that you are already familiar with the concept of Intents, Attentions, and States explained in the Color Tokens section.
Naming Convention
background.<intent>.<attention>.<state>To create background color tokens we combine three aspects: intent, attention, and state. Each intent creates a combination with all attention and state levels, resulting in a complete set of background color tokens that can be applied to specific UI components.
Not every application will need all combinations, so choose the ones that best fit your use cases.
Where is blending?
Blending levels would add another dimension to the combinations which we currently decided to avoid for background tokens. Later we will discuss using blending on the component level as needed.
Default Background 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
- React Native
Intent: neutral, attention: base
| Token name | light | dark |
|---|---|---|
background.neutral.base.default | #ffffff | #000000 |
background.neutral.base.hovered | #e3ddd3 | #4c473f |
background.neutral.base.pressed | #c2bdb3 | #67635a |
background.neutral.base.selected | #d3cdc3 | #3e3a32 |
Intent: neutral, attention: low
| Token name | light | dark |
|---|---|---|
background.neutral.low.default | #d3cdc3 | #322d26 |
background.neutral.low.hovered | #b3ada4 | #59554c |
background.neutral.low.pressed | #948e85 | #767168 |
background.neutral.low.selected | #a39e94 | #67635a |
Intent: neutral, attention: medium
| Token name | light | dark |
|---|---|---|
background.neutral.medium.default | #a39e94 | #59554c |
background.neutral.medium.hovered | #858076 | #767168 |
background.neutral.medium.pressed | #67635a | #948e85 |
background.neutral.medium.selected | #767168 | #858076 |
Intent: neutral, attention: high
| Token name | light | dark |
|---|---|---|
background.neutral.high.default | #767168 | #767168 |
background.neutral.high.hovered | #948e85 | #59554c |
background.neutral.high.pressed | #b3ada4 | #3e3a32 |
background.neutral.high.selected | #a39e94 | #4c473f |
Intent: neutral, attention: strong
| Token name | light | dark |
|---|---|---|
background.neutral.strong.default | #59554c | #b3ada4 |
background.neutral.strong.hovered | #858076 | #948e85 |
background.neutral.strong.pressed | #a39e94 | #767168 |
background.neutral.strong.selected | #948e85 | #858076 |
Intent: neutral, attention: full
| Token name | light | dark |
|---|---|---|
background.neutral.full.default | #000000 | #ffffff |
background.neutral.full.hovered | #4c473f | #e3ddd3 |
background.neutral.full.pressed | #67635a | #c2bdb3 |
background.neutral.full.selected | #3e3a32 | #d3cdc3 |
Intent: neutral
:root {
/**
* Swatch scale for neutral intent:
*/
----swatch--background-neutral-0: 0 0 0;
----swatch--background-neutral-50: 1 0 0;
----swatch--background-neutral-100: 5 3 1;
----swatch--background-neutral-150: 14 11 5;
----swatch--background-neutral-200: 25 21 14;
----swatch--background-neutral-250: 37 33 26;
----swatch--background-neutral-300: 50 45 38;
----swatch--background-neutral-350: 62 58 50;
----swatch--background-neutral-400: 76 71 63;
----swatch--background-neutral-450: 89 85 76;
----swatch--background-neutral-500: 103 99 90;
----swatch--background-neutral-550: 118 113 104;
----swatch--background-neutral-600: 133 128 118;
----swatch--background-neutral-650: 148 142 133;
----swatch--background-neutral-700: 163 158 148;
----swatch--background-neutral-750: 179 173 164;
----swatch--background-neutral-800: 194 189 179;
----swatch--background-neutral-850: 211 205 195;
----swatch--background-neutral-900: 227 221 211;
----swatch--background-neutral-950: 243 238 228;
----swatch--background-neutral-1000: 255 255 255;
/**
* Abstract background tokens for neutral intent:
*/
--background--neutral-base-default--light: var(----swatch--background-neutral-1000, 255 255 255);
--background--neutral-base-default--dark: var(----swatch--background-neutral-0, 0 0 0);
--background--neutral-base-hovered--light: var(----swatch--background-neutral-900, 227 221 211);
--background--neutral-base-hovered--dark: var(----swatch--background-neutral-400, 76 71 63);
--background--neutral-base-pressed--light: var(----swatch--background-neutral-800, 194 189 179);
--background--neutral-base-pressed--dark: var(----swatch--background-neutral-500, 103 99 90);
--background--neutral-base-selected--light: var(----swatch--background-neutral-850, 211 205 195);
--background--neutral-base-selected--dark: var(----swatch--background-neutral-350, 62 58 50);
--background--neutral-low-default--light: var(----swatch--background-neutral-850, 211 205 195);
--background--neutral-low-default--dark: var(----swatch--background-neutral-300, 50 45 38);
--background--neutral-low-hovered--light: var(----swatch--background-neutral-750, 179 173 164);
--background--neutral-low-hovered--dark: var(----swatch--background-neutral-450, 89 85 76);
--background--neutral-low-pressed--light: var(----swatch--background-neutral-650, 148 142 133);
--background--neutral-low-pressed--dark: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-low-selected--light: var(----swatch--background-neutral-700, 163 158 148);
--background--neutral-low-selected--dark: var(----swatch--background-neutral-500, 103 99 90);
--background--neutral-medium-default--light: var(----swatch--background-neutral-700, 163 158 148);
--background--neutral-medium-default--dark: var(----swatch--background-neutral-450, 89 85 76);
--background--neutral-medium-hovered--light: var(----swatch--background-neutral-600, 133 128 118);
--background--neutral-medium-hovered--dark: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-medium-pressed--light: var(----swatch--background-neutral-500, 103 99 90);
--background--neutral-medium-pressed--dark: var(----swatch--background-neutral-650, 148 142 133);
--background--neutral-medium-selected--light: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-medium-selected--dark: var(----swatch--background-neutral-600, 133 128 118);
--background--neutral-high-default--light: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-high-default--dark: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-high-hovered--light: var(----swatch--background-neutral-650, 148 142 133);
--background--neutral-high-hovered--dark: var(----swatch--background-neutral-450, 89 85 76);
--background--neutral-high-pressed--light: var(----swatch--background-neutral-750, 179 173 164);
--background--neutral-high-pressed--dark: var(----swatch--background-neutral-350, 62 58 50);
--background--neutral-high-selected--light: var(----swatch--background-neutral-700, 163 158 148);
--background--neutral-high-selected--dark: var(----swatch--background-neutral-400, 76 71 63);
--background--neutral-strong-default--light: var(----swatch--background-neutral-450, 89 85 76);
--background--neutral-strong-default--dark: var(----swatch--background-neutral-750, 179 173 164);
--background--neutral-strong-hovered--light: var(----swatch--background-neutral-600, 133 128 118);
--background--neutral-strong-hovered--dark: var(----swatch--background-neutral-650, 148 142 133);
--background--neutral-strong-pressed--light: var(----swatch--background-neutral-700, 163 158 148);
--background--neutral-strong-pressed--dark: var(----swatch--background-neutral-550, 118 113 104);
--background--neutral-strong-selected--light: var(----swatch--background-neutral-650, 148 142 133);
--background--neutral-strong-selected--dark: var(----swatch--background-neutral-600, 133 128 118);
--background--neutral-full-default--light: var(----swatch--background-neutral-0, 0 0 0);
--background--neutral-full-default--dark: var(----swatch--background-neutral-1000, 255 255 255);
--background--neutral-full-hovered--light: var(----swatch--background-neutral-400, 76 71 63);
--background--neutral-full-hovered--dark: var(----swatch--background-neutral-900, 227 221 211);
--background--neutral-full-pressed--light: var(----swatch--background-neutral-500, 103 99 90);
--background--neutral-full-pressed--dark: var(----swatch--background-neutral-800, 194 189 179);
--background--neutral-full-selected--light: var(----swatch--background-neutral-350, 62 58 50);
--background--neutral-full-selected--dark: var(----swatch--background-neutral-850, 211 205 195);
}
Intent: neutral
{
"Scales": {
"swatch/background/neutral/0/solid": {
"$type": "color",
"$value": "#000000ff"
},
"swatch/background/neutral/0/low": {
"$type": "color",
"$value": "#000000e6"
},
"swatch/background/neutral/0/medium": {
"$type": "color",
"$value": "#000000b3"
},
"swatch/background/neutral/0/high": {
"$type": "color",
"$value": "#00000080"
},
"swatch/background/neutral/0/strong": {
"$type": "color",
"$value": "#0000004d"
},
"swatch/background/neutral/0/full": {
"$type": "color",
"$value": "#00000000"
},
"swatch/background/neutral/50/solid": {
"$type": "color",
"$value": "#010000ff"
},
"swatch/background/neutral/50/low": {
"$type": "color",
"$value": "#010000e6"
},
"swatch/background/neutral/50/medium": {
"$type": "color",
"$value": "#010000b3"
},
"swatch/background/neutral/50/high": {
"$type": "color",
"$value": "#01000080"
},
"swatch/background/neutral/50/strong": {
"$type": "color",
"$value": "#0100004d"
},
"swatch/background/neutral/50/full": {
"$type": "color",
"$value": "#01000000"
},
"swatch/background/neutral/100/solid": {
"$type": "color",
"$value": "#050301ff"
},
"swatch/background/neutral/100/low": {
"$type": "color",
"$value": "#050301e6"
},
"swatch/background/neutral/100/medium": {
"$type": "color",
"$value": "#050301b3"
},
"swatch/background/neutral/100/high": {
"$type": "color",
"$value": "#05030180"
},
"swatch/background/neutral/100/strong": {
"$type": "color",
"$value": "#0503014d"
},
"swatch/background/neutral/100/full": {
"$type": "color",
"$value": "#05030100"
},
"swatch/background/neutral/150/solid": {
"$type": "color",
"$value": "#0e0b05ff"
},
"swatch/background/neutral/150/low": {
"$type": "color",
"$value": "#0e0b05e6"
},
"swatch/background/neutral/150/medium": {
"$type": "color",
"$value": "#0e0b05b3"
},
"swatch/background/neutral/150/high": {
"$type": "color",
"$value": "#0e0b0580"
},
"swatch/background/neutral/150/strong": {
"$type": "color",
"$value": "#0e0b054d"
},
"swatch/background/neutral/150/full": {
"$type": "color",
"$value": "#0e0b0500"
},
"swatch/background/neutral/200/solid": {
"$type": "color",
"$value": "#19150eff"
},
"swatch/background/neutral/200/low": {
"$type": "color",
"$value": "#19150ee6"
},
"swatch/background/neutral/200/medium": {
"$type": "color",
"$value": "#19150eb3"
},
"swatch/background/neutral/200/high": {
"$type": "color",
"$value": "#19150e80"
},
"swatch/background/neutral/200/strong": {
"$type": "color",
"$value": "#19150e4d"
},
"swatch/background/neutral/200/full": {
"$type": "color",
"$value": "#19150e00"
},
"swatch/background/neutral/250/solid": {
"$type": "color",
"$value": "#25211aff"
},
"swatch/background/neutral/250/low": {
"$type": "color",
"$value": "#25211ae6"
},
"swatch/background/neutral/250/medium": {
"$type": "color",
"$value": "#25211ab3"
},
"swatch/background/neutral/250/high": {
"$type": "color",
"$value": "#25211a80"
},
"swatch/background/neutral/250/strong": {
"$type": "color",
"$value": "#25211a4d"
},
"swatch/background/neutral/250/full": {
"$type": "color",
"$value": "#25211a00"
},
"swatch/background/neutral/300/solid": {
"$type": "color",
"$value": "#322d26ff"
},
"swatch/background/neutral/300/low": {
"$type": "color",
"$value": "#322d26e6"
},
"swatch/background/neutral/300/medium": {
"$type": "color",
"$value": "#322d26b3"
},
"swatch/background/neutral/300/high": {
"$type": "color",
"$value": "#322d2680"
},
"swatch/background/neutral/300/strong": {
"$type": "color",
"$value": "#322d264d"
},
"swatch/background/neutral/300/full": {
"$type": "color",
"$value": "#322d2600"
},
"swatch/background/neutral/350/solid": {
"$type": "color",
"$value": "#3e3a32ff"
},
"swatch/background/neutral/350/low": {
"$type": "color",
"$value": "#3e3a32e6"
},
"swatch/background/neutral/350/medium": {
"$type": "color",
"$value": "#3e3a32b3"
},
"swatch/background/neutral/350/high": {
"$type": "color",
"$value": "#3e3a3280"
},
"swatch/background/neutral/350/strong": {
"$type": "color",
"$value": "#3e3a324d"
},
"swatch/background/neutral/350/full": {
"$type": "color",
"$value": "#3e3a3200"
},
"swatch/background/neutral/400/solid": {
"$type": "color",
"$value": "#4c473fff"
},
"swatch/background/neutral/400/low": {
"$type": "color",
"$value": "#4c473fe6"
},
"swatch/background/neutral/400/medium": {
"$type": "color",
"$value": "#4c473fb3"
},
"swatch/background/neutral/400/high": {
"$type": "color",
"$value": "#4c473f80"
},
"swatch/background/neutral/400/strong": {
"$type": "color",
"$value": "#4c473f4d"
},
"swatch/background/neutral/400/full": {
"$type": "color",
"$value": "#4c473f00"
},
"swatch/background/neutral/450/solid": {
"$type": "color",
"$value": "#59554cff"
},
"swatch/background/neutral/450/low": {
"$type": "color",
"$value": "#59554ce6"
},
"swatch/background/neutral/450/medium": {
"$type": "color",
"$value": "#59554cb3"
},
"swatch/background/neutral/450/high": {
"$type": "color",
"$value": "#59554c80"
},
"swatch/background/neutral/450/strong": {
"$type": "color",
"$value": "#59554c4d"
},
"swatch/background/neutral/450/full": {
"$type": "color",
"$value": "#59554c00"
},
"swatch/background/neutral/500/solid": {
"$type": "color",
"$value": "#67635aff"
},
"swatch/background/neutral/500/low": {
"$type": "color",
"$value": "#67635ae6"
},
"swatch/background/neutral/500/medium": {
"$type": "color",
"$value": "#67635ab3"
},
"swatch/background/neutral/500/high": {
"$type": "color",
"$value": "#67635a80"
},
"swatch/background/neutral/500/strong": {
"$type": "color",
"$value": "#67635a4d"
},
"swatch/background/neutral/500/full": {
"$type": "color",
"$value": "#67635a00"
},
"swatch/background/neutral/550/solid": {
"$type": "color",
"$value": "#767168ff"
},
"swatch/background/neutral/550/low": {
"$type": "color",
"$value": "#767168e6"
},
"swatch/background/neutral/550/medium": {
"$type": "color",
"$value": "#767168b3"
},
"swatch/background/neutral/550/high": {
"$type": "color",
"$value": "#76716880"
},
"swatch/background/neutral/550/strong": {
"$type": "color",
"$value": "#7671684d"
},
"swatch/background/neutral/550/full": {
"$type": "color",
"$value": "#76716800"
},
"swatch/background/neutral/600/solid": {
"$type": "color",
"$value": "#858076ff"
},
"swatch/background/neutral/600/low": {
"$type": "color",
"$value": "#858076e6"
},
"swatch/background/neutral/600/medium": {
"$type": "color",
"$value": "#858076b3"
},
"swatch/background/neutral/600/high": {
"$type": "color",
"$value": "#85807680"
},
"swatch/background/neutral/600/strong": {
"$type": "color",
"$value": "#8580764d"
},
"swatch/background/neutral/600/full": {
"$type": "color",
"$value": "#85807600"
},
"swatch/background/neutral/650/solid": {
"$type": "color",
"$value": "#948e85ff"
},
"swatch/background/neutral/650/low": {
"$type": "color",
"$value": "#948e85e6"
},
"swatch/background/neutral/650/medium": {
"$type": "color",
"$value": "#948e85b3"
},
"swatch/background/neutral/650/high": {
"$type": "color",
"$value": "#948e8580"
},
"swatch/background/neutral/650/strong": {
"$type": "color",
"$value": "#948e854d"
},
"swatch/background/neutral/650/full": {
"$type": "color",
"$value": "#948e8500"
},
"swatch/background/neutral/700/solid": {
"$type": "color",
"$value": "#a39e94ff"
},
"swatch/background/neutral/700/low": {
"$type": "color",
"$value": "#a39e94e6"
},
"swatch/background/neutral/700/medium": {
"$type": "color",
"$value": "#a39e94b3"
},
"swatch/background/neutral/700/high": {
"$type": "color",
"$value": "#a39e9480"
},
"swatch/background/neutral/700/strong": {
"$type": "color",
"$value": "#a39e944d"
},
"swatch/background/neutral/700/full": {
"$type": "color",
"$value": "#a39e9400"
},
"swatch/background/neutral/750/solid": {
"$type": "color",
"$value": "#b3ada4ff"
},
"swatch/background/neutral/750/low": {
"$type": "color",
"$value": "#b3ada4e6"
},
"swatch/background/neutral/750/medium": {
"$type": "color",
"$value": "#b3ada4b3"
},
"swatch/background/neutral/750/high": {
"$type": "color",
"$value": "#b3ada480"
},
"swatch/background/neutral/750/strong": {
"$type": "color",
"$value": "#b3ada44d"
},
"swatch/background/neutral/750/full": {
"$type": "color",
"$value": "#b3ada400"
},
"swatch/background/neutral/800/solid": {
"$type": "color",
"$value": "#c2bdb3ff"
},
"swatch/background/neutral/800/low": {
"$type": "color",
"$value": "#c2bdb3e6"
},
"swatch/background/neutral/800/medium": {
"$type": "color",
"$value": "#c2bdb3b3"
},
"swatch/background/neutral/800/high": {
"$type": "color",
"$value": "#c2bdb380"
},
"swatch/background/neutral/800/strong": {
"$type": "color",
"$value": "#c2bdb34d"
},
"swatch/background/neutral/800/full": {
"$type": "color",
"$value": "#c2bdb300"
},
"swatch/background/neutral/850/solid": {
"$type": "color",
"$value": "#d3cdc3ff"
},
"swatch/background/neutral/850/low": {
"$type": "color",
"$value": "#d3cdc3e6"
},
"swatch/background/neutral/850/medium": {
"$type": "color",
"$value": "#d3cdc3b3"
},
"swatch/background/neutral/850/high": {
"$type": "color",
"$value": "#d3cdc380"
},
"swatch/background/neutral/850/strong": {
"$type": "color",
"$value": "#d3cdc34d"
},
"swatch/background/neutral/850/full": {
"$type": "color",
"$value": "#d3cdc300"
},
"swatch/background/neutral/900/solid": {
"$type": "color",
"$value": "#e3ddd3ff"
},
"swatch/background/neutral/900/low": {
"$type": "color",
"$value": "#e3ddd3e6"
},
"swatch/background/neutral/900/medium": {
"$type": "color",
"$value": "#e3ddd3b3"
},
"swatch/background/neutral/900/high": {
"$type": "color",
"$value": "#e3ddd380"
},
"swatch/background/neutral/900/strong": {
"$type": "color",
"$value": "#e3ddd34d"
},
"swatch/background/neutral/900/full": {
"$type": "color",
"$value": "#e3ddd300"
},
"swatch/background/neutral/950/solid": {
"$type": "color",
"$value": "#f3eee4ff"
},
"swatch/background/neutral/950/low": {
"$type": "color",
"$value": "#f3eee4e6"
},
"swatch/background/neutral/950/medium": {
"$type": "color",
"$value": "#f3eee4b3"
},
"swatch/background/neutral/950/high": {
"$type": "color",
"$value": "#f3eee480"
},
"swatch/background/neutral/950/strong": {
"$type": "color",
"$value": "#f3eee44d"
},
"swatch/background/neutral/950/full": {
"$type": "color",
"$value": "#f3eee400"
},
"swatch/background/neutral/1000/solid": {
"$type": "color",
"$value": "#ffffffff"
},
"swatch/background/neutral/1000/low": {
"$type": "color",
"$value": "#ffffffe6"
},
"swatch/background/neutral/1000/medium": {
"$type": "color",
"$value": "#ffffffb3"
},
"swatch/background/neutral/1000/high": {
"$type": "color",
"$value": "#ffffff80"
},
"swatch/background/neutral/1000/strong": {
"$type": "color",
"$value": "#ffffff4d"
},
"swatch/background/neutral/1000/full": {
"$type": "color",
"$value": "#ffffff00"
}
},
"Colors": {
"background/neutral/base/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.1000.solid}",
"dark": "{swatch.background.neutral.0.solid}"
}
},
"background/neutral/base/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.900.solid}",
"dark": "{swatch.background.neutral.400.solid}"
}
},
"background/neutral/base/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.800.solid}",
"dark": "{swatch.background.neutral.500.solid}"
}
},
"background/neutral/base/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.850.solid}",
"dark": "{swatch.background.neutral.350.solid}"
}
},
"background/neutral/low/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.850.solid}",
"dark": "{swatch.background.neutral.300.solid}"
}
},
"background/neutral/low/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.750.solid}",
"dark": "{swatch.background.neutral.450.solid}"
}
},
"background/neutral/low/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.650.solid}",
"dark": "{swatch.background.neutral.550.solid}"
}
},
"background/neutral/low/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.700.solid}",
"dark": "{swatch.background.neutral.500.solid}"
}
},
"background/neutral/medium/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.700.solid}",
"dark": "{swatch.background.neutral.450.solid}"
}
},
"background/neutral/medium/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.600.solid}",
"dark": "{swatch.background.neutral.550.solid}"
}
},
"background/neutral/medium/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.500.solid}",
"dark": "{swatch.background.neutral.650.solid}"
}
},
"background/neutral/medium/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.550.solid}",
"dark": "{swatch.background.neutral.600.solid}"
}
},
"background/neutral/high/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.550.solid}",
"dark": "{swatch.background.neutral.550.solid}"
}
},
"background/neutral/high/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.650.solid}",
"dark": "{swatch.background.neutral.450.solid}"
}
},
"background/neutral/high/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.750.solid}",
"dark": "{swatch.background.neutral.350.solid}"
}
},
"background/neutral/high/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.700.solid}",
"dark": "{swatch.background.neutral.400.solid}"
}
},
"background/neutral/strong/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.450.solid}",
"dark": "{swatch.background.neutral.750.solid}"
}
},
"background/neutral/strong/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.600.solid}",
"dark": "{swatch.background.neutral.650.solid}"
}
},
"background/neutral/strong/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.700.solid}",
"dark": "{swatch.background.neutral.550.solid}"
}
},
"background/neutral/strong/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.650.solid}",
"dark": "{swatch.background.neutral.600.solid}"
}
},
"background/neutral/full/default": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.0.solid}",
"dark": "{swatch.background.neutral.1000.solid}"
}
},
"background/neutral/full/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.400.solid}",
"dark": "{swatch.background.neutral.900.solid}"
}
},
"background/neutral/full/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.500.solid}",
"dark": "{swatch.background.neutral.800.solid}"
}
},
"background/neutral/full/selected": {
"$type": "color",
"$value": {
"light": "{swatch.background.neutral.350.solid}",
"dark": "{swatch.background.neutral.850.solid}"
}
}
}
}
We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.
TBD
Up Next
Foreground Color Tokens
Content color tokens define colors for text, icons, and other foreground elements.
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.