Tokens

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.

Overview

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.

How to Style With Design Tokens

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.

  1. Use @import to include node-modules/@netapp/luci/tokens/tokens.scss file into your main stylesheet.
  2. Identify tokens you want to apply to your component.

Existing Markup

<div class="luci__component">
    <div class="luci__component-header"></div>
    <div class="luci__component-wrapper"></div>
</div>

Existing Style

.luci__component {
    background-color: #1E4A93;
    padding: 16px 32px;
    color: #ffffff;
}

Revised Style Using Tokens

.luci__component {
    background-color: $luci-background-color-medium-blue;
    padding: $luci-space-inset-stretch-lg;
    color: $luci-text-color-primary-on-dark;
}

Brand Color

Use this token when you need to apply the brand color.

Name Value

$luci-brand-color


#0067C5

Background Color

Use these tokens only for background colors.

Name Value

$luci-background-color-white


#FFFFFF

$luci-background-color-light


#F6F6F6

$luci-background-color-dark


#454545

$luci-background-color-medium-blue


#1E4A93

$luci-background-color-dark-blue


#173E77

$luci-background-color-purple


#7E5FD4

Text Color

Use these tokens only for text colors.

Name Value

$luci-text-color-primary-on-light


#454545

$luci-text-color-primary-on-dark


#FFFFFF

$luci-text-color-primary-on-medium-blue


#FFFFFF

$luci-text-color-primary-on-dark-blue


#FFFFFF

$luci-text-color-primary-on-purple


#FFFFFF

$luci-text-color-secondary-on-light


#565656

$luci-text-color-selected-on-light


#7E5FD4

$luci-text-color-selected-on-dark


#FFFFFF

$luci-text-color-selected-on-medium-blue


#FFFFFF

$luci-text-color-selected-on-dark-blue


#FFFFFF

$luci-text-color-selected-on-purple


#FFFFFF

$luci-text-color-disabled-on-light


#C2C2C2

$luci-text-color-disabled-on-dark


#9C9C9C

$luci-text-color-disabled-on-medium-blue


#9C9C9C

$luci-text-color-disabled-on-dark-blue


#9C9C9C

$luci-text-color-disabled-on-purple


#9C9C9C

$luci-text-color-footer-supportive


#B4DF24

Feedback Color

Use these tokens only for feedback colors.

Name Value

$luci-feedback-color-information-primary


#252525

$luci-feedback-color-information-chart


#B1B3BE

$luci-feedback-color-information-background


#FFF7C0

$luci-feedback-color-error-primary


#DA1E21

$luci-feedback-color-error-chart


#FF4548

$luci-feedback-color-error-background


#FCCDCE

$luci-feedback-color-warning-primary


#F88400

$luci-feedback-color-warning-chart


#FFAC00

$luci-feedback-color-warning-background


#FFE1A1

$luci-feedback-color-success-primary


#498128

$luci-feedback-color-success-chart


#6FC13E

$luci-feedback-color-success-background


#B4E697

Interactive Color

Use these tokens only for state colors.

Name Value

$luci-interactive-color-default


#0067C5

$luci-interactive-color-hover


#1E4A93

$luci-interactive-color-active


#173E77

$luci-interactive-color-focus


#4FAAFF

Use these tokens only for link colors.

Name Value

$luci-link-color-default-on-light


#0067C5

$luci-link-color-default-on-dark


#FFFFFF

$luci-link-color-default-on-medium-blue


#FFFFFF

$luci-link-color-default-on-dark-blue


#FFFFFF

$luci-link-color-default-on-purple


#FFFFFF

$luci-link-color-hover-on-light


#1E4A93

$luci-link-color-hover-on-dark


#F2F2F2

$luci-link-color-hover-on-medium-blue


#F2F2F2

$luci-link-color-hover-on-dark-blue


#F2F2F2

$luci-link-color-hover-on-purple


#F2F2F2

$luci-link-color-active-on-light


#173E77

$luci-link-color-active-on-dark


#F2F2F2

$luci-link-color-active-on-medium-blue


#F2F2F2

$luci-link-color-active-on-dark-blue


#F2F2F2

$luci-link-color-active-on-purple


#F2F2F2

$luci-link-color-visited-on-light


#1E4A93

$luci-link-color-visited-on-dark


#F2F2F2

$luci-link-color-visited-on-medium-blue


#F2F2F2

$luci-link-color-visited-on-dark-blue


#F2F2F2

$luci-link-color-visited-on-purple


#F2F2F2

Charts and Graphs

Use these tokens only for charts and graphs.

Name Value

$luci-chart-color-1


#61DCE8

$luci-chart-color-2


#01ADBD

$luci-chart-color-3


#1E4A93

$luci-chart-color-4


#0072D9

$luci-chart-color-5


#88C5FF

$luci-chart-color-6


#B1B3BE

$luci-chart-color-7


#FFAC00

$luci-chart-color-8


#C66900

$luci-chart-color-9


#D71ECD

$luci-chart-color-10


#9F82F1

$luci-chart-color-threshold-moderate


#FFF6E2

$luci-chart-color-threshold-severe


#FFE7E8

$luci-chart-end-point-border-radius

50%

$luci-chart-end-point-outline-size

3px

$luci-chart-end-point-hover-opacity

.25

$luci-chart-hover-bar-color


#F6F6F6

Icon Color

Use these tokens only for icon colors.

Name Value

$luci-icon-color-default


#7E5FD4

$luci-icon-color-hover


#584198

$luci-icon-color-on-interactive


#FFFFFF

$luci-icon-color-static


#454545

$luci-icon-color-disabled


#C2C2C2

$luci-icon-color-error


#DA1E21

$luci-icon-color-success


#498128

$luci-icon-color-warning


#F88400

Icon Size

Use these tokens to size icons.

Name Value

$luci-icon-size-xs

16px

$luci-icon-size-sm

20px

$luci-icon-size-md

24px

$luci-icon-size-lg

32px

$luci-icon-size-xl

48px

Border

Use these tokens to apply border radius, width and color.

Name Value

$luci-border-radius-default

2px

$luci-border-separator-on-light-color

#C2C2C2

$luci-border-separator-on-light

solid 1px #C2C2C2

$luci-border-separator-on-dark-color

#888888

$luci-border-separator-on-dark

solid 1px #888888

$luci-border-separator-on-medium-blue-color

#888888

$luci-border-separator-medium-blue

solid 1px #888888

$luci-border-separator-on-dark-blue-color

#888888

$luci-border-separator-dark-blue

solid 1px #888888

$luci-border-separator-on-purple-color

#888888

$luci-border-separator-purple

solid 1px #888888

$luci-border-component-on-light-color

#D7D7D7

$luci-border-component-on-light

solid 1px #D7D7D7

$luci-border-component-on-dark-color

#9C9C9C

$luci-border-component-on-dark

solid 1px #9C9C9C

$luci-border-component-on-medium-blue-color

#9C9C9C

$luci-border-component-medium-blue

solid 1px #9C9C9C

$luci-border-component-on-dark-blue-color

#9C9C9C

$luci-border-component-dark-blue

solid 1px #9C9C9C

$luci-border-component-on-purple-color

#9C9C9C

$luci-border-component-purple

solid 1px #9C9C9C

Box Shadow

Use this token to apply an active state box shadow to form components.

Name Value

$luci-box-shadow-focus

0 0 0 2px #4FAAFF

$luci-box-shadow-default

0 8px 14px 5px rgba(#000000, .25)

$luci-box-shadow-hard

[object Object]

Font

Use these tokens to apply font style, weight, family and line-height.

Name Value

$luci-font-family-sans-serif

'Source Sans Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif

$luci-font-family-monospace

'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace

$luci-font-weight-light

300

$luci-font-weight-regular

400

$luci-font-weight-semi-bold

600

$luci-font-weight-bold

700

$luci-font-size-xs

12px

$luci-font-size-sm

14px

$luci-font-size-md

16px

$luci-font-size-lg

24px

$luci-font-size-h1-sm

42px

$luci-font-size-h1-md

46px

$luci-font-size-h1-lg

52px

$luci-font-size-h2-sm

32px

$luci-font-size-h2-md

36px

$luci-font-size-h2-lg

40px

$luci-font-size-h3-sm

28px

$luci-font-size-h3-md

30px

$luci-font-size-h3-lg

32px

$luci-font-size-h4-lg

24px

$luci-font-size-h5-lg

20px

$luci-font-size-h6-lg

18px

$luci-font-size-lead-sm

16px

$luci-font-size-lead-md

20px

$luci-font-size-lead-lg

24px

$luci-font-size-p-sm

16px

$luci-font-size-p-md

16px

$luci-font-size-p-lg

18px

$luci-font-line-height-body

1.5

$luci-font-line-height-heading

1.3

$luci-font-line-height-h5

1.2

Spacing

Use these tokens to apply vertical or horizontal space between components and internal padding within components.

Name Value

$luci-space-xxs

4px

$luci-space-xs

8px

$luci-space-sm

12px

$luci-space-md

16px

$luci-space-lg

24px

$luci-space-xl

32px

$luci-space-xxl

48px

$luci-space-xxxl

64px

$luci-space-inset-xxs

4px

$luci-space-inset-xs

8px

$luci-space-inset-sm

12px

$luci-space-inset-md

16px

$luci-space-inset-lg

24px

$luci-space-inset-xl

32px

$luci-space-inset-xxl

48px

$luci-space-inset-xxxl

64px

$luci-space-inset-stretch-sm

8px 12px

$luci-space-inset-stretch-md

12px 32px

$luci-space-inset-stretch-lg

16px 32px

$luci-space-stack-xxs

0 0 4px

$luci-space-stack-xs

0 0 8px

$luci-space-stack-sm

0 0 12px

$luci-space-stack-md

0 0 16px

$luci-space-stack-lg

0 0 24px

$luci-space-stack-xl

0 0 32px

$luci-space-stack-xxl

0 0 48px

$luci-space-stack-xxxl

0 0 64px

$luci-space-stack-inline-left-xxs

0 4px 0 0

$luci-space-stack-inline-left-xs

0 8px 0 0

$luci-space-stack-inline-left-sm

0 12px 0 0

$luci-space-stack-inline-left-md

0 16px 0 0

$luci-space-stack-inline-left-lg

0 24px 0 0

$luci-space-stack-inline-left-xl

0 32px 0 0

$luci-space-stack-inline-left-xxl

0 48px 0 0

$luci-space-stack-inline-left-xxxl

0 64px 0 0

$luci-space-stack-inline-right-xxs

0 0 0 4px

$luci-space-stack-inline-right-xs

0 0 0 8px

$luci-space-stack-inline-right-sm

0 0 0 12px

$luci-space-stack-inline-right-md

0 0 0 16px

$luci-space-stack-inline-right-lg

0 0 0 24px

$luci-space-stack-inline-right-xl

0 0 0 32px

$luci-space-stack-inline-right-xxl

0 0 0 48px

$luci-space-stack-inline-right-xxxl

0 0 0 64px

Grid

Use these tokens to create spacing and columns in a layout grid.

Name Value

$luci-grid-gap

40px

$luci-grid-column-width

70px

$luci-grid-columns

12

$luci-grid-container-xl

1280px

Breakpoint

Use these tokens in media queries.

Name Value

$luci-breakpoint-sm

420px

$luci-breakpoint-md

768px

$luci-breakpoint-lg

992px

$luci-breakpoint-xl

1200px

Z-Index

Use these tokens to set the z-index of a component.

Name Value

$luci-z-index-low

1

$luci-z-index-molehill

10

$luci-z-index-mountain

100

$luci-z-index-sticky

200

$luci-z-index-modal-overlay

800

$luci-z-index-modal-content

810

$luci-z-index-top-of-the-world

900

Color Options

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

$luci-color-white


#FFFFFF

$luci-color-black


#000000

$luci-color-blue-28


#173E77

$luci-color-blue-35


#1E4A93

$luci-color-blue-39


#0067C5

$luci-color-blue-65


#4FAAFF

$luci-color-blue-77


#88C5FF

$luci-color-neutral-7


#131313

$luci-color-neutral-15


#252525

$luci-color-neutral-27


#454545

$luci-color-neutral-34


#565656

$luci-color-neutral-53


#888888

$luci-color-neutral-61


#9C9C9C

$luci-color-neutral-76


#C2C2C2

$luci-color-neutral-84


#D7D7D7

$luci-color-neutral-85


#F2F2F2

$luci-color-neutral-96


#F6F6F6

$luci-color-green-33


#498128

$luci-color-green-35


#7E9C18

$luci-color-green-50


#6FC13E

$luci-color-green-51


#B4DF24

$luci-color-green-75


#B4E697

$luci-color-purple-25


#2F1C65

$luci-color-purple-43


#584198

$luci-color-purple-60


#7E5FD4

$luci-color-orange-49


#F88400

$luci-color-orange-50


#FFAC00

$luci-color-orange-82


#FFE1A1

$luci-color-red-49


#DA1E21

$luci-color-red-64


#FF4548

$luci-color-red-90


#FCCDCE