Skip to main content

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>

To create border color tokens we combine four aspects: intent, attention, state, and blend. Each intent creates a combination with all attention, state, and blend levels, resulting in a complete set of border color tokens that can be applied to specific UI components.

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

Default Border Tokens

warning

The following set of tokens represent the default combinations that should cover most use cases in our design system. No values are strictly enforced here, however, we recommend using these as a starting point for your products.

Pick Intent Token:

Intent: neutral, attention: full

Token namelightdark
border.neutral.full.default#000000#ffffff
border.neutral.full.hovered#4c473f#e3ddd3
border.neutral.full.pressed#67635a#c2bdb3
border.neutral.full.selected#3e3a32#d3cdc3

Intent: neutral, attention: strong

Token namelightdark
border.neutral.strong.default#59554c#d3cdc3
border.neutral.strong.hovered#858076#b3ada4
border.neutral.strong.pressed#a39e94#948e85
border.neutral.strong.selected#948e85#a39e94

Intent: neutral, attention: high

Token namelightdark
border.neutral.high.default#67635a#948e85
border.neutral.high.hovered#858076#767168
border.neutral.high.pressed#a39e94#59554c
border.neutral.high.selected#948e85#67635a

Intent: neutral, attention: medium

Token namelightdark
border.neutral.medium.default#948e85#67635a
border.neutral.medium.hovered#767168#858076
border.neutral.medium.pressed#59554c#a39e94
border.neutral.medium.selected#67635a#948e85

Intent: neutral, attention: low

Token namelightdark
border.neutral.low.default#d3cdc3#59554c
border.neutral.low.hovered#b3ada4#858076
border.neutral.low.pressed#948e85#a39e94
border.neutral.low.selected#a39e94#948e85

Intent: neutral, attention: base

Token namelightdark
border.neutral.base.default#ffffff#000000
border.neutral.base.hovered#e3ddd3#4c473f
border.neutral.base.pressed#c2bdb3#67635a
border.neutral.base.selected#d3cdc3#3e3a32

Up Next


Defining Intents

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

Defining Intents ->