Defining Intents

In this documentation we present you with a starting set of predefined intents that cover the most use cases for our design system. We deliberately chose to use same colors for both background and foreground color as the starting point as in most cases we want to keep same color features across both background and foreground elements.

More about Intents ->

When to define new intents

You might find that the predefined intents do not fully cover your specific use cases. Creating custom intents can help tailor the design tokens to better fit your product's unique requirements. Such scenarios may include:

• setting up a new design system;
• improving accessibility;
• enhancing visual hierarchy;
• addressing specific brand needs;
• researching new products or patterns.

Generator

step: 525
oklch: 0.525 0.214 260
rgb:  95 226
hex: #005fe2
difference: 0.82%vs #0761E6

Preview Steps

25010050251051

Intent Type

BackgroundForegroundBorder

Intent Name

Intent Color

OKLCH

lightness

0.533

chroma

0.215

hue

260

Tokens

Step

533

Type

background

Intent

brand

RGB

red

0

green

0

blue

0

---

Documentation Intents

Admin Web Intents

Admin Native Intents

---

Preview

Intent: brand, attention: full

Token name	light	dark
background.brand.full.default / blend.solid	#000000	#ffffff
background.brand.full.default / blend.low	#000000e6	#ffffffe6
background.brand.full.default / blend.medium	#000000b3	#ffffffb3
background.brand.full.default / blend.high	#00000080	#ffffff80
background.brand.full.default / blend.strong	#0000004d	#ffffff4d
background.brand.full.default / blend.full	#00000000	#ffffff00
background.brand.full.hovered / blend.solid	#003f9d	#ccdfff
background.brand.full.hovered / blend.low	#003f9de6	#ccdfffe6
background.brand.full.hovered / blend.medium	#003f9db3	#ccdfffb3
background.brand.full.hovered / blend.high	#003f9d80	#ccdfff80
background.brand.full.hovered / blend.strong	#003f9d4d	#ccdfff4d
background.brand.full.hovered / blend.full	#003f9d00	#ccdfff00
background.brand.full.pressed / blend.solid	#0058d4	#98bfff
background.brand.full.pressed / blend.low	#0058d4e6	#98bfffe6
background.brand.full.pressed / blend.medium	#0058d4b3	#98bfffb3
background.brand.full.pressed / blend.high	#0058d480	#98bfff80
background.brand.full.pressed / blend.strong	#0058d44d	#98bfff4d
background.brand.full.pressed / blend.full	#0058d400	#98bfff00
background.brand.full.selected / blend.solid	#003483	#b2cfff
background.brand.full.selected / blend.low	#003483e6	#b2cfffe6
background.brand.full.selected / blend.medium	#003483b3	#b2cfffb3
background.brand.full.selected / blend.high	#00348380	#b2cfff80
background.brand.full.selected / blend.strong	#0034834d	#b2cfff4d
background.brand.full.selected / blend.full	#00348300	#b2cfff00

Intent: brand, attention: strong

Token name	light	dark
background.brand.strong.default / blend.solid	#004cb8	#7daeff
background.brand.strong.default / blend.low	#004cb8e6	#7daeffe6
background.brand.strong.default / blend.medium	#004cb8b3	#7daeffb3
background.brand.strong.default / blend.high	#004cb880	#7daeff80
background.brand.strong.default / blend.strong	#004cb84d	#7daeff4d
background.brand.strong.default / blend.full	#004cb800	#7daeff00
background.brand.strong.hovered / blend.solid	#2377fd	#448bff
background.brand.strong.hovered / blend.low	#2377fde6	#448bffe6
background.brand.strong.hovered / blend.medium	#2377fdb3	#448bffb3
background.brand.strong.hovered / blend.high	#2377fd80	#448bff80
background.brand.strong.hovered / blend.strong	#2377fd4d	#448bff4d
background.brand.strong.hovered / blend.full	#2377fd00	#448bff00
background.brand.strong.pressed / blend.solid	#629dff	#0d67ec
background.brand.strong.pressed / blend.low	#629dffe6	#0d67ece6
background.brand.strong.pressed / blend.medium	#629dffb3	#0d67ecb3
background.brand.strong.pressed / blend.high	#629dff80	#0d67ec80
background.brand.strong.pressed / blend.strong	#629dff4d	#0d67ec4d
background.brand.strong.pressed / blend.full	#629dff00	#0d67ec00
background.brand.strong.selected / blend.solid	#448bff	#2377fd
background.brand.strong.selected / blend.low	#448bffe6	#2377fde6
background.brand.strong.selected / blend.medium	#448bffb3	#2377fdb3
background.brand.strong.selected / blend.high	#448bff80	#2377fd80
background.brand.strong.selected / blend.strong	#448bff4d	#2377fd4d
background.brand.strong.selected / blend.full	#448bff00	#2377fd00

Intent: brand, attention: high

Token name	light	dark
background.brand.high.default / blend.solid	#0d67ec	#0d67ec
background.brand.high.default / blend.low	#0d67ece6	#0d67ece6
background.brand.high.default / blend.medium	#0d67ecb3	#0d67ecb3
background.brand.high.default / blend.high	#0d67ec80	#0d67ec80
background.brand.high.default / blend.strong	#0d67ec4d	#0d67ec4d
background.brand.high.default / blend.full	#0d67ec00	#0d67ec00
background.brand.high.hovered / blend.solid	#448bff	#004cb8
background.brand.high.hovered / blend.low	#448bffe6	#004cb8e6
background.brand.high.hovered / blend.medium	#448bffb3	#004cb8b3
background.brand.high.hovered / blend.high	#448bff80	#004cb880
background.brand.high.hovered / blend.strong	#448bff4d	#004cb84d
background.brand.high.hovered / blend.full	#448bff00	#004cb800
background.brand.high.pressed / blend.solid	#7daeff	#003483
background.brand.high.pressed / blend.low	#7daeffe6	#003483e6
background.brand.high.pressed / blend.medium	#7daeffb3	#003483b3
background.brand.high.pressed / blend.high	#7daeff80	#00348380
background.brand.high.pressed / blend.strong	#7daeff4d	#0034834d
background.brand.high.pressed / blend.full	#7daeff00	#00348300
background.brand.high.selected / blend.solid	#629dff	#003f9d
background.brand.high.selected / blend.low	#629dffe6	#003f9de6
background.brand.high.selected / blend.medium	#629dffb3	#003f9db3
background.brand.high.selected / blend.high	#629dff80	#003f9d80
background.brand.high.selected / blend.strong	#629dff4d	#003f9d4d
background.brand.high.selected / blend.full	#629dff00	#003f9d00

Intent: brand, attention: medium

Token name	light	dark
background.brand.medium.default / blend.solid	#629dff	#004cb8
background.brand.medium.default / blend.low	#629dffe6	#004cb8e6
background.brand.medium.default / blend.medium	#629dffb3	#004cb8b3
background.brand.medium.default / blend.high	#629dff80	#004cb880
background.brand.medium.default / blend.strong	#629dff4d	#004cb84d
background.brand.medium.default / blend.full	#629dff00	#004cb800
background.brand.medium.hovered / blend.solid	#2377fd	#0d67ec
background.brand.medium.hovered / blend.low	#2377fde6	#0d67ece6
background.brand.medium.hovered / blend.medium	#2377fdb3	#0d67ecb3
background.brand.medium.hovered / blend.high	#2377fd80	#0d67ec80
background.brand.medium.hovered / blend.strong	#2377fd4d	#0d67ec4d
background.brand.medium.hovered / blend.full	#2377fd00	#0d67ec00
background.brand.medium.pressed / blend.solid	#0058d4	#448bff
background.brand.medium.pressed / blend.low	#0058d4e6	#448bffe6
background.brand.medium.pressed / blend.medium	#0058d4b3	#448bffb3
background.brand.medium.pressed / blend.high	#0058d480	#448bff80
background.brand.medium.pressed / blend.strong	#0058d44d	#448bff4d
background.brand.medium.pressed / blend.full	#0058d400	#448bff00
background.brand.medium.selected / blend.solid	#0d67ec	#2377fd
background.brand.medium.selected / blend.low	#0d67ece6	#2377fde6
background.brand.medium.selected / blend.medium	#0d67ecb3	#2377fdb3
background.brand.medium.selected / blend.high	#0d67ec80	#2377fd80
background.brand.medium.selected / blend.strong	#0d67ec4d	#2377fd4d
background.brand.medium.selected / blend.full	#0d67ec00	#2377fd00

Intent: brand, attention: low

Token name	light	dark
background.brand.low.default / blend.solid	#b2cfff	#002869
background.brand.low.default / blend.low	#b2cfffe6	#002869e6
background.brand.low.default / blend.medium	#b2cfffb3	#002869b3
background.brand.low.default / blend.high	#b2cfff80	#00286980
background.brand.low.default / blend.strong	#b2cfff4d	#0028694d
background.brand.low.default / blend.full	#b2cfff00	#00286900
background.brand.low.hovered / blend.solid	#7daeff	#004cb8
background.brand.low.hovered / blend.low	#7daeffe6	#004cb8e6
background.brand.low.hovered / blend.medium	#7daeffb3	#004cb8b3
background.brand.low.hovered / blend.high	#7daeff80	#004cb880
background.brand.low.hovered / blend.strong	#7daeff4d	#004cb84d
background.brand.low.hovered / blend.full	#7daeff00	#004cb800
background.brand.low.pressed / blend.solid	#448bff	#0d67ec
background.brand.low.pressed / blend.low	#448bffe6	#0d67ece6
background.brand.low.pressed / blend.medium	#448bffb3	#0d67ecb3
background.brand.low.pressed / blend.high	#448bff80	#0d67ec80
background.brand.low.pressed / blend.strong	#448bff4d	#0d67ec4d
background.brand.low.pressed / blend.full	#448bff00	#0d67ec00
background.brand.low.selected / blend.solid	#629dff	#0058d4
background.brand.low.selected / blend.low	#629dffe6	#0058d4e6
background.brand.low.selected / blend.medium	#629dffb3	#0058d4b3
background.brand.low.selected / blend.high	#629dff80	#0058d480
background.brand.low.selected / blend.strong	#629dff4d	#0058d44d
background.brand.low.selected / blend.full	#629dff00	#0058d400

Intent: brand, attention: base

Token name	light	dark
background.brand.base.default / blend.solid	#ffffff	#000000
background.brand.base.default / blend.low	#ffffffe6	#000000e6
background.brand.base.default / blend.medium	#ffffffb3	#000000b3
background.brand.base.default / blend.high	#ffffff80	#00000080
background.brand.base.default / blend.strong	#ffffff4d	#0000004d
background.brand.base.default / blend.full	#ffffff00	#00000000
background.brand.base.hovered / blend.solid	#ccdfff	#003f9d
background.brand.base.hovered / blend.low	#ccdfffe6	#003f9de6
background.brand.base.hovered / blend.medium	#ccdfffb3	#003f9db3
background.brand.base.hovered / blend.high	#ccdfff80	#003f9d80
background.brand.base.hovered / blend.strong	#ccdfff4d	#003f9d4d
background.brand.base.hovered / blend.full	#ccdfff00	#003f9d00
background.brand.base.pressed / blend.solid	#98bfff	#0058d4
background.brand.base.pressed / blend.low	#98bfffe6	#0058d4e6
background.brand.base.pressed / blend.medium	#98bfffb3	#0058d4b3
background.brand.base.pressed / blend.high	#98bfff80	#0058d480
background.brand.base.pressed / blend.strong	#98bfff4d	#0058d44d
background.brand.base.pressed / blend.full	#98bfff00	#0058d400
background.brand.base.selected / blend.solid	#b2cfff	#003483
background.brand.base.selected / blend.low	#b2cfffe6	#003483e6
background.brand.base.selected / blend.medium	#b2cfffb3	#003483b3
background.brand.base.selected / blend.high	#b2cfff80	#00348380
background.brand.base.selected / blend.strong	#b2cfff4d	#0034834d
background.brand.base.selected / blend.full	#b2cfff00	#00348300

CSS Custom Properties

Intent: brand

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 brand: */
  ----intent--brand: 0.2154 26;
  ----swatch--brand-0: 0 0 0;
  ----swatch--brand-25:   ;
  ----swatch--brand-50:   2;
  ----swatch--brand-75:  1 7;
  ----swatch--brand-100:  3 16;
  ----swatch--brand-125:  5 26;
  ----swatch--brand-150:  9 36;
  ----swatch--brand-175:  14 47;
  ----swatch--brand-200:  19 58;
  ----swatch--brand-225:  24 69;
  ----swatch--brand-250:  29 81;
  ----swatch--brand-275:  34 93;
  ----swatch--brand-300:  4 105;
  ----swatch--brand-325:  46 118;
  ----swatch--brand-350:  52 131;
  ----swatch--brand-375:  57 144;
  ----swatch--brand-400:  63 157;
  ----swatch--brand-425:  7 171;
  ----swatch--brand-450:  76 184;
  ----swatch--brand-475:  82 198;
  ----swatch--brand-500:  88 212;
  ----swatch--brand-525:  95 226;
  ----swatch--brand-550: 13 103 236;
  ----swatch--brand-575: 25 111 245;
  ----swatch--brand-600: 35 119 253;
  ----swatch--brand-625: 52 129 255;
  ----swatch--brand-650: 68 139 255;
  ----swatch--brand-675: 83 148 255;
  ----swatch--brand-700: 98 157 255;
  ----swatch--brand-725: 112 166 255;
  ----swatch--brand-750: 125 174 255;
  ----swatch--brand-775: 138 183 255;
  ----swatch--brand-800: 152 191 255;
  ----swatch--brand-825: 165 199 255;
  ----swatch--brand-850: 178 207 255;
  ----swatch--brand-875: 191 215 255;
  ----swatch--brand-900: 204 223 255;
  ----swatch--brand-925: 217 231 255;
  ----swatch--brand-950: 229 239 255;
  ----swatch--brand-975: 242 247 255;
  ----swatch--brand-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 brand intent:
   */
  --background--brand-base-default--light: var(----swatch--brand-1000);
  --background--brand-base-default--dark: var(----swatch--brand-0);
  --background--brand-base-hovered--light: var(----swatch--brand-900);
  --background--brand-base-hovered--dark: var(----swatch--brand-400);
  --background--brand-base-pressed--light: var(----swatch--brand-800);
  --background--brand-base-pressed--dark: var(----swatch--brand-500);
  --background--brand-base-selected--light: var(----swatch--brand-850);
  --background--brand-base-selected--dark: var(----swatch--brand-350);
  --background--brand-low-default--light: var(----swatch--brand-850);
  --background--brand-low-default--dark: var(----swatch--brand-300);
  --background--brand-low-hovered--light: var(----swatch--brand-750);
  --background--brand-low-hovered--dark: var(----swatch--brand-450);
  --background--brand-low-pressed--light: var(----swatch--brand-650);
  --background--brand-low-pressed--dark: var(----swatch--brand-550);
  --background--brand-low-selected--light: var(----swatch--brand-700);
  --background--brand-low-selected--dark: var(----swatch--brand-500);
  --background--brand-medium-default--light: var(----swatch--brand-700);
  --background--brand-medium-default--dark: var(----swatch--brand-450);
  --background--brand-medium-hovered--light: var(----swatch--brand-600);
  --background--brand-medium-hovered--dark: var(----swatch--brand-550);
  --background--brand-medium-pressed--light: var(----swatch--brand-500);
  --background--brand-medium-pressed--dark: var(----swatch--brand-650);
  --background--brand-medium-selected--light: var(----swatch--brand-550);
  --background--brand-medium-selected--dark: var(----swatch--brand-600);
  --background--brand-high-default--light: var(----swatch--brand-550);
  --background--brand-high-default--dark: var(----swatch--brand-550);
  --background--brand-high-hovered--light: var(----swatch--brand-650);
  --background--brand-high-hovered--dark: var(----swatch--brand-450);
  --background--brand-high-pressed--light: var(----swatch--brand-750);
  --background--brand-high-pressed--dark: var(----swatch--brand-350);
  --background--brand-high-selected--light: var(----swatch--brand-700);
  --background--brand-high-selected--dark: var(----swatch--brand-400);
  --background--brand-strong-default--light: var(----swatch--brand-450);
  --background--brand-strong-default--dark: var(----swatch--brand-750);
  --background--brand-strong-hovered--light: var(----swatch--brand-600);
  --background--brand-strong-hovered--dark: var(----swatch--brand-650);
  --background--brand-strong-pressed--light: var(----swatch--brand-700);
  --background--brand-strong-pressed--dark: var(----swatch--brand-550);
  --background--brand-strong-selected--light: var(----swatch--brand-650);
  --background--brand-strong-selected--dark: var(----swatch--brand-600);
  --background--brand-full-default--light: var(----swatch--brand-0);
  --background--brand-full-default--dark: var(----swatch--brand-1000);
  --background--brand-full-hovered--light: var(----swatch--brand-400);
  --background--brand-full-hovered--dark: var(----swatch--brand-900);
  --background--brand-full-pressed--light: var(----swatch--brand-500);
  --background--brand-full-pressed--dark: var(----swatch--brand-800);
  --background--brand-full-selected--light: var(----swatch--brand-350);
  --background--brand-full-selected--dark: var(----swatch--brand-850);
}

Figma JSON

Intent: brand

{
  "Scales": {
    "__scales": {
      "swatch": {
        "brand": {
          "0": {
            "$type": "color",
            "$value": "#000000"
          },
          "25": {
            "$type": "color",
            "$value": "#000000"
          },
          "50": {
            "$type": "color",
            "$value": "#000002"
          },
          "75": {
            "$type": "color",
            "$value": "#000107"
          },
          "100": {
            "$type": "color",
            "$value": "#000310"
          },
          "125": {
            "$type": "color",
            "$value": "#00051a"
          },
          "150": {
            "$type": "color",
            "$value": "#000924"
          },
          "175": {
            "$type": "color",
            "$value": "#000e2f"
          },
          "200": {
            "$type": "color",
            "$value": "#00133a"
          },
          "225": {
            "$type": "color",
            "$value": "#001845"
          },
          "250": {
            "$type": "color",
            "$value": "#001d51"
          },
          "275": {
            "$type": "color",
            "$value": "#00225d"
          },
          "300": {
            "$type": "color",
            "$value": "#002869"
          },
          "325": {
            "$type": "color",
            "$value": "#002e76"
          },
          "350": {
            "$type": "color",
            "$value": "#003483"
          },
          "375": {
            "$type": "color",
            "$value": "#003990"
          },
          "400": {
            "$type": "color",
            "$value": "#003f9d"
          },
          "425": {
            "$type": "color",
            "$value": "#0046ab"
          },
          "450": {
            "$type": "color",
            "$value": "#004cb8"
          },
          "475": {
            "$type": "color",
            "$value": "#0052c6"
          },
          "500": {
            "$type": "color",
            "$value": "#0058d4"
          },
          "525": {
            "$type": "color",
            "$value": "#005fe2"
          },
          "550": {
            "$type": "color",
            "$value": "#0d67ec"
          },
          "575": {
            "$type": "color",
            "$value": "#196ff5"
          },
          "600": {
            "$type": "color",
            "$value": "#2377fd"
          },
          "625": {
            "$type": "color",
            "$value": "#3481ff"
          },
          "650": {
            "$type": "color",
            "$value": "#448bff"
          },
          "675": {
            "$type": "color",
            "$value": "#5394ff"
          },
          "700": {
            "$type": "color",
            "$value": "#629dff"
          },
          "725": {
            "$type": "color",
            "$value": "#70a6ff"
          },
          "750": {
            "$type": "color",
            "$value": "#7daeff"
          },
          "775": {
            "$type": "color",
            "$value": "#8ab7ff"
          },
          "800": {
            "$type": "color",
            "$value": "#98bfff"
          },
          "825": {
            "$type": "color",
            "$value": "#a5c7ff"
          },
          "850": {
            "$type": "color",
            "$value": "#b2cfff"
          },
          "875": {
            "$type": "color",
            "$value": "#bfd7ff"
          },
          "900": {
            "$type": "color",
            "$value": "#ccdfff"
          },
          "925": {
            "$type": "color",
            "$value": "#d9e7ff"
          },
          "950": {
            "$type": "color",
            "$value": "#e5efff"
          },
          "975": {
            "$type": "color",
            "$value": "#f2f7ff"
          },
          "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": {
      "brand": {
        "base": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/1000}",
              "dark": "{__scales/swatch/brand/0}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/900}",
              "dark": "{__scales/swatch/brand/400}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/800}",
              "dark": "{__scales/swatch/brand/500}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/850}",
              "dark": "{__scales/swatch/brand/350}"
            }
          }
        },
        "low": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/850}",
              "dark": "{__scales/swatch/brand/300}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/750}",
              "dark": "{__scales/swatch/brand/450}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/650}",
              "dark": "{__scales/swatch/brand/550}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/700}",
              "dark": "{__scales/swatch/brand/500}"
            }
          }
        },
        "medium": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/700}",
              "dark": "{__scales/swatch/brand/450}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/600}",
              "dark": "{__scales/swatch/brand/550}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/500}",
              "dark": "{__scales/swatch/brand/650}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/550}",
              "dark": "{__scales/swatch/brand/600}"
            }
          }
        },
        "high": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/550}",
              "dark": "{__scales/swatch/brand/550}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/650}",
              "dark": "{__scales/swatch/brand/450}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/750}",
              "dark": "{__scales/swatch/brand/350}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/700}",
              "dark": "{__scales/swatch/brand/400}"
            }
          }
        },
        "strong": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/450}",
              "dark": "{__scales/swatch/brand/750}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/600}",
              "dark": "{__scales/swatch/brand/650}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/700}",
              "dark": "{__scales/swatch/brand/550}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/650}",
              "dark": "{__scales/swatch/brand/600}"
            }
          }
        },
        "full": {
          "default": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/0}",
              "dark": "{__scales/swatch/brand/1000}"
            }
          },
          "hovered": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/400}",
              "dark": "{__scales/swatch/brand/900}"
            }
          },
          "pressed": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/500}",
              "dark": "{__scales/swatch/brand/800}"
            }
          },
          "selected": {
            "$type": "color",
            "$value": {
              "light": "{__scales/swatch/brand/350}",
              "dark": "{__scales/swatch/brand/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": {
    "brand": "0.533 0.215 260"
  },
  "swatch": {
    "brand": {
      "0": "0 0 0",
      "25": "  ",
      "50": "  2",
      "75": " 1 7",
      "100": " 3 16",
      "125": " 5 26",
      "150": " 9 36",
      "175": " 14 47",
      "200": " 19 58",
      "225": " 24 69",
      "250": " 29 81",
      "275": " 34 93",
      "300": " 4 105",
      "325": " 46 118",
      "350": " 52 131",
      "375": " 57 144",
      "400": " 63 157",
      "425": " 7 171",
      "450": " 76 184",
      "475": " 82 198",
      "500": " 88 212",
      "525": " 95 226",
      "550": "13 103 236",
      "575": "25 111 245",
      "600": "35 119 253",
      "625": "52 129 255",
      "650": "68 139 255",
      "675": "83 148 255",
      "700": "98 157 255",
      "725": "112 166 255",
      "750": "125 174 255",
      "775": "138 183 255",
      "800": "152 191 255",
      "825": "165 199 255",
      "850": "178 207 255",
      "875": "191 215 255",
      "900": "204 223 255",
      "925": "217 231 255",
      "950": "229 239 255",
      "975": "242 247 255",
      "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": {
        "brand": {
          "base": {
            "default": scales.swatch.brand[1000],
            "hovered": scales.swatch.brand[900],
            "pressed": scales.swatch.brand[800],
            "selected": scales.swatch.brand[850]
          },
          "low": {
            "default": scales.swatch.brand[850],
            "hovered": scales.swatch.brand[750],
            "pressed": scales.swatch.brand[650],
            "selected": scales.swatch.brand[700]
          },
          "medium": {
            "default": scales.swatch.brand[700],
            "hovered": scales.swatch.brand[600],
            "pressed": scales.swatch.brand[500],
            "selected": scales.swatch.brand[550]
          },
          "high": {
            "default": scales.swatch.brand[550],
            "hovered": scales.swatch.brand[650],
            "pressed": scales.swatch.brand[750],
            "selected": scales.swatch.brand[700]
          },
          "strong": {
            "default": scales.swatch.brand[450],
            "hovered": scales.swatch.brand[600],
            "pressed": scales.swatch.brand[700],
            "selected": scales.swatch.brand[650]
          },
          "full": {
            "default": scales.swatch.brand[0],
            "hovered": scales.swatch.brand[400],
            "pressed": scales.swatch.brand[500],
            "selected": scales.swatch.brand[350]
          }
        }
      }
    }
  },
  "dark": {
    "blend": {
      "solid": 100,
      "low": 90,
      "medium": 70,
      "high": 50,
      "strong": 30,
      "full": scales.blend[0]
    },
    "color": {
      "background": {
        "brand": {
          "base": {
            "default": scales.swatch.brand[0],
            "hovered": scales.swatch.brand[400],
            "pressed": scales.swatch.brand[500],
            "selected": scales.swatch.brand[350]
          },
          "low": {
            "default": scales.swatch.brand[300],
            "hovered": scales.swatch.brand[450],
            "pressed": scales.swatch.brand[550],
            "selected": scales.swatch.brand[500]
          },
          "medium": {
            "default": scales.swatch.brand[450],
            "hovered": scales.swatch.brand[550],
            "pressed": scales.swatch.brand[650],
            "selected": scales.swatch.brand[600]
          },
          "high": {
            "default": scales.swatch.brand[550],
            "hovered": scales.swatch.brand[450],
            "pressed": scales.swatch.brand[350],
            "selected": scales.swatch.brand[400]
          },
          "strong": {
            "default": scales.swatch.brand[750],
            "hovered": scales.swatch.brand[650],
            "pressed": scales.swatch.brand[550],
            "selected": scales.swatch.brand[600]
          },
          "full": {
            "default": scales.swatch.brand[1000],
            "hovered": scales.swatch.brand[900],
            "pressed": scales.swatch.brand[800],
            "selected": scales.swatch.brand[850]
          }
        }
      }
    }
  }
} as const;

Up Next

---

Typography Tokens

Typography tokens define text styles and typographic hierarchy in our user interfaces.

Typography Tokens ->