Design tokens define the visual language in the form of name/value pairs. This pairing provides context around color, spacing and typography and how those design options should be used within a site or application.
The tokens are documented in an open source structure called YAML, a “human friendly” format that is then translated into SASS variables and a JSON data structure. These formats enable implementation of the visual language across sites and applications. It also allows other product teams, designers, and developers to contribute design options in a structure that can be reused by all.
One way you can adopt the LUCI visual language into your application or site is to import the tokens.scss file that contains a list of SASS variables that define design options and decisions.
@import to include node-modules/@netapp/luci/tokens/tokens.scss file into your main stylesheet.<div class="luci__component">
<div class="luci__component-header"></div>
<div class="luci__component-wrapper"></div>
</div>.luci__component {
background-color: #1E4A93;
padding: 16px 32px;
color: #ffffff;
}.luci__component {
background-color: $luci-background-color-medium-blue;
padding: $luci-space-inset-stretch-lg;
color: $luci-text-color-primary-on-dark;
}Use this token when you need to apply the brand color.
| Name | Value |
|---|---|
|
|
|
Use these tokens only for background colors.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use these tokens only for text colors.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use these tokens only for feedback colors.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use these tokens only for state colors.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Use these tokens only for link colors.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use these tokens only for interactive icons.
| Name | Value |
|---|---|
|
|
|
|
|
|
Use these tokens to size icons.
| Name | Value |
|---|---|
|
|
16px |
|
|
20px |
|
|
24px |
|
|
32px |
|
|
48px |
Use these tokens to apply border radius, width, and color.
| Name | Value |
|---|---|
|
|
2px |
|
|
#C2C2C2 |
|
|
solid 1px #C2C2C2 |
|
|
#888888 |
|
|
solid 1px #888888 |
|
|
#D7D7D7 |
|
|
solid 1px #D7D7D7 |
Use this token to apply an active state box shadow to form components.
| Name | Value |
|---|---|
|
|
0 0 0 2px #4FAAFF |
Use these tokens to apply font style, weight, family, and line-height.
| Name | Value |
|---|---|
|
|
'Source Sans Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif |
|
|
'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace |
|
|
300 |
|
|
400 |
|
|
600 |
|
|
700 |
|
|
12px |
|
|
14px |
|
|
16px |
|
|
24px |
|
|
42px |
|
|
46px |
|
|
52px |
|
|
32px |
|
|
36px |
|
|
40px |
|
|
28px |
|
|
30px |
|
|
32px |
|
|
24px |
|
|
20px |
|
|
18px |
|
|
16px |
|
|
20px |
|
|
24px |
|
|
16px |
|
|
16px |
|
|
18px |
|
|
1.5 |
|
|
1.3 |
|
|
1.2 |
Use these tokens to apply vertical or horizontal space between components and internal padding within components.
| Name | Value |
|---|---|
|
|
4px |
|
|
8px |
|
|
12px |
|
|
16px |
|
|
24px |
|
|
32px |
|
|
48px |
|
|
64px |
|
|
4px |
|
|
8px |
|
|
12px |
|
|
16px |
|
|
24px |
|
|
32px |
|
|
48px |
|
|
64px |
|
|
8px 12px |
|
|
12px 32px |
|
|
16px 32px |
|
|
0 0 4px |
|
|
0 0 8px |
|
|
0 0 12px |
|
|
0 0 16px |
|
|
0 0 24px |
|
|
0 0 32px |
|
|
0 0 48px |
|
|
0 0 64px |
|
|
0 4px 0 0 |
|
|
0 8px 0 0 |
|
|
0 12px 0 0 |
|
|
0 16px 0 0 |
|
|
0 24px 0 0 |
|
|
0 32px 0 0 |
|
|
0 48px 0 0 |
|
|
0 64px 0 0 |
|
|
0 0 0 4px |
|
|
0 0 0 8px |
|
|
0 0 0 12px |
|
|
0 0 0 16px |
|
|
0 0 0 24px |
|
|
0 0 0 32px |
|
|
0 0 0 48px |
|
|
0 0 0 64px |
Use these tokens to set the z-index of a component.
| Name | Value |
|---|---|
|
|
1 |
|
|
10 |
|
|
100 |
|
|
200 |
|
|
800 |
|
|
810 |
|
|
900 |
The following are the colors that are defined by the visual language. These options serve as the base for how color should be applied within applications and sites.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|