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

Intent Type

BackgroundForegroundBorder

Intent Name

Intent Color

Preview

Intent: brand, attention: full

Token name	light	dark
background.brand.full.default	#000000	#ffffff
background.brand.full.hovered	#880e00	#ffd2c9
background.brand.full.pressed	#b22817	#ffa190
background.brand.full.selected	#710a00	#ffbaad

Intent: brand, attention: strong

Token name	light	dark
background.brand.strong.default	#a01200	#ffbaad
background.brand.strong.hovered	#d54c38	#ff8671
background.brand.strong.pressed	#f86c56	#e65c47
background.brand.strong.selected	#e65c47	#f86c56

Intent: brand, attention: high

Token name	light	dark
background.brand.high.default	#e65c47	#ff8671
background.brand.high.hovered	#ff8671	#e65c47
background.brand.high.pressed	#ffbaad	#c33b28
background.brand.high.selected	#ffa190	#d54c38

Intent: brand, attention: medium

Token name	light	dark
background.brand.medium.default	#ff8671	#e65c47
background.brand.medium.hovered	#e65c47	#ff8671
background.brand.medium.pressed	#c33b28	#ffbaad
background.brand.medium.selected	#d54c38	#ffa190

Intent: brand, attention: low

Token name	light	dark
background.brand.low.default	#ffbaad	#a01200
background.brand.low.hovered	#ff8671	#d54c38
background.brand.low.pressed	#e65c47	#f86c56
background.brand.low.selected	#f86c56	#e65c47

Intent: brand, attention: base

Token name	light	dark
background.brand.base.default	#ffffff	#000000
background.brand.base.hovered	#ffd2c9	#880e00
background.brand.base.pressed	#ffa190	#b22817
background.brand.base.selected	#ffbaad	#710a00

CSS Custom Properties

Intent: brand

:root {
  /**
   * Swatch scale for brand intent:
   */
  --swatch--background-brand-0: 0 0 0;
  --swatch--background-brand-50: 2 0 0;
  --swatch--background-brand-100: 13 0 0;
  --swatch--background-brand-150: 30 1 0;
  --swatch--background-brand-200: 49 2 0;
  --swatch--background-brand-250: 69 3 0;
  --swatch--background-brand-300: 91 6 0;
  --swatch--background-brand-350: 113 10 0;
  --swatch--background-brand-400: 136 14 0;
  --swatch--background-brand-450: 160 18 0;
  --swatch--background-brand-500: 178 40 23;
  --swatch--background-brand-550: 195 59 40;
  --swatch--background-brand-600: 213 76 56;
  --swatch--background-brand-650: 230 92 71;
  --swatch--background-brand-700: 248 108 86;
  --swatch--background-brand-750: 255 134 113;
  --swatch--background-brand-800: 255 161 144;
  --swatch--background-brand-850: 255 186 173;
  --swatch--background-brand-900: 255 210 201;
  --swatch--background-brand-950: 255 233 228;
  --swatch--background-brand-1000: 255 255 255;
  /**
   * Abstract background tokens for brand intent:
   */
  --background--brand-base-default--light: var(--swatch--background-brand-1000);
  --background--brand-base-default--dark: var(--swatch--background-brand-0);
  --background--brand-base-hovered--light: var(--swatch--background-brand-900);
  --background--brand-base-hovered--dark: var(--swatch--background-brand-400);
  --background--brand-base-pressed--light: var(--swatch--background-brand-800);
  --background--brand-base-pressed--dark: var(--swatch--background-brand-500);
  --background--brand-base-selected--light: var(--swatch--background-brand-850);
  --background--brand-base-selected--dark: var(--swatch--background-brand-350);
  --background--brand-low-default--light: var(--swatch--background-brand-850);
  --background--brand-low-default--dark: var(--swatch--background-brand-450);
  --background--brand-low-hovered--light: var(--swatch--background-brand-750);
  --background--brand-low-hovered--dark: var(--swatch--background-brand-600);
  --background--brand-low-pressed--light: var(--swatch--background-brand-650);
  --background--brand-low-pressed--dark: var(--swatch--background-brand-700);
  --background--brand-low-selected--light: var(--swatch--background-brand-700);
  --background--brand-low-selected--dark: var(--swatch--background-brand-650);
  --background--brand-medium-default--light: var(--swatch--background-brand-750);
  --background--brand-medium-default--dark: var(--swatch--background-brand-650);
  --background--brand-medium-hovered--light: var(--swatch--background-brand-650);
  --background--brand-medium-hovered--dark: var(--swatch--background-brand-750);
  --background--brand-medium-pressed--light: var(--swatch--background-brand-550);
  --background--brand-medium-pressed--dark: var(--swatch--background-brand-850);
  --background--brand-medium-selected--light: var(--swatch--background-brand-600);
  --background--brand-medium-selected--dark: var(--swatch--background-brand-800);
  --background--brand-high-default--light: var(--swatch--background-brand-650);
  --background--brand-high-default--dark: var(--swatch--background-brand-750);
  --background--brand-high-hovered--light: var(--swatch--background-brand-750);
  --background--brand-high-hovered--dark: var(--swatch--background-brand-650);
  --background--brand-high-pressed--light: var(--swatch--background-brand-850);
  --background--brand-high-pressed--dark: var(--swatch--background-brand-550);
  --background--brand-high-selected--light: var(--swatch--background-brand-800);
  --background--brand-high-selected--dark: var(--swatch--background-brand-600);
  --background--brand-strong-default--light: var(--swatch--background-brand-450);
  --background--brand-strong-default--dark: var(--swatch--background-brand-850);
  --background--brand-strong-hovered--light: var(--swatch--background-brand-600);
  --background--brand-strong-hovered--dark: var(--swatch--background-brand-750);
  --background--brand-strong-pressed--light: var(--swatch--background-brand-700);
  --background--brand-strong-pressed--dark: var(--swatch--background-brand-650);
  --background--brand-strong-selected--light: var(--swatch--background-brand-650);
  --background--brand-strong-selected--dark: var(--swatch--background-brand-700);
  --background--brand-full-default--light: var(--swatch--background-brand-0);
  --background--brand-full-default--dark: var(--swatch--background-brand-1000);
  --background--brand-full-hovered--light: var(--swatch--background-brand-400);
  --background--brand-full-hovered--dark: var(--swatch--background-brand-900);
  --background--brand-full-pressed--light: var(--swatch--background-brand-500);
  --background--brand-full-pressed--dark: var(--swatch--background-brand-800);
  --background--brand-full-selected--light: var(--swatch--background-brand-350);
  --background--brand-full-selected--dark: var(--swatch--background-brand-850);
}

Figma JSON

Intent: brand

{
  "Colors": {
    "background/brand/base/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.1000.solid}",
        "dark": "{swatch.background.brand.0.solid}"
      }
    },
    "background/brand/base/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.900.solid}",
        "dark": "{swatch.background.brand.400.solid}"
      }
    },
    "background/brand/base/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.800.solid}",
        "dark": "{swatch.background.brand.500.solid}"
      }
    },
    "background/brand/base/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.850.solid}",
        "dark": "{swatch.background.brand.350.solid}"
      }
    },
    "background/brand/low/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.850.solid}",
        "dark": "{swatch.background.brand.450.solid}"
      }
    },
    "background/brand/low/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.750.solid}",
        "dark": "{swatch.background.brand.600.solid}"
      }
    },
    "background/brand/low/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.650.solid}",
        "dark": "{swatch.background.brand.700.solid}"
      }
    },
    "background/brand/low/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.700.solid}",
        "dark": "{swatch.background.brand.650.solid}"
      }
    },
    "background/brand/medium/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.750.solid}",
        "dark": "{swatch.background.brand.650.solid}"
      }
    },
    "background/brand/medium/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.650.solid}",
        "dark": "{swatch.background.brand.750.solid}"
      }
    },
    "background/brand/medium/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.550.solid}",
        "dark": "{swatch.background.brand.850.solid}"
      }
    },
    "background/brand/medium/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.600.solid}",
        "dark": "{swatch.background.brand.800.solid}"
      }
    },
    "background/brand/high/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.650.solid}",
        "dark": "{swatch.background.brand.750.solid}"
      }
    },
    "background/brand/high/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.750.solid}",
        "dark": "{swatch.background.brand.650.solid}"
      }
    },
    "background/brand/high/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.850.solid}",
        "dark": "{swatch.background.brand.550.solid}"
      }
    },
    "background/brand/high/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.800.solid}",
        "dark": "{swatch.background.brand.600.solid}"
      }
    },
    "background/brand/strong/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.450.solid}",
        "dark": "{swatch.background.brand.850.solid}"
      }
    },
    "background/brand/strong/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.600.solid}",
        "dark": "{swatch.background.brand.750.solid}"
      }
    },
    "background/brand/strong/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.700.solid}",
        "dark": "{swatch.background.brand.650.solid}"
      }
    },
    "background/brand/strong/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.650.solid}",
        "dark": "{swatch.background.brand.700.solid}"
      }
    },
    "background/brand/full/default": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.0.solid}",
        "dark": "{swatch.background.brand.1000.solid}"
      }
    },
    "background/brand/full/hovered": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.400.solid}",
        "dark": "{swatch.background.brand.900.solid}"
      }
    },
    "background/brand/full/pressed": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.500.solid}",
        "dark": "{swatch.background.brand.800.solid}"
      }
    },
    "background/brand/full/selected": {
      "$type": "color",
      "$value": {
        "light": "{swatch.background.brand.350.solid}",
        "dark": "{swatch.background.brand.850.solid}"
      }
    }
  },
  "Scales": {
    "swatch/background/brand/0/solid": {
      "$type": "color",
      "$value": "#000000ff"
    },
    "swatch/background/brand/0/low": {
      "$type": "color",
      "$value": "#000000e6"
    },
    "swatch/background/brand/0/medium": {
      "$type": "color",
      "$value": "#000000b3"
    },
    "swatch/background/brand/0/high": {
      "$type": "color",
      "$value": "#00000080"
    },
    "swatch/background/brand/0/strong": {
      "$type": "color",
      "$value": "#0000004d"
    },
    "swatch/background/brand/0/full": {
      "$type": "color",
      "$value": "#00000000"
    },
    "swatch/background/brand/50/solid": {
      "$type": "color",
      "$value": "#020000ff"
    },
    "swatch/background/brand/50/low": {
      "$type": "color",
      "$value": "#020000e6"
    },
    "swatch/background/brand/50/medium": {
      "$type": "color",
      "$value": "#020000b3"
    },
    "swatch/background/brand/50/high": {
      "$type": "color",
      "$value": "#02000080"
    },
    "swatch/background/brand/50/strong": {
      "$type": "color",
      "$value": "#0200004d"
    },
    "swatch/background/brand/50/full": {
      "$type": "color",
      "$value": "#02000000"
    },
    "swatch/background/brand/100/solid": {
      "$type": "color",
      "$value": "#0d0000ff"
    },
    "swatch/background/brand/100/low": {
      "$type": "color",
      "$value": "#0d0000e6"
    },
    "swatch/background/brand/100/medium": {
      "$type": "color",
      "$value": "#0d0000b3"
    },
    "swatch/background/brand/100/high": {
      "$type": "color",
      "$value": "#0d000080"
    },
    "swatch/background/brand/100/strong": {
      "$type": "color",
      "$value": "#0d00004d"
    },
    "swatch/background/brand/100/full": {
      "$type": "color",
      "$value": "#0d000000"
    },
    "swatch/background/brand/150/solid": {
      "$type": "color",
      "$value": "#1e0100ff"
    },
    "swatch/background/brand/150/low": {
      "$type": "color",
      "$value": "#1e0100e6"
    },
    "swatch/background/brand/150/medium": {
      "$type": "color",
      "$value": "#1e0100b3"
    },
    "swatch/background/brand/150/high": {
      "$type": "color",
      "$value": "#1e010080"
    },
    "swatch/background/brand/150/strong": {
      "$type": "color",
      "$value": "#1e01004d"
    },
    "swatch/background/brand/150/full": {
      "$type": "color",
      "$value": "#1e010000"
    },
    "swatch/background/brand/200/solid": {
      "$type": "color",
      "$value": "#310200ff"
    },
    "swatch/background/brand/200/low": {
      "$type": "color",
      "$value": "#310200e6"
    },
    "swatch/background/brand/200/medium": {
      "$type": "color",
      "$value": "#310200b3"
    },
    "swatch/background/brand/200/high": {
      "$type": "color",
      "$value": "#31020080"
    },
    "swatch/background/brand/200/strong": {
      "$type": "color",
      "$value": "#3102004d"
    },
    "swatch/background/brand/200/full": {
      "$type": "color",
      "$value": "#31020000"
    },
    "swatch/background/brand/250/solid": {
      "$type": "color",
      "$value": "#450300ff"
    },
    "swatch/background/brand/250/low": {
      "$type": "color",
      "$value": "#450300e6"
    },
    "swatch/background/brand/250/medium": {
      "$type": "color",
      "$value": "#450300b3"
    },
    "swatch/background/brand/250/high": {
      "$type": "color",
      "$value": "#45030080"
    },
    "swatch/background/brand/250/strong": {
      "$type": "color",
      "$value": "#4503004d"
    },
    "swatch/background/brand/250/full": {
      "$type": "color",
      "$value": "#45030000"
    },
    "swatch/background/brand/300/solid": {
      "$type": "color",
      "$value": "#5b0600ff"
    },
    "swatch/background/brand/300/low": {
      "$type": "color",
      "$value": "#5b0600e6"
    },
    "swatch/background/brand/300/medium": {
      "$type": "color",
      "$value": "#5b0600b3"
    },
    "swatch/background/brand/300/high": {
      "$type": "color",
      "$value": "#5b060080"
    },
    "swatch/background/brand/300/strong": {
      "$type": "color",
      "$value": "#5b06004d"
    },
    "swatch/background/brand/300/full": {
      "$type": "color",
      "$value": "#5b060000"
    },
    "swatch/background/brand/350/solid": {
      "$type": "color",
      "$value": "#710a00ff"
    },
    "swatch/background/brand/350/low": {
      "$type": "color",
      "$value": "#710a00e6"
    },
    "swatch/background/brand/350/medium": {
      "$type": "color",
      "$value": "#710a00b3"
    },
    "swatch/background/brand/350/high": {
      "$type": "color",
      "$value": "#710a0080"
    },
    "swatch/background/brand/350/strong": {
      "$type": "color",
      "$value": "#710a004d"
    },
    "swatch/background/brand/350/full": {
      "$type": "color",
      "$value": "#710a0000"
    },
    "swatch/background/brand/400/solid": {
      "$type": "color",
      "$value": "#880e00ff"
    },
    "swatch/background/brand/400/low": {
      "$type": "color",
      "$value": "#880e00e6"
    },
    "swatch/background/brand/400/medium": {
      "$type": "color",
      "$value": "#880e00b3"
    },
    "swatch/background/brand/400/high": {
      "$type": "color",
      "$value": "#880e0080"
    },
    "swatch/background/brand/400/strong": {
      "$type": "color",
      "$value": "#880e004d"
    },
    "swatch/background/brand/400/full": {
      "$type": "color",
      "$value": "#880e0000"
    },
    "swatch/background/brand/450/solid": {
      "$type": "color",
      "$value": "#a01200ff"
    },
    "swatch/background/brand/450/low": {
      "$type": "color",
      "$value": "#a01200e6"
    },
    "swatch/background/brand/450/medium": {
      "$type": "color",
      "$value": "#a01200b3"
    },
    "swatch/background/brand/450/high": {
      "$type": "color",
      "$value": "#a0120080"
    },
    "swatch/background/brand/450/strong": {
      "$type": "color",
      "$value": "#a012004d"
    },
    "swatch/background/brand/450/full": {
      "$type": "color",
      "$value": "#a0120000"
    },
    "swatch/background/brand/500/solid": {
      "$type": "color",
      "$value": "#b22817ff"
    },
    "swatch/background/brand/500/low": {
      "$type": "color",
      "$value": "#b22817e6"
    },
    "swatch/background/brand/500/medium": {
      "$type": "color",
      "$value": "#b22817b3"
    },
    "swatch/background/brand/500/high": {
      "$type": "color",
      "$value": "#b2281780"
    },
    "swatch/background/brand/500/strong": {
      "$type": "color",
      "$value": "#b228174d"
    },
    "swatch/background/brand/500/full": {
      "$type": "color",
      "$value": "#b2281700"
    },
    "swatch/background/brand/550/solid": {
      "$type": "color",
      "$value": "#c33b28ff"
    },
    "swatch/background/brand/550/low": {
      "$type": "color",
      "$value": "#c33b28e6"
    },
    "swatch/background/brand/550/medium": {
      "$type": "color",
      "$value": "#c33b28b3"
    },
    "swatch/background/brand/550/high": {
      "$type": "color",
      "$value": "#c33b2880"
    },
    "swatch/background/brand/550/strong": {
      "$type": "color",
      "$value": "#c33b284d"
    },
    "swatch/background/brand/550/full": {
      "$type": "color",
      "$value": "#c33b2800"
    },
    "swatch/background/brand/600/solid": {
      "$type": "color",
      "$value": "#d54c38ff"
    },
    "swatch/background/brand/600/low": {
      "$type": "color",
      "$value": "#d54c38e6"
    },
    "swatch/background/brand/600/medium": {
      "$type": "color",
      "$value": "#d54c38b3"
    },
    "swatch/background/brand/600/high": {
      "$type": "color",
      "$value": "#d54c3880"
    },
    "swatch/background/brand/600/strong": {
      "$type": "color",
      "$value": "#d54c384d"
    },
    "swatch/background/brand/600/full": {
      "$type": "color",
      "$value": "#d54c3800"
    },
    "swatch/background/brand/650/solid": {
      "$type": "color",
      "$value": "#e65c47ff"
    },
    "swatch/background/brand/650/low": {
      "$type": "color",
      "$value": "#e65c47e6"
    },
    "swatch/background/brand/650/medium": {
      "$type": "color",
      "$value": "#e65c47b3"
    },
    "swatch/background/brand/650/high": {
      "$type": "color",
      "$value": "#e65c4780"
    },
    "swatch/background/brand/650/strong": {
      "$type": "color",
      "$value": "#e65c474d"
    },
    "swatch/background/brand/650/full": {
      "$type": "color",
      "$value": "#e65c4700"
    },
    "swatch/background/brand/700/solid": {
      "$type": "color",
      "$value": "#f86c56ff"
    },
    "swatch/background/brand/700/low": {
      "$type": "color",
      "$value": "#f86c56e6"
    },
    "swatch/background/brand/700/medium": {
      "$type": "color",
      "$value": "#f86c56b3"
    },
    "swatch/background/brand/700/high": {
      "$type": "color",
      "$value": "#f86c5680"
    },
    "swatch/background/brand/700/strong": {
      "$type": "color",
      "$value": "#f86c564d"
    },
    "swatch/background/brand/700/full": {
      "$type": "color",
      "$value": "#f86c5600"
    },
    "swatch/background/brand/750/solid": {
      "$type": "color",
      "$value": "#ff8671ff"
    },
    "swatch/background/brand/750/low": {
      "$type": "color",
      "$value": "#ff8671e6"
    },
    "swatch/background/brand/750/medium": {
      "$type": "color",
      "$value": "#ff8671b3"
    },
    "swatch/background/brand/750/high": {
      "$type": "color",
      "$value": "#ff867180"
    },
    "swatch/background/brand/750/strong": {
      "$type": "color",
      "$value": "#ff86714d"
    },
    "swatch/background/brand/750/full": {
      "$type": "color",
      "$value": "#ff867100"
    },
    "swatch/background/brand/800/solid": {
      "$type": "color",
      "$value": "#ffa190ff"
    },
    "swatch/background/brand/800/low": {
      "$type": "color",
      "$value": "#ffa190e6"
    },
    "swatch/background/brand/800/medium": {
      "$type": "color",
      "$value": "#ffa190b3"
    },
    "swatch/background/brand/800/high": {
      "$type": "color",
      "$value": "#ffa19080"
    },
    "swatch/background/brand/800/strong": {
      "$type": "color",
      "$value": "#ffa1904d"
    },
    "swatch/background/brand/800/full": {
      "$type": "color",
      "$value": "#ffa19000"
    },
    "swatch/background/brand/850/solid": {
      "$type": "color",
      "$value": "#ffbaadff"
    },
    "swatch/background/brand/850/low": {
      "$type": "color",
      "$value": "#ffbaade6"
    },
    "swatch/background/brand/850/medium": {
      "$type": "color",
      "$value": "#ffbaadb3"
    },
    "swatch/background/brand/850/high": {
      "$type": "color",
      "$value": "#ffbaad80"
    },
    "swatch/background/brand/850/strong": {
      "$type": "color",
      "$value": "#ffbaad4d"
    },
    "swatch/background/brand/850/full": {
      "$type": "color",
      "$value": "#ffbaad00"
    },
    "swatch/background/brand/900/solid": {
      "$type": "color",
      "$value": "#ffd2c9ff"
    },
    "swatch/background/brand/900/low": {
      "$type": "color",
      "$value": "#ffd2c9e6"
    },
    "swatch/background/brand/900/medium": {
      "$type": "color",
      "$value": "#ffd2c9b3"
    },
    "swatch/background/brand/900/high": {
      "$type": "color",
      "$value": "#ffd2c980"
    },
    "swatch/background/brand/900/strong": {
      "$type": "color",
      "$value": "#ffd2c94d"
    },
    "swatch/background/brand/900/full": {
      "$type": "color",
      "$value": "#ffd2c900"
    },
    "swatch/background/brand/950/solid": {
      "$type": "color",
      "$value": "#ffe9e4ff"
    },
    "swatch/background/brand/950/low": {
      "$type": "color",
      "$value": "#ffe9e4e6"
    },
    "swatch/background/brand/950/medium": {
      "$type": "color",
      "$value": "#ffe9e4b3"
    },
    "swatch/background/brand/950/high": {
      "$type": "color",
      "$value": "#ffe9e480"
    },
    "swatch/background/brand/950/strong": {
      "$type": "color",
      "$value": "#ffe9e44d"
    },
    "swatch/background/brand/950/full": {
      "$type": "color",
      "$value": "#ffe9e400"
    },
    "swatch/background/brand/1000/solid": {
      "$type": "color",
      "$value": "#ffffffff"
    },
    "swatch/background/brand/1000/low": {
      "$type": "color",
      "$value": "#ffffffe6"
    },
    "swatch/background/brand/1000/medium": {
      "$type": "color",
      "$value": "#ffffffb3"
    },
    "swatch/background/brand/1000/high": {
      "$type": "color",
      "$value": "#ffffff80"
    },
    "swatch/background/brand/1000/strong": {
      "$type": "color",
      "$value": "#ffffff4d"
    },
    "swatch/background/brand/1000/full": {
      "$type": "color",
      "$value": "#ffffff00"
    }
  }
}

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

React Native

TBD

Up Next

---

Typography Tokens

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

Typography Tokens ->