Border Tokens

Border color tokens define the colors used for borders and dividers across our user interfaces.

Prerequisites

In this section assumes that you are already familiar with the concept of Intents, Attentions, and States explained in the Color Tokens section.

Also, make sure to review the Background Color Tokens and Foreground Color Tokens sections to understand how background and foreground colors are constructed, as border colors interact closely with background and foreground colors.

Naming Convention

border.<intent>.<attention>.<state> / blend.<blend>

To create border 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 borders, 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 Border 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: full

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

Intent: neutral, attention: strong

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

Intent: neutral, attention: high

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

Intent: neutral, attention: medium

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

Intent: neutral, attention: low

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

Intent: neutral, attention: base

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

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: */
  ----swatch--neutral-0: 0 0 0;
  ----swatch--neutral-25:   ;
  ----swatch--neutral-50:   ;
  ----swatch--neutral-75: 2 1 1;
  ----swatch--neutral-100: 4 3 2;
  ----swatch--neutral-125: 7 6 5;
  ----swatch--neutral-150: 13 11 8;
  ----swatch--neutral-175: 18 16 13;
  ----swatch--neutral-200: 24 22 18;
  ----swatch--neutral-225: 3 27 23;
  ----swatch--neutral-250: 36 33 28;
  ----swatch--neutral-275: 42 39 34;
  ----swatch--neutral-300: 49 45 39;
  ----swatch--neutral-325: 55 52 45;
  ----swatch--neutral-350: 62 58 51;
  ----swatch--neutral-375: 68 64 57;
  ----swatch--neutral-400: 75 71 64;
  ----swatch--neutral-425: 82 78 7;
  ----swatch--neutral-450: 89 85 77;
  ----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 134;
  ----swatch--neutral-675: 155 15 141;
  ----swatch--neutral-700: 163 158 149;
  ----swatch--neutral-725: 17 165 157;
  ----swatch--neutral-750: 178 173 165;
  ----swatch--neutral-775: 185 181 174;
  ----swatch--neutral-800: 193 189 182;
  ----swatch--neutral-825: 201 197 191;
  ----swatch--neutral-850: 208 205 199;
  ----swatch--neutral-875: 216 213 208;
  ----swatch--neutral-900: 224 222 217;
  ----swatch--neutral-925: 232 23 227;
  ----swatch--neutral-950: 239 238 236;
  ----swatch--neutral-975: 247 247 245;
  ----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 border tokens for neutral intent:
   */
  --border--neutral-base-default--light: var(----swatch--neutral-1000);
  --border--neutral-base-default--dark: var(----swatch--neutral-0);
  --border--neutral-base-hovered--light: var(----swatch--neutral-900);
  --border--neutral-base-hovered--dark: var(----swatch--neutral-400);
  --border--neutral-base-pressed--light: var(----swatch--neutral-800);
  --border--neutral-base-pressed--dark: var(----swatch--neutral-500);
  --border--neutral-base-selected--light: var(----swatch--neutral-850);
  --border--neutral-base-selected--dark: var(----swatch--neutral-350);
  --border--neutral-low-default--light: var(----swatch--neutral-850);
  --border--neutral-low-default--dark: var(----swatch--neutral-450);
  --border--neutral-low-hovered--light: var(----swatch--neutral-750);
  --border--neutral-low-hovered--dark: var(----swatch--neutral-600);
  --border--neutral-low-pressed--light: var(----swatch--neutral-650);
  --border--neutral-low-pressed--dark: var(----swatch--neutral-700);
  --border--neutral-low-selected--light: var(----swatch--neutral-700);
  --border--neutral-low-selected--dark: var(----swatch--neutral-650);
  --border--neutral-medium-default--light: var(----swatch--neutral-650);
  --border--neutral-medium-default--dark: var(----swatch--neutral-500);
  --border--neutral-medium-hovered--light: var(----swatch--neutral-550);
  --border--neutral-medium-hovered--dark: var(----swatch--neutral-600);
  --border--neutral-medium-pressed--light: var(----swatch--neutral-450);
  --border--neutral-medium-pressed--dark: var(----swatch--neutral-700);
  --border--neutral-medium-selected--light: var(----swatch--neutral-500);
  --border--neutral-medium-selected--dark: var(----swatch--neutral-650);
  --border--neutral-high-default--light: var(----swatch--neutral-500);
  --border--neutral-high-default--dark: var(----swatch--neutral-650);
  --border--neutral-high-hovered--light: var(----swatch--neutral-600);
  --border--neutral-high-hovered--dark: var(----swatch--neutral-550);
  --border--neutral-high-pressed--light: var(----swatch--neutral-700);
  --border--neutral-high-pressed--dark: var(----swatch--neutral-450);
  --border--neutral-high-selected--light: var(----swatch--neutral-650);
  --border--neutral-high-selected--dark: var(----swatch--neutral-500);
  --border--neutral-strong-default--light: var(----swatch--neutral-450);
  --border--neutral-strong-default--dark: var(----swatch--neutral-850);
  --border--neutral-strong-hovered--light: var(----swatch--neutral-600);
  --border--neutral-strong-hovered--dark: var(----swatch--neutral-750);
  --border--neutral-strong-pressed--light: var(----swatch--neutral-700);
  --border--neutral-strong-pressed--dark: var(----swatch--neutral-650);
  --border--neutral-strong-selected--light: var(----swatch--neutral-650);
  --border--neutral-strong-selected--dark: var(----swatch--neutral-700);
  --border--neutral-full-default--light: var(----swatch--neutral-0);
  --border--neutral-full-default--dark: var(----swatch--neutral-1000);
  --border--neutral-full-hovered--light: var(----swatch--neutral-400);
  --border--neutral-full-hovered--dark: var(----swatch--neutral-900);
  --border--neutral-full-pressed--light: var(----swatch--neutral-500);
  --border--neutral-full-pressed--dark: var(----swatch--neutral-800);
  --border--neutral-full-selected--light: var(----swatch--neutral-350);
  --border--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": "#000000"
          },
          "75": {
            "$type": "color",
            "$value": "#020101"
          },
          "100": {
            "$type": "color",
            "$value": "#040302"
          },
          "125": {
            "$type": "color",
            "$value": "#070605"
          },
          "150": {
            "$type": "color",
            "$value": "#0d0b08"
          },
          "175": {
            "$type": "color",
            "$value": "#12100d"
          },
          "200": {
            "$type": "color",
            "$value": "#181612"
          },
          "225": {
            "$type": "color",
            "$value": "#1e1b17"
          },
          "250": {
            "$type": "color",
            "$value": "#24211c"
          },
          "275": {
            "$type": "color",
            "$value": "#2a2722"
          },
          "300": {
            "$type": "color",
            "$value": "#312d27"
          },
          "325": {
            "$type": "color",
            "$value": "#37342d"
          },
          "350": {
            "$type": "color",
            "$value": "#3e3a33"
          },
          "375": {
            "$type": "color",
            "$value": "#444039"
          },
          "400": {
            "$type": "color",
            "$value": "#4b4740"
          },
          "425": {
            "$type": "color",
            "$value": "#524e46"
          },
          "450": {
            "$type": "color",
            "$value": "#59554d"
          },
          "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": "#948e86"
          },
          "675": {
            "$type": "color",
            "$value": "#9b968d"
          },
          "700": {
            "$type": "color",
            "$value": "#a39e95"
          },
          "725": {
            "$type": "color",
            "$value": "#aaa59d"
          },
          "750": {
            "$type": "color",
            "$value": "#b2ada5"
          },
          "775": {
            "$type": "color",
            "$value": "#b9b5ae"
          },
          "800": {
            "$type": "color",
            "$value": "#c1bdb6"
          },
          "825": {
            "$type": "color",
            "$value": "#c9c5bf"
          },
          "850": {
            "$type": "color",
            "$value": "#d0cdc7"
          },
          "875": {
            "$type": "color",
            "$value": "#d8d5d0"
          },
          "900": {
            "$type": "color",
            "$value": "#e0ded9"
          },
          "925": {
            "$type": "color",
            "$value": "#e8e6e3"
          },
          "950": {
            "$type": "color",
            "$value": "#efeeec"
          },
          "975": {
            "$type": "color",
            "$value": "#f7f7f5"
          },
          "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": {
    "border": {
      "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/450}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/750}",
              "dark": "{__scales/swatch/neutral/600}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/700}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          }
        },
        "medium": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/500}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/550}",
              "dark": "{__scales/swatch/neutral/600}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/450}",
              "dark": "{__scales/swatch/neutral/700}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/500}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          }
        },
        "high": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/500}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/600}",
              "dark": "{__scales/swatch/neutral/550}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/450}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/500}"
            }
          }
        },
        "strong": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/450}",
              "dark": "{__scales/swatch/neutral/850}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/600}",
              "dark": "{__scales/swatch/neutral/750}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/700}",
              "dark": "{__scales/swatch/neutral/650}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/neutral/650}",
              "dark": "{__scales/swatch/neutral/700}"
            }
          }
        },
        "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": "  ",
      "75": "2 1 1",
      "100": "4 3 2",
      "125": "7 6 5",
      "150": "13 11 8",
      "175": "18 16 13",
      "200": "24 22 18",
      "225": "3 27 23",
      "250": "36 33 28",
      "275": "42 39 34",
      "300": "49 45 39",
      "325": "55 52 45",
      "350": "62 58 51",
      "375": "68 64 57",
      "400": "75 71 64",
      "425": "82 78 7",
      "450": "89 85 77",
      "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 134",
      "675": "155 15 141",
      "700": "163 158 149",
      "725": "17 165 157",
      "750": "178 173 165",
      "775": "185 181 174",
      "800": "193 189 182",
      "825": "201 197 191",
      "850": "208 205 199",
      "875": "216 213 208",
      "900": "224 222 217",
      "925": "232 23 227",
      "950": "239 238 236",
      "975": "247 247 245",
      "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": {
      "border": {
        "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[650],
            "hovered": scales.swatch.neutral[550],
            "pressed": scales.swatch.neutral[450],
            "selected": scales.swatch.neutral[500]
          },
          "high": {
            "default": scales.swatch.neutral[500],
            "hovered": scales.swatch.neutral[600],
            "pressed": scales.swatch.neutral[700],
            "selected": scales.swatch.neutral[650]
          },
          "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": {
      "border": {
        "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[450],
            "hovered": scales.swatch.neutral[600],
            "pressed": scales.swatch.neutral[700],
            "selected": scales.swatch.neutral[650]
          },
          "medium": {
            "default": scales.swatch.neutral[500],
            "hovered": scales.swatch.neutral[600],
            "pressed": scales.swatch.neutral[700],
            "selected": scales.swatch.neutral[650]
          },
          "high": {
            "default": scales.swatch.neutral[650],
            "hovered": scales.swatch.neutral[550],
            "pressed": scales.swatch.neutral[450],
            "selected": scales.swatch.neutral[500]
          },
          "strong": {
            "default": scales.swatch.neutral[850],
            "hovered": scales.swatch.neutral[750],
            "pressed": scales.swatch.neutral[650],
            "selected": scales.swatch.neutral[700]
          },
          "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

---

Defining Intents

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

Defining Intents ->