Border Tokens
Border color tokens define the colors used for borders and dividers 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 and Foreground Color Tokens sections to understand how background and foreground colors are constructed, as border colors interact closely with background and foreground colors.
Naming Convention
border.<intent>.<attention>.<state>.<blend>To create border color tokens we combine four aspects: intent, attention, state, and blend. Each intent creates a combination with all attention, state, and blend levels, resulting in a complete set of border 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.
Default Border Tokens
warning
The following set of tokens represent the default combinations 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: full
| Token name | light | dark |
|---|---|---|
border.neutral.full.default | –#000000 | –#ffffff |
border.neutral.full.hovered | –#4c473f | –#e3ddd3 |
border.neutral.full.pressed | –#67635a | –#c2bdb3 |
border.neutral.full.selected | –#3e3a32 | –#d3cdc3 |
Intent: neutral, attention: strong
| Token name | light | dark |
|---|---|---|
border.neutral.strong.default | –#59554c | –#d3cdc3 |
border.neutral.strong.hovered | –#858076 | –#b3ada4 |
border.neutral.strong.pressed | –#a39e94 | –#948e85 |
border.neutral.strong.selected | –#948e85 | –#a39e94 |
Intent: neutral, attention: high
| Token name | light | dark |
|---|---|---|
border.neutral.high.default | –#67635a | –#948e85 |
border.neutral.high.hovered | –#858076 | –#767168 |
border.neutral.high.pressed | –#a39e94 | –#59554c |
border.neutral.high.selected | –#948e85 | –#67635a |
Intent: neutral, attention: medium
| Token name | light | dark |
|---|---|---|
border.neutral.medium.default | –#948e85 | –#67635a |
border.neutral.medium.hovered | –#767168 | –#858076 |
border.neutral.medium.pressed | –#59554c | –#a39e94 |
border.neutral.medium.selected | –#67635a | –#948e85 |
Intent: neutral, attention: low
| Token name | light | dark |
|---|---|---|
border.neutral.low.default | –#d3cdc3 | –#59554c |
border.neutral.low.hovered | –#b3ada4 | –#858076 |
border.neutral.low.pressed | –#948e85 | –#a39e94 |
border.neutral.low.selected | –#a39e94 | –#948e85 |
Intent: neutral, attention: base
| Token name | light | dark |
|---|---|---|
border.neutral.base.default | –#ffffff | –#000000 |
border.neutral.base.hovered | –#e3ddd3 | –#4c473f |
border.neutral.base.pressed | –#c2bdb3 | –#67635a |
border.neutral.base.selected | –#d3cdc3 | –#3e3a32 |
Intent: neutral
:root {
/**
* Blend alpha values:
*/
--blend--solid: 1;
--blend--low: 0.9;
--blend--medium: 0.7;
--blend--high: 0.5;
--blend--strong: 0.3;
--blend--full: 0;
/**
* Swatch scale for neutral intent:
*/
--swatch--border-neutral-0: 0 0 0;
--swatch--border-neutral-50: 1 0 0;
--swatch--border-neutral-100: 5 3 1;
--swatch--border-neutral-150: 14 11 5;
--swatch--border-neutral-200: 25 21 14;
--swatch--border-neutral-250: 37 33 26;
--swatch--border-neutral-300: 50 45 38;
--swatch--border-neutral-350: 62 58 50;
--swatch--border-neutral-400: 76 71 63;
--swatch--border-neutral-450: 89 85 76;
--swatch--border-neutral-500: 103 99 90;
--swatch--border-neutral-550: 118 113 104;
--swatch--border-neutral-600: 133 128 118;
--swatch--border-neutral-650: 148 142 133;
--swatch--border-neutral-700: 163 158 148;
--swatch--border-neutral-750: 179 173 164;
--swatch--border-neutral-800: 194 189 179;
--swatch--border-neutral-850: 211 205 195;
--swatch--border-neutral-900: 227 221 211;
--swatch--border-neutral-950: 243 238 228;
--swatch--border-neutral-1000: 255 255 255;
/**
* Abstract border tokens for neutral intent:
*/
--border--neutral-base-default--light: var(--swatch--border-neutral-1000);
--border--neutral-base-default--dark: var(--swatch--border-neutral-0);
--border--neutral-base-hovered--light: var(--swatch--border-neutral-900);
--border--neutral-base-hovered--dark: var(--swatch--border-neutral-400);
--border--neutral-base-pressed--light: var(--swatch--border-neutral-800);
--border--neutral-base-pressed--dark: var(--swatch--border-neutral-500);
--border--neutral-base-selected--light: var(--swatch--border-neutral-850);
--border--neutral-base-selected--dark: var(--swatch--border-neutral-350);
--border--neutral-low-default--light: var(--swatch--border-neutral-850);
--border--neutral-low-default--dark: var(--swatch--border-neutral-450);
--border--neutral-low-hovered--light: var(--swatch--border-neutral-750);
--border--neutral-low-hovered--dark: var(--swatch--border-neutral-600);
--border--neutral-low-pressed--light: var(--swatch--border-neutral-650);
--border--neutral-low-pressed--dark: var(--swatch--border-neutral-700);
--border--neutral-low-selected--light: var(--swatch--border-neutral-700);
--border--neutral-low-selected--dark: var(--swatch--border-neutral-650);
--border--neutral-medium-default--light: var(--swatch--border-neutral-650);
--border--neutral-medium-default--dark: var(--swatch--border-neutral-500);
--border--neutral-medium-hovered--light: var(--swatch--border-neutral-550);
--border--neutral-medium-hovered--dark: var(--swatch--border-neutral-600);
--border--neutral-medium-pressed--light: var(--swatch--border-neutral-450);
--border--neutral-medium-pressed--dark: var(--swatch--border-neutral-700);
--border--neutral-medium-selected--light: var(--swatch--border-neutral-500);
--border--neutral-medium-selected--dark: var(--swatch--border-neutral-650);
--border--neutral-high-default--light: var(--swatch--border-neutral-500);
--border--neutral-high-default--dark: var(--swatch--border-neutral-650);
--border--neutral-high-hovered--light: var(--swatch--border-neutral-600);
--border--neutral-high-hovered--dark: var(--swatch--border-neutral-550);
--border--neutral-high-pressed--light: var(--swatch--border-neutral-700);
--border--neutral-high-pressed--dark: var(--swatch--border-neutral-450);
--border--neutral-high-selected--light: var(--swatch--border-neutral-650);
--border--neutral-high-selected--dark: var(--swatch--border-neutral-500);
--border--neutral-strong-default--light: var(--swatch--border-neutral-450);
--border--neutral-strong-default--dark: var(--swatch--border-neutral-850);
--border--neutral-strong-hovered--light: var(--swatch--border-neutral-600);
--border--neutral-strong-hovered--dark: var(--swatch--border-neutral-750);
--border--neutral-strong-pressed--light: var(--swatch--border-neutral-700);
--border--neutral-strong-pressed--dark: var(--swatch--border-neutral-650);
--border--neutral-strong-selected--light: var(--swatch--border-neutral-650);
--border--neutral-strong-selected--dark: var(--swatch--border-neutral-700);
--border--neutral-full-default--light: var(--swatch--border-neutral-0);
--border--neutral-full-default--dark: var(--swatch--border-neutral-1000);
--border--neutral-full-hovered--light: var(--swatch--border-neutral-400);
--border--neutral-full-hovered--dark: var(--swatch--border-neutral-900);
--border--neutral-full-pressed--light: var(--swatch--border-neutral-500);
--border--neutral-full-pressed--dark: var(--swatch--border-neutral-800);
--border--neutral-full-selected--light: var(--swatch--border-neutral-350);
--border--neutral-full-selected--dark: var(--swatch--border-neutral-850);
}
Intent: neutral
{
"Colors": {
"border/neutral/base/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.1000.solid}",
"dark": "{swatch.border.neutral.0.solid}"
}
},
"border/neutral/base/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.900.solid}",
"dark": "{swatch.border.neutral.400.solid}"
}
},
"border/neutral/base/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.800.solid}",
"dark": "{swatch.border.neutral.500.solid}"
}
},
"border/neutral/base/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.850.solid}",
"dark": "{swatch.border.neutral.350.solid}"
}
},
"border/neutral/low/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.850.solid}",
"dark": "{swatch.border.neutral.450.solid}"
}
},
"border/neutral/low/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.750.solid}",
"dark": "{swatch.border.neutral.600.solid}"
}
},
"border/neutral/low/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.650.solid}",
"dark": "{swatch.border.neutral.700.solid}"
}
},
"border/neutral/low/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.700.solid}",
"dark": "{swatch.border.neutral.650.solid}"
}
},
"border/neutral/medium/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.650.solid}",
"dark": "{swatch.border.neutral.500.solid}"
}
},
"border/neutral/medium/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.550.solid}",
"dark": "{swatch.border.neutral.600.solid}"
}
},
"border/neutral/medium/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.450.solid}",
"dark": "{swatch.border.neutral.700.solid}"
}
},
"border/neutral/medium/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.500.solid}",
"dark": "{swatch.border.neutral.650.solid}"
}
},
"border/neutral/high/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.500.solid}",
"dark": "{swatch.border.neutral.650.solid}"
}
},
"border/neutral/high/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.600.solid}",
"dark": "{swatch.border.neutral.550.solid}"
}
},
"border/neutral/high/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.700.solid}",
"dark": "{swatch.border.neutral.450.solid}"
}
},
"border/neutral/high/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.650.solid}",
"dark": "{swatch.border.neutral.500.solid}"
}
},
"border/neutral/strong/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.450.solid}",
"dark": "{swatch.border.neutral.850.solid}"
}
},
"border/neutral/strong/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.600.solid}",
"dark": "{swatch.border.neutral.750.solid}"
}
},
"border/neutral/strong/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.700.solid}",
"dark": "{swatch.border.neutral.650.solid}"
}
},
"border/neutral/strong/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.650.solid}",
"dark": "{swatch.border.neutral.700.solid}"
}
},
"border/neutral/full/default": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.0.solid}",
"dark": "{swatch.border.neutral.1000.solid}"
}
},
"border/neutral/full/hovered": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.400.solid}",
"dark": "{swatch.border.neutral.900.solid}"
}
},
"border/neutral/full/pressed": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.500.solid}",
"dark": "{swatch.border.neutral.800.solid}"
}
},
"border/neutral/full/selected": {
"$type": "color",
"$value": {
"light": "{swatch.border.neutral.350.solid}",
"dark": "{swatch.border.neutral.850.solid}"
}
}
},
"Scales": {
"swatch/border/neutral/0/solid": {
"$type": "color",
"$value": "#000000ff"
},
"swatch/border/neutral/0/low": {
"$type": "color",
"$value": "#000000e6"
},
"swatch/border/neutral/0/medium": {
"$type": "color",
"$value": "#000000b3"
},
"swatch/border/neutral/0/high": {
"$type": "color",
"$value": "#00000080"
},
"swatch/border/neutral/0/strong": {
"$type": "color",
"$value": "#0000004d"
},
"swatch/border/neutral/0/full": {
"$type": "color",
"$value": "#00000000"
},
"swatch/border/neutral/50/solid": {
"$type": "color",
"$value": "#010000ff"
},
"swatch/border/neutral/50/low": {
"$type": "color",
"$value": "#010000e6"
},
"swatch/border/neutral/50/medium": {
"$type": "color",
"$value": "#010000b3"
},
"swatch/border/neutral/50/high": {
"$type": "color",
"$value": "#01000080"
},
"swatch/border/neutral/50/strong": {
"$type": "color",
"$value": "#0100004d"
},
"swatch/border/neutral/50/full": {
"$type": "color",
"$value": "#01000000"
},
"swatch/border/neutral/100/solid": {
"$type": "color",
"$value": "#050301ff"
},
"swatch/border/neutral/100/low": {
"$type": "color",
"$value": "#050301e6"
},
"swatch/border/neutral/100/medium": {
"$type": "color",
"$value": "#050301b3"
},
"swatch/border/neutral/100/high": {
"$type": "color",
"$value": "#05030180"
},
"swatch/border/neutral/100/strong": {
"$type": "color",
"$value": "#0503014d"
},
"swatch/border/neutral/100/full": {
"$type": "color",
"$value": "#05030100"
},
"swatch/border/neutral/150/solid": {
"$type": "color",
"$value": "#0e0b05ff"
},
"swatch/border/neutral/150/low": {
"$type": "color",
"$value": "#0e0b05e6"
},
"swatch/border/neutral/150/medium": {
"$type": "color",
"$value": "#0e0b05b3"
},
"swatch/border/neutral/150/high": {
"$type": "color",
"$value": "#0e0b0580"
},
"swatch/border/neutral/150/strong": {
"$type": "color",
"$value": "#0e0b054d"
},
"swatch/border/neutral/150/full": {
"$type": "color",
"$value": "#0e0b0500"
},
"swatch/border/neutral/200/solid": {
"$type": "color",
"$value": "#19150eff"
},
"swatch/border/neutral/200/low": {
"$type": "color",
"$value": "#19150ee6"
},
"swatch/border/neutral/200/medium": {
"$type": "color",
"$value": "#19150eb3"
},
"swatch/border/neutral/200/high": {
"$type": "color",
"$value": "#19150e80"
},
"swatch/border/neutral/200/strong": {
"$type": "color",
"$value": "#19150e4d"
},
"swatch/border/neutral/200/full": {
"$type": "color",
"$value": "#19150e00"
},
"swatch/border/neutral/250/solid": {
"$type": "color",
"$value": "#25211aff"
},
"swatch/border/neutral/250/low": {
"$type": "color",
"$value": "#25211ae6"
},
"swatch/border/neutral/250/medium": {
"$type": "color",
"$value": "#25211ab3"
},
"swatch/border/neutral/250/high": {
"$type": "color",
"$value": "#25211a80"
},
"swatch/border/neutral/250/strong": {
"$type": "color",
"$value": "#25211a4d"
},
"swatch/border/neutral/250/full": {
"$type": "color",
"$value": "#25211a00"
},
"swatch/border/neutral/300/solid": {
"$type": "color",
"$value": "#322d26ff"
},
"swatch/border/neutral/300/low": {
"$type": "color",
"$value": "#322d26e6"
},
"swatch/border/neutral/300/medium": {
"$type": "color",
"$value": "#322d26b3"
},
"swatch/border/neutral/300/high": {
"$type": "color",
"$value": "#322d2680"
},
"swatch/border/neutral/300/strong": {
"$type": "color",
"$value": "#322d264d"
},
"swatch/border/neutral/300/full": {
"$type": "color",
"$value": "#322d2600"
},
"swatch/border/neutral/350/solid": {
"$type": "color",
"$value": "#3e3a32ff"
},
"swatch/border/neutral/350/low": {
"$type": "color",
"$value": "#3e3a32e6"
},
"swatch/border/neutral/350/medium": {
"$type": "color",
"$value": "#3e3a32b3"
},
"swatch/border/neutral/350/high": {
"$type": "color",
"$value": "#3e3a3280"
},
"swatch/border/neutral/350/strong": {
"$type": "color",
"$value": "#3e3a324d"
},
"swatch/border/neutral/350/full": {
"$type": "color",
"$value": "#3e3a3200"
},
"swatch/border/neutral/400/solid": {
"$type": "color",
"$value": "#4c473fff"
},
"swatch/border/neutral/400/low": {
"$type": "color",
"$value": "#4c473fe6"
},
"swatch/border/neutral/400/medium": {
"$type": "color",
"$value": "#4c473fb3"
},
"swatch/border/neutral/400/high": {
"$type": "color",
"$value": "#4c473f80"
},
"swatch/border/neutral/400/strong": {
"$type": "color",
"$value": "#4c473f4d"
},
"swatch/border/neutral/400/full": {
"$type": "color",
"$value": "#4c473f00"
},
"swatch/border/neutral/450/solid": {
"$type": "color",
"$value": "#59554cff"
},
"swatch/border/neutral/450/low": {
"$type": "color",
"$value": "#59554ce6"
},
"swatch/border/neutral/450/medium": {
"$type": "color",
"$value": "#59554cb3"
},
"swatch/border/neutral/450/high": {
"$type": "color",
"$value": "#59554c80"
},
"swatch/border/neutral/450/strong": {
"$type": "color",
"$value": "#59554c4d"
},
"swatch/border/neutral/450/full": {
"$type": "color",
"$value": "#59554c00"
},
"swatch/border/neutral/500/solid": {
"$type": "color",
"$value": "#67635aff"
},
"swatch/border/neutral/500/low": {
"$type": "color",
"$value": "#67635ae6"
},
"swatch/border/neutral/500/medium": {
"$type": "color",
"$value": "#67635ab3"
},
"swatch/border/neutral/500/high": {
"$type": "color",
"$value": "#67635a80"
},
"swatch/border/neutral/500/strong": {
"$type": "color",
"$value": "#67635a4d"
},
"swatch/border/neutral/500/full": {
"$type": "color",
"$value": "#67635a00"
},
"swatch/border/neutral/550/solid": {
"$type": "color",
"$value": "#767168ff"
},
"swatch/border/neutral/550/low": {
"$type": "color",
"$value": "#767168e6"
},
"swatch/border/neutral/550/medium": {
"$type": "color",
"$value": "#767168b3"
},
"swatch/border/neutral/550/high": {
"$type": "color",
"$value": "#76716880"
},
"swatch/border/neutral/550/strong": {
"$type": "color",
"$value": "#7671684d"
},
"swatch/border/neutral/550/full": {
"$type": "color",
"$value": "#76716800"
},
"swatch/border/neutral/600/solid": {
"$type": "color",
"$value": "#858076ff"
},
"swatch/border/neutral/600/low": {
"$type": "color",
"$value": "#858076e6"
},
"swatch/border/neutral/600/medium": {
"$type": "color",
"$value": "#858076b3"
},
"swatch/border/neutral/600/high": {
"$type": "color",
"$value": "#85807680"
},
"swatch/border/neutral/600/strong": {
"$type": "color",
"$value": "#8580764d"
},
"swatch/border/neutral/600/full": {
"$type": "color",
"$value": "#85807600"
},
"swatch/border/neutral/650/solid": {
"$type": "color",
"$value": "#948e85ff"
},
"swatch/border/neutral/650/low": {
"$type": "color",
"$value": "#948e85e6"
},
"swatch/border/neutral/650/medium": {
"$type": "color",
"$value": "#948e85b3"
},
"swatch/border/neutral/650/high": {
"$type": "color",
"$value": "#948e8580"
},
"swatch/border/neutral/650/strong": {
"$type": "color",
"$value": "#948e854d"
},
"swatch/border/neutral/650/full": {
"$type": "color",
"$value": "#948e8500"
},
"swatch/border/neutral/700/solid": {
"$type": "color",
"$value": "#a39e94ff"
},
"swatch/border/neutral/700/low": {
"$type": "color",
"$value": "#a39e94e6"
},
"swatch/border/neutral/700/medium": {
"$type": "color",
"$value": "#a39e94b3"
},
"swatch/border/neutral/700/high": {
"$type": "color",
"$value": "#a39e9480"
},
"swatch/border/neutral/700/strong": {
"$type": "color",
"$value": "#a39e944d"
},
"swatch/border/neutral/700/full": {
"$type": "color",
"$value": "#a39e9400"
},
"swatch/border/neutral/750/solid": {
"$type": "color",
"$value": "#b3ada4ff"
},
"swatch/border/neutral/750/low": {
"$type": "color",
"$value": "#b3ada4e6"
},
"swatch/border/neutral/750/medium": {
"$type": "color",
"$value": "#b3ada4b3"
},
"swatch/border/neutral/750/high": {
"$type": "color",
"$value": "#b3ada480"
},
"swatch/border/neutral/750/strong": {
"$type": "color",
"$value": "#b3ada44d"
},
"swatch/border/neutral/750/full": {
"$type": "color",
"$value": "#b3ada400"
},
"swatch/border/neutral/800/solid": {
"$type": "color",
"$value": "#c2bdb3ff"
},
"swatch/border/neutral/800/low": {
"$type": "color",
"$value": "#c2bdb3e6"
},
"swatch/border/neutral/800/medium": {
"$type": "color",
"$value": "#c2bdb3b3"
},
"swatch/border/neutral/800/high": {
"$type": "color",
"$value": "#c2bdb380"
},
"swatch/border/neutral/800/strong": {
"$type": "color",
"$value": "#c2bdb34d"
},
"swatch/border/neutral/800/full": {
"$type": "color",
"$value": "#c2bdb300"
},
"swatch/border/neutral/850/solid": {
"$type": "color",
"$value": "#d3cdc3ff"
},
"swatch/border/neutral/850/low": {
"$type": "color",
"$value": "#d3cdc3e6"
},
"swatch/border/neutral/850/medium": {
"$type": "color",
"$value": "#d3cdc3b3"
},
"swatch/border/neutral/850/high": {
"$type": "color",
"$value": "#d3cdc380"
},
"swatch/border/neutral/850/strong": {
"$type": "color",
"$value": "#d3cdc34d"
},
"swatch/border/neutral/850/full": {
"$type": "color",
"$value": "#d3cdc300"
},
"swatch/border/neutral/900/solid": {
"$type": "color",
"$value": "#e3ddd3ff"
},
"swatch/border/neutral/900/low": {
"$type": "color",
"$value": "#e3ddd3e6"
},
"swatch/border/neutral/900/medium": {
"$type": "color",
"$value": "#e3ddd3b3"
},
"swatch/border/neutral/900/high": {
"$type": "color",
"$value": "#e3ddd380"
},
"swatch/border/neutral/900/strong": {
"$type": "color",
"$value": "#e3ddd34d"
},
"swatch/border/neutral/900/full": {
"$type": "color",
"$value": "#e3ddd300"
},
"swatch/border/neutral/950/solid": {
"$type": "color",
"$value": "#f3eee4ff"
},
"swatch/border/neutral/950/low": {
"$type": "color",
"$value": "#f3eee4e6"
},
"swatch/border/neutral/950/medium": {
"$type": "color",
"$value": "#f3eee4b3"
},
"swatch/border/neutral/950/high": {
"$type": "color",
"$value": "#f3eee480"
},
"swatch/border/neutral/950/strong": {
"$type": "color",
"$value": "#f3eee44d"
},
"swatch/border/neutral/950/full": {
"$type": "color",
"$value": "#f3eee400"
},
"swatch/border/neutral/1000/solid": {
"$type": "color",
"$value": "#ffffffff"
},
"swatch/border/neutral/1000/low": {
"$type": "color",
"$value": "#ffffffe6"
},
"swatch/border/neutral/1000/medium": {
"$type": "color",
"$value": "#ffffffb3"
},
"swatch/border/neutral/1000/high": {
"$type": "color",
"$value": "#ffffff80"
},
"swatch/border/neutral/1000/strong": {
"$type": "color",
"$value": "#ffffff4d"
},
"swatch/border/neutral/1000/full": {
"$type": "color",
"$value": "#ffffff00"
}
}
}
We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.
TBD
Up Next
Defining Intents
Defining intents allows you to tailor color tokens to better fit your product's unique requirements.