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

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.

Pick Intent Token:

Preview

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	#59554c
background.neutral.low.hovered	#b3ada4	#858076
background.neutral.low.pressed	#948e85	#a39e94
background.neutral.low.selected	#a39e94	#948e85

Intent: neutral, attention: medium

Token name	light	dark
background.neutral.medium.default	#b3ada4	#948e85
background.neutral.medium.hovered	#948e85	#b3ada4
background.neutral.medium.pressed	#767168	#d3cdc3
background.neutral.medium.selected	#858076	#c2bdb3

Intent: neutral, attention: high

Token name	light	dark
background.neutral.high.default	#948e85	#b3ada4
background.neutral.high.hovered	#b3ada4	#948e85
background.neutral.high.pressed	#d3cdc3	#767168
background.neutral.high.selected	#c2bdb3	#858076

Intent: neutral, attention: strong

Token name	light	dark
background.neutral.strong.default	#59554c	#d3cdc3
background.neutral.strong.hovered	#858076	#b3ada4
background.neutral.strong.pressed	#a39e94	#948e85
background.neutral.strong.selected	#948e85	#a39e94

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

CSS Custom Properties

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);
  --background--neutral-base-default--dark: var(--swatch--background-neutral-0);
  --background--neutral-base-hovered--light: var(--swatch--background-neutral-900);
  --background--neutral-base-hovered--dark: var(--swatch--background-neutral-400);
  --background--neutral-base-pressed--light: var(--swatch--background-neutral-800);
  --background--neutral-base-pressed--dark: var(--swatch--background-neutral-500);
  --background--neutral-base-selected--light: var(--swatch--background-neutral-850);
  --background--neutral-base-selected--dark: var(--swatch--background-neutral-350);
  --background--neutral-low-default--light: var(--swatch--background-neutral-850);
  --background--neutral-low-default--dark: var(--swatch--background-neutral-450);
  --background--neutral-low-hovered--light: var(--swatch--background-neutral-750);
  --background--neutral-low-hovered--dark: var(--swatch--background-neutral-600);
  --background--neutral-low-pressed--light: var(--swatch--background-neutral-650);
  --background--neutral-low-pressed--dark: var(--swatch--background-neutral-700);
  --background--neutral-low-selected--light: var(--swatch--background-neutral-700);
  --background--neutral-low-selected--dark: var(--swatch--background-neutral-650);
  --background--neutral-medium-default--light: var(--swatch--background-neutral-750);
  --background--neutral-medium-default--dark: var(--swatch--background-neutral-650);
  --background--neutral-medium-hovered--light: var(--swatch--background-neutral-650);
  --background--neutral-medium-hovered--dark: var(--swatch--background-neutral-750);
  --background--neutral-medium-pressed--light: var(--swatch--background-neutral-550);
  --background--neutral-medium-pressed--dark: var(--swatch--background-neutral-850);
  --background--neutral-medium-selected--light: var(--swatch--background-neutral-600);
  --background--neutral-medium-selected--dark: var(--swatch--background-neutral-800);
  --background--neutral-high-default--light: var(--swatch--background-neutral-650);
  --background--neutral-high-default--dark: var(--swatch--background-neutral-750);
  --background--neutral-high-hovered--light: var(--swatch--background-neutral-750);
  --background--neutral-high-hovered--dark: var(--swatch--background-neutral-650);
  --background--neutral-high-pressed--light: var(--swatch--background-neutral-850);
  --background--neutral-high-pressed--dark: var(--swatch--background-neutral-550);
  --background--neutral-high-selected--light: var(--swatch--background-neutral-800);
  --background--neutral-high-selected--dark: var(--swatch--background-neutral-600);
  --background--neutral-strong-default--light: var(--swatch--background-neutral-450);
  --background--neutral-strong-default--dark: var(--swatch--background-neutral-850);
  --background--neutral-strong-hovered--light: var(--swatch--background-neutral-600);
  --background--neutral-strong-hovered--dark: var(--swatch--background-neutral-750);
  --background--neutral-strong-pressed--light: var(--swatch--background-neutral-700);
  --background--neutral-strong-pressed--dark: var(--swatch--background-neutral-650);
  --background--neutral-strong-selected--light: var(--swatch--background-neutral-650);
  --background--neutral-strong-selected--dark: var(--swatch--background-neutral-700);
  --background--neutral-full-default--light: var(--swatch--background-neutral-0);
  --background--neutral-full-default--dark: var(--swatch--background-neutral-1000);
  --background--neutral-full-hovered--light: var(--swatch--background-neutral-400);
  --background--neutral-full-hovered--dark: var(--swatch--background-neutral-900);
  --background--neutral-full-pressed--light: var(--swatch--background-neutral-500);
  --background--neutral-full-pressed--dark: var(--swatch--background-neutral-800);
  --background--neutral-full-selected--light: var(--swatch--background-neutral-350);
  --background--neutral-full-selected--dark: var(--swatch--background-neutral-850);
}

Figma JSON

Intent: neutral

{
  "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.450.solid}"
      }
    },
    "background/neutral/low/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.750.solid}",
        "dark": "{swatch.background.neutral.600.solid}"
      }
    },
    "background/neutral/low/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.650.solid}",
        "dark": "{swatch.background.neutral.700.solid}"
      }
    },
    "background/neutral/low/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.700.solid}",
        "dark": "{swatch.background.neutral.650.solid}"
      }
    },
    "background/neutral/medium/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.750.solid}",
        "dark": "{swatch.background.neutral.650.solid}"
      }
    },
    "background/neutral/medium/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.650.solid}",
        "dark": "{swatch.background.neutral.750.solid}"
      }
    },
    "background/neutral/medium/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.550.solid}",
        "dark": "{swatch.background.neutral.850.solid}"
      }
    },
    "background/neutral/medium/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.600.solid}",
        "dark": "{swatch.background.neutral.800.solid}"
      }
    },
    "background/neutral/high/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.650.solid}",
        "dark": "{swatch.background.neutral.750.solid}"
      }
    },
    "background/neutral/high/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.750.solid}",
        "dark": "{swatch.background.neutral.650.solid}"
      }
    },
    "background/neutral/high/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.850.solid}",
        "dark": "{swatch.background.neutral.550.solid}"
      }
    },
    "background/neutral/high/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.800.solid}",
        "dark": "{swatch.background.neutral.600.solid}"
      }
    },
    "background/neutral/strong/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.450.solid}",
        "dark": "{swatch.background.neutral.850.solid}"
      }
    },
    "background/neutral/strong/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.600.solid}",
        "dark": "{swatch.background.neutral.750.solid}"
      }
    },
    "background/neutral/strong/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.700.solid}",
        "dark": "{swatch.background.neutral.650.solid}"
      }
    },
    "background/neutral/strong/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.neutral.650.solid}",
        "dark": "{swatch.background.neutral.700.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}"
      }
    }
  },
  "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"
    }
  }
}

We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.

React Native

TBD

Up Next

---

Foreground Color Tokens

Content color tokens define colors for text, icons, and other foreground elements.

Foreground Color Tokens ->

Border Color Tokens

Border color tokens define the colors used for borders and dividers.

Border Color Tokens ->

Defining Intents

Defining intents allows you to tailor color tokens to better fit your product's unique requirements.

Defining Intents ->