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 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:

1. Should the intent align with the background intent or differ from it?
2. Should the foreground have additional or reduced attention compared to the background?
3. Should the state of the foreground be separate from the background state?
4. 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:

1. Start with a simple background with no attention against its surroundings.
2. Use a neutral foreground color with medium attention on top of it.
3. 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.
4. 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>

To create foreground 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 foreground 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 Foreground 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: full

Token name	light	dark
foreground.neutral.full.default.solid	T#000000	T#ffffff
foreground.neutral.full.default.low	T#000000e6	T#ffffffe6
foreground.neutral.full.default.medium	T#000000b3	T#ffffffb3
foreground.neutral.full.default.high	T#00000080	T#ffffff80
foreground.neutral.full.default.strong	T#0000004d	T#ffffff4d
foreground.neutral.full.default.full	T#00000000	T#ffffff00
foreground.neutral.full.hovered.solid	T#4c473f	T#e3ddd3
foreground.neutral.full.hovered.low	T#4c473fe6	T#e3ddd3e6
foreground.neutral.full.hovered.medium	T#4c473fb3	T#e3ddd3b3
foreground.neutral.full.hovered.high	T#4c473f80	T#e3ddd380
foreground.neutral.full.hovered.strong	T#4c473f4d	T#e3ddd34d
foreground.neutral.full.hovered.full	T#4c473f00	T#e3ddd300
foreground.neutral.full.pressed.solid	T#67635a	T#c2bdb3
foreground.neutral.full.pressed.low	T#67635ae6	T#c2bdb3e6
foreground.neutral.full.pressed.medium	T#67635ab3	T#c2bdb3b3
foreground.neutral.full.pressed.high	T#67635a80	T#c2bdb380
foreground.neutral.full.pressed.strong	T#67635a4d	T#c2bdb34d
foreground.neutral.full.pressed.full	T#67635a00	T#c2bdb300
foreground.neutral.full.selected.solid	T#3e3a32	T#d3cdc3
foreground.neutral.full.selected.low	T#3e3a32e6	T#d3cdc3e6
foreground.neutral.full.selected.medium	T#3e3a32b3	T#d3cdc3b3
foreground.neutral.full.selected.high	T#3e3a3280	T#d3cdc380
foreground.neutral.full.selected.strong	T#3e3a324d	T#d3cdc34d
foreground.neutral.full.selected.full	T#3e3a3200	T#d3cdc300

Intent: neutral, attention: strong

Token name	light	dark
foreground.neutral.strong.default.solid	T#59554c	T#d3cdc3
foreground.neutral.strong.default.low	T#59554ce6	T#d3cdc3e6
foreground.neutral.strong.default.medium	T#59554cb3	T#d3cdc3b3
foreground.neutral.strong.default.high	T#59554c80	T#d3cdc380
foreground.neutral.strong.default.strong	T#59554c4d	T#d3cdc34d
foreground.neutral.strong.default.full	T#59554c00	T#d3cdc300
foreground.neutral.strong.hovered.solid	T#858076	T#b3ada4
foreground.neutral.strong.hovered.low	T#858076e6	T#b3ada4e6
foreground.neutral.strong.hovered.medium	T#858076b3	T#b3ada4b3
foreground.neutral.strong.hovered.high	T#85807680	T#b3ada480
foreground.neutral.strong.hovered.strong	T#8580764d	T#b3ada44d
foreground.neutral.strong.hovered.full	T#85807600	T#b3ada400
foreground.neutral.strong.pressed.solid	T#a39e94	T#948e85
foreground.neutral.strong.pressed.low	T#a39e94e6	T#948e85e6
foreground.neutral.strong.pressed.medium	T#a39e94b3	T#948e85b3
foreground.neutral.strong.pressed.high	T#a39e9480	T#948e8580
foreground.neutral.strong.pressed.strong	T#a39e944d	T#948e854d
foreground.neutral.strong.pressed.full	T#a39e9400	T#948e8500
foreground.neutral.strong.selected.solid	T#948e85	T#a39e94
foreground.neutral.strong.selected.low	T#948e85e6	T#a39e94e6
foreground.neutral.strong.selected.medium	T#948e85b3	T#a39e94b3
foreground.neutral.strong.selected.high	T#948e8580	T#a39e9480
foreground.neutral.strong.selected.strong	T#948e854d	T#a39e944d
foreground.neutral.strong.selected.full	T#948e8500	T#a39e9400

Intent: neutral, attention: high

Token name	light	dark
foreground.neutral.high.default.solid	T#67635a	T#948e85
foreground.neutral.high.default.low	T#67635ae6	T#948e85e6
foreground.neutral.high.default.medium	T#67635ab3	T#948e85b3
foreground.neutral.high.default.high	T#67635a80	T#948e8580
foreground.neutral.high.default.strong	T#67635a4d	T#948e854d
foreground.neutral.high.default.full	T#67635a00	T#948e8500
foreground.neutral.high.hovered.solid	T#858076	T#767168
foreground.neutral.high.hovered.low	T#858076e6	T#767168e6
foreground.neutral.high.hovered.medium	T#858076b3	T#767168b3
foreground.neutral.high.hovered.high	T#85807680	T#76716880
foreground.neutral.high.hovered.strong	T#8580764d	T#7671684d
foreground.neutral.high.hovered.full	T#85807600	T#76716800
foreground.neutral.high.pressed.solid	T#a39e94	T#59554c
foreground.neutral.high.pressed.low	T#a39e94e6	T#59554ce6
foreground.neutral.high.pressed.medium	T#a39e94b3	T#59554cb3
foreground.neutral.high.pressed.high	T#a39e9480	T#59554c80
foreground.neutral.high.pressed.strong	T#a39e944d	T#59554c4d
foreground.neutral.high.pressed.full	T#a39e9400	T#59554c00
foreground.neutral.high.selected.solid	T#948e85	T#67635a
foreground.neutral.high.selected.low	T#948e85e6	T#67635ae6
foreground.neutral.high.selected.medium	T#948e85b3	T#67635ab3
foreground.neutral.high.selected.high	T#948e8580	T#67635a80
foreground.neutral.high.selected.strong	T#948e854d	T#67635a4d
foreground.neutral.high.selected.full	T#948e8500	T#67635a00

Intent: neutral, attention: medium

Token name	light	dark
foreground.neutral.medium.default.solid	T#948e85	T#67635a
foreground.neutral.medium.default.low	T#948e85e6	T#67635ae6
foreground.neutral.medium.default.medium	T#948e85b3	T#67635ab3
foreground.neutral.medium.default.high	T#948e8580	T#67635a80
foreground.neutral.medium.default.strong	T#948e854d	T#67635a4d
foreground.neutral.medium.default.full	T#948e8500	T#67635a00
foreground.neutral.medium.hovered.solid	T#767168	T#858076
foreground.neutral.medium.hovered.low	T#767168e6	T#858076e6
foreground.neutral.medium.hovered.medium	T#767168b3	T#858076b3
foreground.neutral.medium.hovered.high	T#76716880	T#85807680
foreground.neutral.medium.hovered.strong	T#7671684d	T#8580764d
foreground.neutral.medium.hovered.full	T#76716800	T#85807600
foreground.neutral.medium.pressed.solid	T#59554c	T#a39e94
foreground.neutral.medium.pressed.low	T#59554ce6	T#a39e94e6
foreground.neutral.medium.pressed.medium	T#59554cb3	T#a39e94b3
foreground.neutral.medium.pressed.high	T#59554c80	T#a39e9480
foreground.neutral.medium.pressed.strong	T#59554c4d	T#a39e944d
foreground.neutral.medium.pressed.full	T#59554c00	T#a39e9400
foreground.neutral.medium.selected.solid	T#67635a	T#948e85
foreground.neutral.medium.selected.low	T#67635ae6	T#948e85e6
foreground.neutral.medium.selected.medium	T#67635ab3	T#948e85b3
foreground.neutral.medium.selected.high	T#67635a80	T#948e8580
foreground.neutral.medium.selected.strong	T#67635a4d	T#948e854d
foreground.neutral.medium.selected.full	T#67635a00	T#948e8500

Intent: neutral, attention: low

Token name	light	dark
foreground.neutral.low.default.solid	T#d3cdc3	T#59554c
foreground.neutral.low.default.low	T#d3cdc3e6	T#59554ce6
foreground.neutral.low.default.medium	T#d3cdc3b3	T#59554cb3
foreground.neutral.low.default.high	T#d3cdc380	T#59554c80
foreground.neutral.low.default.strong	T#d3cdc34d	T#59554c4d
foreground.neutral.low.default.full	T#d3cdc300	T#59554c00
foreground.neutral.low.hovered.solid	T#b3ada4	T#858076
foreground.neutral.low.hovered.low	T#b3ada4e6	T#858076e6
foreground.neutral.low.hovered.medium	T#b3ada4b3	T#858076b3
foreground.neutral.low.hovered.high	T#b3ada480	T#85807680
foreground.neutral.low.hovered.strong	T#b3ada44d	T#8580764d
foreground.neutral.low.hovered.full	T#b3ada400	T#85807600
foreground.neutral.low.pressed.solid	T#948e85	T#a39e94
foreground.neutral.low.pressed.low	T#948e85e6	T#a39e94e6
foreground.neutral.low.pressed.medium	T#948e85b3	T#a39e94b3
foreground.neutral.low.pressed.high	T#948e8580	T#a39e9480
foreground.neutral.low.pressed.strong	T#948e854d	T#a39e944d
foreground.neutral.low.pressed.full	T#948e8500	T#a39e9400
foreground.neutral.low.selected.solid	T#a39e94	T#948e85
foreground.neutral.low.selected.low	T#a39e94e6	T#948e85e6
foreground.neutral.low.selected.medium	T#a39e94b3	T#948e85b3
foreground.neutral.low.selected.high	T#a39e9480	T#948e8580
foreground.neutral.low.selected.strong	T#a39e944d	T#948e854d
foreground.neutral.low.selected.full	T#a39e9400	T#948e8500

Intent: neutral, attention: base

Token name	light	dark
foreground.neutral.base.default.solid	T#ffffff	T#000000
foreground.neutral.base.default.low	T#ffffffe6	T#000000e6
foreground.neutral.base.default.medium	T#ffffffb3	T#000000b3
foreground.neutral.base.default.high	T#ffffff80	T#00000080
foreground.neutral.base.default.strong	T#ffffff4d	T#0000004d
foreground.neutral.base.default.full	T#ffffff00	T#00000000
foreground.neutral.base.hovered.solid	T#e3ddd3	T#4c473f
foreground.neutral.base.hovered.low	T#e3ddd3e6	T#4c473fe6
foreground.neutral.base.hovered.medium	T#e3ddd3b3	T#4c473fb3
foreground.neutral.base.hovered.high	T#e3ddd380	T#4c473f80
foreground.neutral.base.hovered.strong	T#e3ddd34d	T#4c473f4d
foreground.neutral.base.hovered.full	T#e3ddd300	T#4c473f00
foreground.neutral.base.pressed.solid	T#c2bdb3	T#67635a
foreground.neutral.base.pressed.low	T#c2bdb3e6	T#67635ae6
foreground.neutral.base.pressed.medium	T#c2bdb3b3	T#67635ab3
foreground.neutral.base.pressed.high	T#c2bdb380	T#67635a80
foreground.neutral.base.pressed.strong	T#c2bdb34d	T#67635a4d
foreground.neutral.base.pressed.full	T#c2bdb300	T#67635a00
foreground.neutral.base.selected.solid	T#d3cdc3	T#3e3a32
foreground.neutral.base.selected.low	T#d3cdc3e6	T#3e3a32e6
foreground.neutral.base.selected.medium	T#d3cdc3b3	T#3e3a32b3
foreground.neutral.base.selected.high	T#d3cdc380	T#3e3a3280
foreground.neutral.base.selected.strong	T#d3cdc34d	T#3e3a324d
foreground.neutral.base.selected.full	T#d3cdc300	T#3e3a3200

CSS Custom Properties

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--foreground-neutral-0: 0 0 0;
  --swatch--foreground-neutral-50: 1 0 0;
  --swatch--foreground-neutral-100: 5 3 1;
  --swatch--foreground-neutral-150: 14 11 5;
  --swatch--foreground-neutral-200: 25 21 14;
  --swatch--foreground-neutral-250: 37 33 26;
  --swatch--foreground-neutral-300: 50 45 38;
  --swatch--foreground-neutral-350: 62 58 50;
  --swatch--foreground-neutral-400: 76 71 63;
  --swatch--foreground-neutral-450: 89 85 76;
  --swatch--foreground-neutral-500: 103 99 90;
  --swatch--foreground-neutral-550: 118 113 104;
  --swatch--foreground-neutral-600: 133 128 118;
  --swatch--foreground-neutral-650: 148 142 133;
  --swatch--foreground-neutral-700: 163 158 148;
  --swatch--foreground-neutral-750: 179 173 164;
  --swatch--foreground-neutral-800: 194 189 179;
  --swatch--foreground-neutral-850: 211 205 195;
  --swatch--foreground-neutral-900: 227 221 211;
  --swatch--foreground-neutral-950: 243 238 228;
  --swatch--foreground-neutral-1000: 255 255 255;
  /**
   * Abstract foreground tokens for neutral intent:
   */
  --foreground--neutral-base-default--light: var(--swatch--foreground-neutral-1000);
  --foreground--neutral-base-default--dark: var(--swatch--foreground-neutral-0);
  --foreground--neutral-base-hovered--light: var(--swatch--foreground-neutral-900);
  --foreground--neutral-base-hovered--dark: var(--swatch--foreground-neutral-400);
  --foreground--neutral-base-pressed--light: var(--swatch--foreground-neutral-800);
  --foreground--neutral-base-pressed--dark: var(--swatch--foreground-neutral-500);
  --foreground--neutral-base-selected--light: var(--swatch--foreground-neutral-850);
  --foreground--neutral-base-selected--dark: var(--swatch--foreground-neutral-350);
  --foreground--neutral-low-default--light: var(--swatch--foreground-neutral-850);
  --foreground--neutral-low-default--dark: var(--swatch--foreground-neutral-450);
  --foreground--neutral-low-hovered--light: var(--swatch--foreground-neutral-750);
  --foreground--neutral-low-hovered--dark: var(--swatch--foreground-neutral-600);
  --foreground--neutral-low-pressed--light: var(--swatch--foreground-neutral-650);
  --foreground--neutral-low-pressed--dark: var(--swatch--foreground-neutral-700);
  --foreground--neutral-low-selected--light: var(--swatch--foreground-neutral-700);
  --foreground--neutral-low-selected--dark: var(--swatch--foreground-neutral-650);
  --foreground--neutral-medium-default--light: var(--swatch--foreground-neutral-650);
  --foreground--neutral-medium-default--dark: var(--swatch--foreground-neutral-500);
  --foreground--neutral-medium-hovered--light: var(--swatch--foreground-neutral-550);
  --foreground--neutral-medium-hovered--dark: var(--swatch--foreground-neutral-600);
  --foreground--neutral-medium-pressed--light: var(--swatch--foreground-neutral-450);
  --foreground--neutral-medium-pressed--dark: var(--swatch--foreground-neutral-700);
  --foreground--neutral-medium-selected--light: var(--swatch--foreground-neutral-500);
  --foreground--neutral-medium-selected--dark: var(--swatch--foreground-neutral-650);
  --foreground--neutral-high-default--light: var(--swatch--foreground-neutral-500);
  --foreground--neutral-high-default--dark: var(--swatch--foreground-neutral-650);
  --foreground--neutral-high-hovered--light: var(--swatch--foreground-neutral-600);
  --foreground--neutral-high-hovered--dark: var(--swatch--foreground-neutral-550);
  --foreground--neutral-high-pressed--light: var(--swatch--foreground-neutral-700);
  --foreground--neutral-high-pressed--dark: var(--swatch--foreground-neutral-450);
  --foreground--neutral-high-selected--light: var(--swatch--foreground-neutral-650);
  --foreground--neutral-high-selected--dark: var(--swatch--foreground-neutral-500);
  --foreground--neutral-strong-default--light: var(--swatch--foreground-neutral-450);
  --foreground--neutral-strong-default--dark: var(--swatch--foreground-neutral-850);
  --foreground--neutral-strong-hovered--light: var(--swatch--foreground-neutral-600);
  --foreground--neutral-strong-hovered--dark: var(--swatch--foreground-neutral-750);
  --foreground--neutral-strong-pressed--light: var(--swatch--foreground-neutral-700);
  --foreground--neutral-strong-pressed--dark: var(--swatch--foreground-neutral-650);
  --foreground--neutral-strong-selected--light: var(--swatch--foreground-neutral-650);
  --foreground--neutral-strong-selected--dark: var(--swatch--foreground-neutral-700);
  --foreground--neutral-full-default--light: var(--swatch--foreground-neutral-0);
  --foreground--neutral-full-default--dark: var(--swatch--foreground-neutral-1000);
  --foreground--neutral-full-hovered--light: var(--swatch--foreground-neutral-400);
  --foreground--neutral-full-hovered--dark: var(--swatch--foreground-neutral-900);
  --foreground--neutral-full-pressed--light: var(--swatch--foreground-neutral-500);
  --foreground--neutral-full-pressed--dark: var(--swatch--foreground-neutral-800);
  --foreground--neutral-full-selected--light: var(--swatch--foreground-neutral-350);
  --foreground--neutral-full-selected--dark: var(--swatch--foreground-neutral-850);
}

Figma JSON

Intent: neutral

{
  "Colors": {
    "foreground/neutral/base/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.1000.solid}",
        "dark": "{swatch.foreground.neutral.0.solid}"
      }
    },
    "foreground/neutral/base/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.900.solid}",
        "dark": "{swatch.foreground.neutral.400.solid}"
      }
    },
    "foreground/neutral/base/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.800.solid}",
        "dark": "{swatch.foreground.neutral.500.solid}"
      }
    },
    "foreground/neutral/base/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.850.solid}",
        "dark": "{swatch.foreground.neutral.350.solid}"
      }
    },
    "foreground/neutral/low/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.850.solid}",
        "dark": "{swatch.foreground.neutral.450.solid}"
      }
    },
    "foreground/neutral/low/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.750.solid}",
        "dark": "{swatch.foreground.neutral.600.solid}"
      }
    },
    "foreground/neutral/low/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.650.solid}",
        "dark": "{swatch.foreground.neutral.700.solid}"
      }
    },
    "foreground/neutral/low/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.700.solid}",
        "dark": "{swatch.foreground.neutral.650.solid}"
      }
    },
    "foreground/neutral/medium/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.650.solid}",
        "dark": "{swatch.foreground.neutral.500.solid}"
      }
    },
    "foreground/neutral/medium/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.550.solid}",
        "dark": "{swatch.foreground.neutral.600.solid}"
      }
    },
    "foreground/neutral/medium/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.450.solid}",
        "dark": "{swatch.foreground.neutral.700.solid}"
      }
    },
    "foreground/neutral/medium/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.500.solid}",
        "dark": "{swatch.foreground.neutral.650.solid}"
      }
    },
    "foreground/neutral/high/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.500.solid}",
        "dark": "{swatch.foreground.neutral.650.solid}"
      }
    },
    "foreground/neutral/high/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.600.solid}",
        "dark": "{swatch.foreground.neutral.550.solid}"
      }
    },
    "foreground/neutral/high/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.700.solid}",
        "dark": "{swatch.foreground.neutral.450.solid}"
      }
    },
    "foreground/neutral/high/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.650.solid}",
        "dark": "{swatch.foreground.neutral.500.solid}"
      }
    },
    "foreground/neutral/strong/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.450.solid}",
        "dark": "{swatch.foreground.neutral.850.solid}"
      }
    },
    "foreground/neutral/strong/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.600.solid}",
        "dark": "{swatch.foreground.neutral.750.solid}"
      }
    },
    "foreground/neutral/strong/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.700.solid}",
        "dark": "{swatch.foreground.neutral.650.solid}"
      }
    },
    "foreground/neutral/strong/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.650.solid}",
        "dark": "{swatch.foreground.neutral.700.solid}"
      }
    },
    "foreground/neutral/full/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.0.solid}",
        "dark": "{swatch.foreground.neutral.1000.solid}"
      }
    },
    "foreground/neutral/full/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.400.solid}",
        "dark": "{swatch.foreground.neutral.900.solid}"
      }
    },
    "foreground/neutral/full/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.500.solid}",
        "dark": "{swatch.foreground.neutral.800.solid}"
      }
    },
    "foreground/neutral/full/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.foreground.neutral.350.solid}",
        "dark": "{swatch.foreground.neutral.850.solid}"
      }
    }
  },
  "Scales": {
    "swatch/foreground/neutral/0/solid": {
      "$type": "color",
      "$value": "#000000ff"
    },
    "swatch/foreground/neutral/0/low": {
      "$type": "color",
      "$value": "#000000e6"
    },
    "swatch/foreground/neutral/0/medium": {
      "$type": "color",
      "$value": "#000000b3"
    },
    "swatch/foreground/neutral/0/high": {
      "$type": "color",
      "$value": "#00000080"
    },
    "swatch/foreground/neutral/0/strong": {
      "$type": "color",
      "$value": "#0000004d"
    },
    "swatch/foreground/neutral/0/full": {
      "$type": "color",
      "$value": "#00000000"
    },
    "swatch/foreground/neutral/50/solid": {
      "$type": "color",
      "$value": "#010000ff"
    },
    "swatch/foreground/neutral/50/low": {
      "$type": "color",
      "$value": "#010000e6"
    },
    "swatch/foreground/neutral/50/medium": {
      "$type": "color",
      "$value": "#010000b3"
    },
    "swatch/foreground/neutral/50/high": {
      "$type": "color",
      "$value": "#01000080"
    },
    "swatch/foreground/neutral/50/strong": {
      "$type": "color",
      "$value": "#0100004d"
    },
    "swatch/foreground/neutral/50/full": {
      "$type": "color",
      "$value": "#01000000"
    },
    "swatch/foreground/neutral/100/solid": {
      "$type": "color",
      "$value": "#050301ff"
    },
    "swatch/foreground/neutral/100/low": {
      "$type": "color",
      "$value": "#050301e6"
    },
    "swatch/foreground/neutral/100/medium": {
      "$type": "color",
      "$value": "#050301b3"
    },
    "swatch/foreground/neutral/100/high": {
      "$type": "color",
      "$value": "#05030180"
    },
    "swatch/foreground/neutral/100/strong": {
      "$type": "color",
      "$value": "#0503014d"
    },
    "swatch/foreground/neutral/100/full": {
      "$type": "color",
      "$value": "#05030100"
    },
    "swatch/foreground/neutral/150/solid": {
      "$type": "color",
      "$value": "#0e0b05ff"
    },
    "swatch/foreground/neutral/150/low": {
      "$type": "color",
      "$value": "#0e0b05e6"
    },
    "swatch/foreground/neutral/150/medium": {
      "$type": "color",
      "$value": "#0e0b05b3"
    },
    "swatch/foreground/neutral/150/high": {
      "$type": "color",
      "$value": "#0e0b0580"
    },
    "swatch/foreground/neutral/150/strong": {
      "$type": "color",
      "$value": "#0e0b054d"
    },
    "swatch/foreground/neutral/150/full": {
      "$type": "color",
      "$value": "#0e0b0500"
    },
    "swatch/foreground/neutral/200/solid": {
      "$type": "color",
      "$value": "#19150eff"
    },
    "swatch/foreground/neutral/200/low": {
      "$type": "color",
      "$value": "#19150ee6"
    },
    "swatch/foreground/neutral/200/medium": {
      "$type": "color",
      "$value": "#19150eb3"
    },
    "swatch/foreground/neutral/200/high": {
      "$type": "color",
      "$value": "#19150e80"
    },
    "swatch/foreground/neutral/200/strong": {
      "$type": "color",
      "$value": "#19150e4d"
    },
    "swatch/foreground/neutral/200/full": {
      "$type": "color",
      "$value": "#19150e00"
    },
    "swatch/foreground/neutral/250/solid": {
      "$type": "color",
      "$value": "#25211aff"
    },
    "swatch/foreground/neutral/250/low": {
      "$type": "color",
      "$value": "#25211ae6"
    },
    "swatch/foreground/neutral/250/medium": {
      "$type": "color",
      "$value": "#25211ab3"
    },
    "swatch/foreground/neutral/250/high": {
      "$type": "color",
      "$value": "#25211a80"
    },
    "swatch/foreground/neutral/250/strong": {
      "$type": "color",
      "$value": "#25211a4d"
    },
    "swatch/foreground/neutral/250/full": {
      "$type": "color",
      "$value": "#25211a00"
    },
    "swatch/foreground/neutral/300/solid": {
      "$type": "color",
      "$value": "#322d26ff"
    },
    "swatch/foreground/neutral/300/low": {
      "$type": "color",
      "$value": "#322d26e6"
    },
    "swatch/foreground/neutral/300/medium": {
      "$type": "color",
      "$value": "#322d26b3"
    },
    "swatch/foreground/neutral/300/high": {
      "$type": "color",
      "$value": "#322d2680"
    },
    "swatch/foreground/neutral/300/strong": {
      "$type": "color",
      "$value": "#322d264d"
    },
    "swatch/foreground/neutral/300/full": {
      "$type": "color",
      "$value": "#322d2600"
    },
    "swatch/foreground/neutral/350/solid": {
      "$type": "color",
      "$value": "#3e3a32ff"
    },
    "swatch/foreground/neutral/350/low": {
      "$type": "color",
      "$value": "#3e3a32e6"
    },
    "swatch/foreground/neutral/350/medium": {
      "$type": "color",
      "$value": "#3e3a32b3"
    },
    "swatch/foreground/neutral/350/high": {
      "$type": "color",
      "$value": "#3e3a3280"
    },
    "swatch/foreground/neutral/350/strong": {
      "$type": "color",
      "$value": "#3e3a324d"
    },
    "swatch/foreground/neutral/350/full": {
      "$type": "color",
      "$value": "#3e3a3200"
    },
    "swatch/foreground/neutral/400/solid": {
      "$type": "color",
      "$value": "#4c473fff"
    },
    "swatch/foreground/neutral/400/low": {
      "$type": "color",
      "$value": "#4c473fe6"
    },
    "swatch/foreground/neutral/400/medium": {
      "$type": "color",
      "$value": "#4c473fb3"
    },
    "swatch/foreground/neutral/400/high": {
      "$type": "color",
      "$value": "#4c473f80"
    },
    "swatch/foreground/neutral/400/strong": {
      "$type": "color",
      "$value": "#4c473f4d"
    },
    "swatch/foreground/neutral/400/full": {
      "$type": "color",
      "$value": "#4c473f00"
    },
    "swatch/foreground/neutral/450/solid": {
      "$type": "color",
      "$value": "#59554cff"
    },
    "swatch/foreground/neutral/450/low": {
      "$type": "color",
      "$value": "#59554ce6"
    },
    "swatch/foreground/neutral/450/medium": {
      "$type": "color",
      "$value": "#59554cb3"
    },
    "swatch/foreground/neutral/450/high": {
      "$type": "color",
      "$value": "#59554c80"
    },
    "swatch/foreground/neutral/450/strong": {
      "$type": "color",
      "$value": "#59554c4d"
    },
    "swatch/foreground/neutral/450/full": {
      "$type": "color",
      "$value": "#59554c00"
    },
    "swatch/foreground/neutral/500/solid": {
      "$type": "color",
      "$value": "#67635aff"
    },
    "swatch/foreground/neutral/500/low": {
      "$type": "color",
      "$value": "#67635ae6"
    },
    "swatch/foreground/neutral/500/medium": {
      "$type": "color",
      "$value": "#67635ab3"
    },
    "swatch/foreground/neutral/500/high": {
      "$type": "color",
      "$value": "#67635a80"
    },
    "swatch/foreground/neutral/500/strong": {
      "$type": "color",
      "$value": "#67635a4d"
    },
    "swatch/foreground/neutral/500/full": {
      "$type": "color",
      "$value": "#67635a00"
    },
    "swatch/foreground/neutral/550/solid": {
      "$type": "color",
      "$value": "#767168ff"
    },
    "swatch/foreground/neutral/550/low": {
      "$type": "color",
      "$value": "#767168e6"
    },
    "swatch/foreground/neutral/550/medium": {
      "$type": "color",
      "$value": "#767168b3"
    },
    "swatch/foreground/neutral/550/high": {
      "$type": "color",
      "$value": "#76716880"
    },
    "swatch/foreground/neutral/550/strong": {
      "$type": "color",
      "$value": "#7671684d"
    },
    "swatch/foreground/neutral/550/full": {
      "$type": "color",
      "$value": "#76716800"
    },
    "swatch/foreground/neutral/600/solid": {
      "$type": "color",
      "$value": "#858076ff"
    },
    "swatch/foreground/neutral/600/low": {
      "$type": "color",
      "$value": "#858076e6"
    },
    "swatch/foreground/neutral/600/medium": {
      "$type": "color",
      "$value": "#858076b3"
    },
    "swatch/foreground/neutral/600/high": {
      "$type": "color",
      "$value": "#85807680"
    },
    "swatch/foreground/neutral/600/strong": {
      "$type": "color",
      "$value": "#8580764d"
    },
    "swatch/foreground/neutral/600/full": {
      "$type": "color",
      "$value": "#85807600"
    },
    "swatch/foreground/neutral/650/solid": {
      "$type": "color",
      "$value": "#948e85ff"
    },
    "swatch/foreground/neutral/650/low": {
      "$type": "color",
      "$value": "#948e85e6"
    },
    "swatch/foreground/neutral/650/medium": {
      "$type": "color",
      "$value": "#948e85b3"
    },
    "swatch/foreground/neutral/650/high": {
      "$type": "color",
      "$value": "#948e8580"
    },
    "swatch/foreground/neutral/650/strong": {
      "$type": "color",
      "$value": "#948e854d"
    },
    "swatch/foreground/neutral/650/full": {
      "$type": "color",
      "$value": "#948e8500"
    },
    "swatch/foreground/neutral/700/solid": {
      "$type": "color",
      "$value": "#a39e94ff"
    },
    "swatch/foreground/neutral/700/low": {
      "$type": "color",
      "$value": "#a39e94e6"
    },
    "swatch/foreground/neutral/700/medium": {
      "$type": "color",
      "$value": "#a39e94b3"
    },
    "swatch/foreground/neutral/700/high": {
      "$type": "color",
      "$value": "#a39e9480"
    },
    "swatch/foreground/neutral/700/strong": {
      "$type": "color",
      "$value": "#a39e944d"
    },
    "swatch/foreground/neutral/700/full": {
      "$type": "color",
      "$value": "#a39e9400"
    },
    "swatch/foreground/neutral/750/solid": {
      "$type": "color",
      "$value": "#b3ada4ff"
    },
    "swatch/foreground/neutral/750/low": {
      "$type": "color",
      "$value": "#b3ada4e6"
    },
    "swatch/foreground/neutral/750/medium": {
      "$type": "color",
      "$value": "#b3ada4b3"
    },
    "swatch/foreground/neutral/750/high": {
      "$type": "color",
      "$value": "#b3ada480"
    },
    "swatch/foreground/neutral/750/strong": {
      "$type": "color",
      "$value": "#b3ada44d"
    },
    "swatch/foreground/neutral/750/full": {
      "$type": "color",
      "$value": "#b3ada400"
    },
    "swatch/foreground/neutral/800/solid": {
      "$type": "color",
      "$value": "#c2bdb3ff"
    },
    "swatch/foreground/neutral/800/low": {
      "$type": "color",
      "$value": "#c2bdb3e6"
    },
    "swatch/foreground/neutral/800/medium": {
      "$type": "color",
      "$value": "#c2bdb3b3"
    },
    "swatch/foreground/neutral/800/high": {
      "$type": "color",
      "$value": "#c2bdb380"
    },
    "swatch/foreground/neutral/800/strong": {
      "$type": "color",
      "$value": "#c2bdb34d"
    },
    "swatch/foreground/neutral/800/full": {
      "$type": "color",
      "$value": "#c2bdb300"
    },
    "swatch/foreground/neutral/850/solid": {
      "$type": "color",
      "$value": "#d3cdc3ff"
    },
    "swatch/foreground/neutral/850/low": {
      "$type": "color",
      "$value": "#d3cdc3e6"
    },
    "swatch/foreground/neutral/850/medium": {
      "$type": "color",
      "$value": "#d3cdc3b3"
    },
    "swatch/foreground/neutral/850/high": {
      "$type": "color",
      "$value": "#d3cdc380"
    },
    "swatch/foreground/neutral/850/strong": {
      "$type": "color",
      "$value": "#d3cdc34d"
    },
    "swatch/foreground/neutral/850/full": {
      "$type": "color",
      "$value": "#d3cdc300"
    },
    "swatch/foreground/neutral/900/solid": {
      "$type": "color",
      "$value": "#e3ddd3ff"
    },
    "swatch/foreground/neutral/900/low": {
      "$type": "color",
      "$value": "#e3ddd3e6"
    },
    "swatch/foreground/neutral/900/medium": {
      "$type": "color",
      "$value": "#e3ddd3b3"
    },
    "swatch/foreground/neutral/900/high": {
      "$type": "color",
      "$value": "#e3ddd380"
    },
    "swatch/foreground/neutral/900/strong": {
      "$type": "color",
      "$value": "#e3ddd34d"
    },
    "swatch/foreground/neutral/900/full": {
      "$type": "color",
      "$value": "#e3ddd300"
    },
    "swatch/foreground/neutral/950/solid": {
      "$type": "color",
      "$value": "#f3eee4ff"
    },
    "swatch/foreground/neutral/950/low": {
      "$type": "color",
      "$value": "#f3eee4e6"
    },
    "swatch/foreground/neutral/950/medium": {
      "$type": "color",
      "$value": "#f3eee4b3"
    },
    "swatch/foreground/neutral/950/high": {
      "$type": "color",
      "$value": "#f3eee480"
    },
    "swatch/foreground/neutral/950/strong": {
      "$type": "color",
      "$value": "#f3eee44d"
    },
    "swatch/foreground/neutral/950/full": {
      "$type": "color",
      "$value": "#f3eee400"
    },
    "swatch/foreground/neutral/1000/solid": {
      "$type": "color",
      "$value": "#ffffffff"
    },
    "swatch/foreground/neutral/1000/low": {
      "$type": "color",
      "$value": "#ffffffe6"
    },
    "swatch/foreground/neutral/1000/medium": {
      "$type": "color",
      "$value": "#ffffffb3"
    },
    "swatch/foreground/neutral/1000/high": {
      "$type": "color",
      "$value": "#ffffff80"
    },
    "swatch/foreground/neutral/1000/strong": {
      "$type": "color",
      "$value": "#ffffff4d"
    },
    "swatch/foreground/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

---

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 ->