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> / blend.<blend>

To create background color tokens we combine three aspects: intent, attention, and state. Each intent creates a combination with all attention and state levels. To create semi-transparent backgrounds, compose with a separate blend.<blend> token.

Not every application will need all combinations, so choose the ones that best fit your use cases.

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

Pick Intent Token:

neutralcontrolsinformativepositivewarningcritical

Preview

Intent: neutral, attention: base

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

Intent: neutral, attention: low

Token name	light	dark
background.neutral.low.default / blend.solid	#d3cdc3	#322d26
background.neutral.low.default / blend.low	#d3cdc3e6	#322d26e6
background.neutral.low.default / blend.medium	#d3cdc3b3	#322d26b3
background.neutral.low.default / blend.high	#d3cdc380	#322d2680
background.neutral.low.default / blend.strong	#d3cdc34d	#322d264d
background.neutral.low.default / blend.full	#d3cdc300	#322d2600
background.neutral.low.hovered / blend.solid	#b3ada4	#59554c
background.neutral.low.hovered / blend.low	#b3ada4e6	#59554ce6
background.neutral.low.hovered / blend.medium	#b3ada4b3	#59554cb3
background.neutral.low.hovered / blend.high	#b3ada480	#59554c80
background.neutral.low.hovered / blend.strong	#b3ada44d	#59554c4d
background.neutral.low.hovered / blend.full	#b3ada400	#59554c00
background.neutral.low.pressed / blend.solid	#948e85	#767168
background.neutral.low.pressed / blend.low	#948e85e6	#767168e6
background.neutral.low.pressed / blend.medium	#948e85b3	#767168b3
background.neutral.low.pressed / blend.high	#948e8580	#76716880
background.neutral.low.pressed / blend.strong	#948e854d	#7671684d
background.neutral.low.pressed / blend.full	#948e8500	#76716800
background.neutral.low.selected / blend.solid	#a39e94	#67635a
background.neutral.low.selected / blend.low	#a39e94e6	#67635ae6
background.neutral.low.selected / blend.medium	#a39e94b3	#67635ab3
background.neutral.low.selected / blend.high	#a39e9480	#67635a80
background.neutral.low.selected / blend.strong	#a39e944d	#67635a4d
background.neutral.low.selected / blend.full	#a39e9400	#67635a00

Intent: neutral, attention: medium

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

Intent: neutral, attention: high

Token name	light	dark
background.neutral.high.default / blend.solid	#767168	#767168
background.neutral.high.default / blend.low	#767168e6	#767168e6
background.neutral.high.default / blend.medium	#767168b3	#767168b3
background.neutral.high.default / blend.high	#76716880	#76716880
background.neutral.high.default / blend.strong	#7671684d	#7671684d
background.neutral.high.default / blend.full	#76716800	#76716800
background.neutral.high.hovered / blend.solid	#948e85	#59554c
background.neutral.high.hovered / blend.low	#948e85e6	#59554ce6
background.neutral.high.hovered / blend.medium	#948e85b3	#59554cb3
background.neutral.high.hovered / blend.high	#948e8580	#59554c80
background.neutral.high.hovered / blend.strong	#948e854d	#59554c4d
background.neutral.high.hovered / blend.full	#948e8500	#59554c00
background.neutral.high.pressed / blend.solid	#b3ada4	#3e3a32
background.neutral.high.pressed / blend.low	#b3ada4e6	#3e3a32e6
background.neutral.high.pressed / blend.medium	#b3ada4b3	#3e3a32b3
background.neutral.high.pressed / blend.high	#b3ada480	#3e3a3280
background.neutral.high.pressed / blend.strong	#b3ada44d	#3e3a324d
background.neutral.high.pressed / blend.full	#b3ada400	#3e3a3200
background.neutral.high.selected / blend.solid	#a39e94	#4c473f
background.neutral.high.selected / blend.low	#a39e94e6	#4c473fe6
background.neutral.high.selected / blend.medium	#a39e94b3	#4c473fb3
background.neutral.high.selected / blend.high	#a39e9480	#4c473f80
background.neutral.high.selected / blend.strong	#a39e944d	#4c473f4d
background.neutral.high.selected / blend.full	#a39e9400	#4c473f00

Intent: neutral, attention: strong

Token name	light	dark
background.neutral.strong.default / blend.solid	#59554c	#b3ada4
background.neutral.strong.default / blend.low	#59554ce6	#b3ada4e6
background.neutral.strong.default / blend.medium	#59554cb3	#b3ada4b3
background.neutral.strong.default / blend.high	#59554c80	#b3ada480
background.neutral.strong.default / blend.strong	#59554c4d	#b3ada44d
background.neutral.strong.default / blend.full	#59554c00	#b3ada400
background.neutral.strong.hovered / blend.solid	#858076	#948e85
background.neutral.strong.hovered / blend.low	#858076e6	#948e85e6
background.neutral.strong.hovered / blend.medium	#858076b3	#948e85b3
background.neutral.strong.hovered / blend.high	#85807680	#948e8580
background.neutral.strong.hovered / blend.strong	#8580764d	#948e854d
background.neutral.strong.hovered / blend.full	#85807600	#948e8500
background.neutral.strong.pressed / blend.solid	#a39e94	#767168
background.neutral.strong.pressed / blend.low	#a39e94e6	#767168e6
background.neutral.strong.pressed / blend.medium	#a39e94b3	#767168b3
background.neutral.strong.pressed / blend.high	#a39e9480	#76716880
background.neutral.strong.pressed / blend.strong	#a39e944d	#7671684d
background.neutral.strong.pressed / blend.full	#a39e9400	#76716800
background.neutral.strong.selected / blend.solid	#948e85	#858076
background.neutral.strong.selected / blend.low	#948e85e6	#858076e6
background.neutral.strong.selected / blend.medium	#948e85b3	#858076b3
background.neutral.strong.selected / blend.high	#948e8580	#85807680
background.neutral.strong.selected / blend.strong	#948e854d	#8580764d
background.neutral.strong.selected / blend.full	#948e8500	#85807600

Intent: neutral, attention: full

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

CSS Custom Properties

Intent: neutral

Color Format

rgbhexoklch

/**
 * [IMPORTANT]: Private properties marked ---- are not intended for direct usage
 */

:root,
:host {
  /**
   * Blend scale
   */
  ----blend--0: 0;
  ----blend--10: 0.1;
  ----blend--20: 0.2;
  ----blend--30: 0.3;
  ----blend--40: 0.4;
  ----blend--50: 0.5;
  ----blend--60: 0.6;
  ----blend--70: 0.7;
  ----blend--80: 0.8;
  ----blend--90: 0.9;
  ----blend--100: 1;
  
  /**
   * Color scales
   */
  
  /* Swatch scale for neutral: */
  ----intent--neutral: 0.0148 82;
  ----swatch--neutral-0: 0 0 0;
  ----swatch--neutral-25:   ;
  ----swatch--neutral-50: 1  ;
  ----swatch--neutral-75: 2 1 ;
  ----swatch--neutral-100: 5 3 1;
  ----swatch--neutral-125: 9 6 2;
  ----swatch--neutral-150: 14 11 5;
  ----swatch--neutral-175: 2 16 9;
  ----swatch--neutral-200: 25 21 14;
  ----swatch--neutral-225: 31 27 2;
  ----swatch--neutral-250: 37 33 26;
  ----swatch--neutral-275: 43 39 32;
  ----swatch--neutral-300: 5 45 38;
  ----swatch--neutral-325: 56 51 44;
  ----swatch--neutral-350: 62 58 5;
  ----swatch--neutral-375: 69 64 56;
  ----swatch--neutral-400: 76 71 63;
  ----swatch--neutral-425: 82 78 69;
  ----swatch--neutral-450: 89 85 76;
  ----swatch--neutral-475: 96 92 83;
  ----swatch--neutral-500: 103 99 9;
  ----swatch--neutral-525: 111 106 97;
  ----swatch--neutral-550: 118 113 104;
  ----swatch--neutral-575: 125 12 111;
  ----swatch--neutral-600: 133 128 118;
  ----swatch--neutral-625: 14 135 126;
  ----swatch--neutral-650: 148 142 133;
  ----swatch--neutral-675: 155 15 141;
  ----swatch--neutral-700: 163 158 148;
  ----swatch--neutral-725: 171 165 156;
  ----swatch--neutral-750: 179 173 164;
  ----swatch--neutral-775: 186 181 171;
  ----swatch--neutral-800: 194 189 179;
  ----swatch--neutral-825: 202 197 187;
  ----swatch--neutral-850: 211 205 195;
  ----swatch--neutral-875: 219 213 203;
  ----swatch--neutral-900: 227 221 211;
  ----swatch--neutral-925: 235 229 219;
  ----swatch--neutral-950: 243 238 228;
  ----swatch--neutral-975: 252 246 236;
  ----swatch--neutral-1000: 255 255 255;
  
  /**
   * Blend tokens
   */
  --blend--solid: var(----blend--100);
  --blend--low: var(----blend--90);
  --blend--medium: var(----blend--70);
  --blend--high: var(----blend--50);
  --blend--strong: var(----blend--30);
  --blend--full: var(----blend--0);
  
  /**
   * Color tokens
   * 
   * Provided tokens are not fully functional on their own.
   * They must be used with rgb() CSS function to create CSS color, e.g.:
   * 
   * color: rgb(var(--background--critical-medium-hovered--dark));
   * 
   * These tokens can be combined with blend tokens to create semi-transparent colors, e.g.:
   *
   * color: rgb(var(--foreground--critical-high-default--light) / var(--blend--medium));
   * background-color: rgb(var(--background--critical-medium-default--light) / var(--blend--medium));
   * border-color: rgb(var(--border--critical-medium-default--light) / var(--blend--medium));
   */
  
  /**
   * Abstract background tokens for neutral intent:
   */
  --background--neutral-base-default--light: var(----swatch--neutral-1000);
  --background--neutral-base-default--dark: var(----swatch--neutral-0);
  --background--neutral-base-hovered--light: var(----swatch--neutral-900);
  --background--neutral-base-hovered--dark: var(----swatch--neutral-400);
  --background--neutral-base-pressed--light: var(----swatch--neutral-800);
  --background--neutral-base-pressed--dark: var(----swatch--neutral-500);
  --background--neutral-base-selected--light: var(----swatch--neutral-850);
  --background--neutral-base-selected--dark: var(----swatch--neutral-350);
  --background--neutral-low-default--light: var(----swatch--neutral-850);
  --background--neutral-low-default--dark: var(----swatch--neutral-300);
  --background--neutral-low-hovered--light: var(----swatch--neutral-750);
  --background--neutral-low-hovered--dark: var(----swatch--neutral-450);
  --background--neutral-low-pressed--light: var(----swatch--neutral-650);
  --background--neutral-low-pressed--dark: var(----swatch--neutral-550);
  --background--neutral-low-selected--light: var(----swatch--neutral-700);
  --background--neutral-low-selected--dark: var(----swatch--neutral-500);
  --background--neutral-medium-default--light: var(----swatch--neutral-700);
  --background--neutral-medium-default--dark: var(----swatch--neutral-450);
  --background--neutral-medium-hovered--light: var(----swatch--neutral-600);
  --background--neutral-medium-hovered--dark: var(----swatch--neutral-550);
  --background--neutral-medium-pressed--light: var(----swatch--neutral-500);
  --background--neutral-medium-pressed--dark: var(----swatch--neutral-650);
  --background--neutral-medium-selected--light: var(----swatch--neutral-550);
  --background--neutral-medium-selected--dark: var(----swatch--neutral-600);
  --background--neutral-high-default--light: var(----swatch--neutral-550);
  --background--neutral-high-default--dark: var(----swatch--neutral-550);
  --background--neutral-high-hovered--light: var(----swatch--neutral-650);
  --background--neutral-high-hovered--dark: var(----swatch--neutral-450);
  --background--neutral-high-pressed--light: var(----swatch--neutral-750);
  --background--neutral-high-pressed--dark: var(----swatch--neutral-350);
  --background--neutral-high-selected--light: var(----swatch--neutral-700);
  --background--neutral-high-selected--dark: var(----swatch--neutral-400);
  --background--neutral-strong-default--light: var(----swatch--neutral-450);
  --background--neutral-strong-default--dark: var(----swatch--neutral-750);
  --background--neutral-strong-hovered--light: var(----swatch--neutral-600);
  --background--neutral-strong-hovered--dark: var(----swatch--neutral-650);
  --background--neutral-strong-pressed--light: var(----swatch--neutral-700);
  --background--neutral-strong-pressed--dark: var(----swatch--neutral-550);
  --background--neutral-strong-selected--light: var(----swatch--neutral-650);
  --background--neutral-strong-selected--dark: var(----swatch--neutral-600);
  --background--neutral-full-default--light: var(----swatch--neutral-0);
  --background--neutral-full-default--dark: var(----swatch--neutral-1000);
  --background--neutral-full-hovered--light: var(----swatch--neutral-400);
  --background--neutral-full-hovered--dark: var(----swatch--neutral-900);
  --background--neutral-full-pressed--light: var(----swatch--neutral-500);
  --background--neutral-full-pressed--dark: var(----swatch--neutral-800);
  --background--neutral-full-selected--light: var(----swatch--neutral-350);
  --background--neutral-full-selected--dark: var(----swatch--neutral-850);
}

Figma JSON

Intent: neutral

{
  "Scales": {
    "__scales": {
      "swatch": {
        "neutral": {
          "0": {
            "$type": "color",
            "$value": "#000000"
          },
          "25": {
            "$type": "color",
            "$value": "#000000"
          },
          "50": {
            "$type": "color",
            "$value": "#010000"
          },
          "75": {
            "$type": "color",
            "$value": "#020100"
          },
          "100": {
            "$type": "color",
            "$value": "#050301"
          },
          "125": {
            "$type": "color",
            "$value": "#090602"
          },
          "150": {
            "$type": "color",
            "$value": "#0e0b05"
          },
          "175": {
            "$type": "color",
            "$value": "#141009"
          },
          "200": {
            "$type": "color",
            "$value": "#19150e"
          },
          "225": {
            "$type": "color",
            "$value": "#1f1b14"
          },
          "250": {
            "$type": "color",
            "$value": "#25211a"
          },
          "275": {
            "$type": "color",
            "$value": "#2b2720"
          },
          "300": {
            "$type": "color",
            "$value": "#322d26"
          },
          "325": {
            "$type": "color",
            "$value": "#38332c"
          },
          "350": {
            "$type": "color",
            "$value": "#3e3a32"
          },
          "375": {
            "$type": "color",
            "$value": "#454038"
          },
          "400": {
            "$type": "color",
            "$value": "#4c473f"
          },
          "425": {
            "$type": "color",
            "$value": "#524e45"
          },
          "450": {
            "$type": "color",
            "$value": "#59554c"
          },
          "475": {
            "$type": "color",
            "$value": "#605c53"
          },
          "500": {
            "$type": "color",
            "$value": "#67635a"
          },
          "525": {
            "$type": "color",
            "$value": "#6f6a61"
          },
          "550": {
            "$type": "color",
            "$value": "#767168"
          },
          "575": {
            "$type": "color",
            "$value": "#7d786f"
          },
          "600": {
            "$type": "color",
            "$value": "#858076"
          },
          "625": {
            "$type": "color",
            "$value": "#8c877e"
          },
          "650": {
            "$type": "color",
            "$value": "#948e85"
          },
          "675": {
            "$type": "color",
            "$value": "#9b968d"
          },
          "700": {
            "$type": "color",
            "$value": "#a39e94"
          },
          "725": {
            "$type": "color",
            "$value": "#aba59c"
          },
          "750": {
            "$type": "color",
            "$value": "#b3ada4"
          },
          "775": {
            "$type": "color",
            "$value": "#bab5ab"
          },
          "800": {
            "$type": "color",
            "$value": "#c2bdb3"
          },
          "825": {
            "$type": "color",
            "$value": "#cac5bb"
          },
          "850": {
            "$type": "color",
            "$value": "#d3cdc3"
          },
          "875": {
            "$type": "color",
            "$value": "#dbd5cb"
          },
          "900": {
            "$type": "color",
            "$value": "#e3ddd3"
          },
          "925": {
            "$type": "color",
            "$value": "#ebe5db"
          },
          "950": {
            "$type": "color",
            "$value": "#f3eee4"
          },
          "975": {
            "$type": "color",
            "$value": "#fcf6ec"
          },
          "1000": {
            "$type": "color",
            "$value": "#ffffff"
          }
        }
      },
      "blend": {
        "0": {
          "$type": "number",
          "$value": 0
        },
        "10": {
          "$type": "number",
          "$value": 10
        },
        "20": {
          "$type": "number",
          "$value": 20
        },
        "30": {
          "$type": "number",
          "$value": 30
        },
        "40": {
          "$type": "number",
          "$value": 40
        },
        "50": {
          "$type": "number",
          "$value": 50
        },
        "60": {
          "$type": "number",
          "$value": 60
        },
        "70": {
          "$type": "number",
          "$value": 70
        },
        "80": {
          "$type": "number",
          "$value": 80
        },
        "90": {
          "$type": "number",
          "$value": 90
        },
        "100": {
          "$type": "number",
          "$value": 100
        }
      }
    }
  },
  "Blends": {
    "solid": {
      "$type": "number",
      "$value": "{__scales/blend/100}"
    },
    "low": {
      "$type": "number",
      "$value": "{__scales/blend/90}"
    },
    "medium": {
      "$type": "number",
      "$value": "{__scales/blend/70}"
    },
    "high": {
      "$type": "number",
      "$value": "{__scales/blend/50}"
    },
    "strong": {
      "$type": "number",
      "$value": "{__scales/blend/30}"
    },
    "full": {
      "$type": "number",
      "$value": "{__scales/blend/0}"
    }
  },
  "Colors": {
    "background": {
      "neutral": {
        "base": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/1000}",
              "dark": "{__scales/swatch/neutral/0}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/900}",
              "dark": "{__scales/swatch/neutral/400}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/800}",
              "dark": "{__scales/swatch/neutral/500}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/850}",
              "dark": "{__scales/swatch/neutral/350}"
            }
          }
        },
        "low": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/850}",
              "dark": "{__scales/swatch/neutral/300}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/750}",
              "dark": "{__scales/swatch/neutral/450}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/550}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/500}"
            }
          }
        },
        "medium": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/450}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/600}",
              "dark": "{__scales/swatch/neutral/550}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/500}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/550}",
              "dark": "{__scales/swatch/neutral/600}"
            }
          }
        },
        "high": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/550}",
              "dark": "{__scales/swatch/neutral/550}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/450}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/750}",
              "dark": "{__scales/swatch/neutral/350}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/400}"
            }
          }
        },
        "strong": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/450}",
              "dark": "{__scales/swatch/neutral/750}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/600}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/550}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/600}"
            }
          }
        },
        "full": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/0}",
              "dark": "{__scales/swatch/neutral/1000}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/400}",
              "dark": "{__scales/swatch/neutral/900}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/500}",
              "dark": "{__scales/swatch/neutral/800}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/350}",
              "dark": "{__scales/swatch/neutral/850}"
            }
          }
        }
      }
    }
  }
}

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

TypeScript

Color Format

rgbhexoklch

const scales = {
  "blend": {
    "0": 0,
    "10": 0.1,
    "20": 0.2,
    "30": 0.3,
    "40": 0.4,
    "50": 0.5,
    "60": 0.6,
    "70": 0.7,
    "80": 0.8,
    "90": 0.9,
    "100": 1
  },
  "intent": {
    "neutral": "0.581 0.015 82"
  },
  "swatch": {
    "neutral": {
      "0": "0 0 0",
      "25": "  ",
      "50": "1  ",
      "75": "2 1 ",
      "100": "5 3 1",
      "125": "9 6 2",
      "150": "14 11 5",
      "175": "2 16 9",
      "200": "25 21 14",
      "225": "31 27 2",
      "250": "37 33 26",
      "275": "43 39 32",
      "300": "5 45 38",
      "325": "56 51 44",
      "350": "62 58 5",
      "375": "69 64 56",
      "400": "76 71 63",
      "425": "82 78 69",
      "450": "89 85 76",
      "475": "96 92 83",
      "500": "103 99 9",
      "525": "111 106 97",
      "550": "118 113 104",
      "575": "125 12 111",
      "600": "133 128 118",
      "625": "14 135 126",
      "650": "148 142 133",
      "675": "155 15 141",
      "700": "163 158 148",
      "725": "171 165 156",
      "750": "179 173 164",
      "775": "186 181 171",
      "800": "194 189 179",
      "825": "202 197 187",
      "850": "211 205 195",
      "875": "219 213 203",
      "900": "227 221 211",
      "925": "235 229 219",
      "950": "243 238 228",
      "975": "252 246 236",
      "1000": "255 255 255"
    }
  }
} as const;

export const tokens = {
  "light": {
    "blend": {
      "solid": 100,
      "low": 90,
      "medium": 70,
      "high": 50,
      "strong": 30,
      "full": scales.blend[0]
    },
    "color": {
      "background": {
        "neutral": {
          "base": {
            "default": scales.swatch.neutral[1000],
            "hovered": scales.swatch.neutral[900],
            "pressed": scales.swatch.neutral[800],
            "selected": scales.swatch.neutral[850]
          },
          "low": {
            "default": scales.swatch.neutral[850],
            "hovered": scales.swatch.neutral[750],
            "pressed": scales.swatch.neutral[650],
            "selected": scales.swatch.neutral[700]
          },
          "medium": {
            "default": scales.swatch.neutral[700],
            "hovered": scales.swatch.neutral[600],
            "pressed": scales.swatch.neutral[500],
            "selected": scales.swatch.neutral[550]
          },
          "high": {
            "default": scales.swatch.neutral[550],
            "hovered": scales.swatch.neutral[650],
            "pressed": scales.swatch.neutral[750],
            "selected": scales.swatch.neutral[700]
          },
          "strong": {
            "default": scales.swatch.neutral[450],
            "hovered": scales.swatch.neutral[600],
            "pressed": scales.swatch.neutral[700],
            "selected": scales.swatch.neutral[650]
          },
          "full": {
            "default": scales.swatch.neutral[0],
            "hovered": scales.swatch.neutral[400],
            "pressed": scales.swatch.neutral[500],
            "selected": scales.swatch.neutral[350]
          }
        }
      }
    }
  },
  "dark": {
    "blend": {
      "solid": 100,
      "low": 90,
      "medium": 70,
      "high": 50,
      "strong": 30,
      "full": scales.blend[0]
    },
    "color": {
      "background": {
        "neutral": {
          "base": {
            "default": scales.swatch.neutral[0],
            "hovered": scales.swatch.neutral[400],
            "pressed": scales.swatch.neutral[500],
            "selected": scales.swatch.neutral[350]
          },
          "low": {
            "default": scales.swatch.neutral[300],
            "hovered": scales.swatch.neutral[450],
            "pressed": scales.swatch.neutral[550],
            "selected": scales.swatch.neutral[500]
          },
          "medium": {
            "default": scales.swatch.neutral[450],
            "hovered": scales.swatch.neutral[550],
            "pressed": scales.swatch.neutral[650],
            "selected": scales.swatch.neutral[600]
          },
          "high": {
            "default": scales.swatch.neutral[550],
            "hovered": scales.swatch.neutral[450],
            "pressed": scales.swatch.neutral[350],
            "selected": scales.swatch.neutral[400]
          },
          "strong": {
            "default": scales.swatch.neutral[750],
            "hovered": scales.swatch.neutral[650],
            "pressed": scales.swatch.neutral[550],
            "selected": scales.swatch.neutral[600]
          },
          "full": {
            "default": scales.swatch.neutral[1000],
            "hovered": scales.swatch.neutral[900],
            "pressed": scales.swatch.neutral[800],
            "selected": scales.swatch.neutral[850]
          }
        }
      }
    }
  }
} as const;

Up Next

---

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