Design tokens define the visual language we use in LUCI through name/value pairs. This pairing provides context around color, spacing and typography and how those design options should be used within a website or application.
Design 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 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 charts and graphs.
| Name | Value |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
50% |
|
|
3px |
|
|
.25 |
|
|
|
Use these tokens only for icon colors.
| 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 |
|
|
#B3B3B3 |
|
|
solid 1px #B3B3B3 |
|
|
#808080 |
|
|
solid 1px #808080 |
|
|
#808080 |
|
|
solid 1px #808080 |
|
|
#808080 |
|
|
solid 1px #808080 |
|
|
#CCCCCC |
|
|
solid 1px #CCCCCC |
|
|
#999999 |
|
|
solid 1px #999999 |
|
|
#999999 |
|
|
solid 1px #999999 |
|
|
#999999 |
|
|
solid 1px #999999 |
Use this token to apply an active state box shadow to form components.
| Name | Value |
|---|---|
|
|
0 0 0 2px #0037FF |
|
|
0 8px 14px 5px rgba(#000000, .25) |
|
|
0 4px 0 rgba(#CCCCCC, .3) |
Use these tokens to apply font style, weight, family and line-height.
| Name | Value |
|---|---|
|
|
0 0 0 2px #0037FF |
|
|
0 8px 14px 5px rgba(#000000, .25) |
|
|
0 4px 0 rgba(#CCCCCC, .3) |
|
|
'Helvetica Neue', Arial, 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 |
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 create spacing and columns in a layout grid.
| Name | Value |
|---|---|
|
|
40px |
|
|
70px |
|
|
12 |
|
|
1280px |
Use these tokens in media queries.
| Name | Value |
|---|---|
|
|
576px |
|
|
768px |
|
|
992px |
|
|
1200px |
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 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|