One set of values that themes, components and modes all read from.
Life of a design token
How one seed color becomes the tokens that antd components and Tailwind classes read.
Seed token
colorPrimary
Map algorithm
defaultAlgorithm
darkAlgorithm
compactAlgorithm
Map token
colorPrimaryBg
colorPrimaryBorder
colorPrimary
102 more...
colorPrimaryBg
colorPrimaryBorder
colorPrimary
102 more...
Alias token
controlOutline controlItemBgActive 74 more...
Components
px
50%
Option
Design tokens
Every token with its value in each mode. Search by name, or filter by collection.
All types
All tokens (390)
Token
Light
Dark
Collection
Type
Description
borderRadius
6
6
seed
float
Border radius of base components
colorBgBase
#ffffff
#000000
seed
color
Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
colorError
colorErrorBase
colorErrorBase
seed
color
Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
colorInfo
colorInfoBase
colorInfoBase
seed
color
Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
colorPrimary
colorPrimaryBase
colorPrimaryBase
seed
color
Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
colorSuccess
colorSuccessBase
colorSuccessBase
seed
color
Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
colorTextBase
#000000
#ffffff
seed
color
Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
colorWarning
colorWarningBase
colorWarningBase
seed
color
Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
controlHeight
32
32
seed
float
The height of the basic controls such as buttons and input boxes