Tokens

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.

Overview

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.

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-secondary-on-light


#565656

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


#7E5FD4

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


#FFFFFF

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


#C2C2C2

$luci-text-color-footer-supportive


#B4DF24

Feedback Color

Use these tokens only for feedback colors.

Name Value

$luci-feedback-color-error-primary


#DA1E21

$luci-feedback-color-error-chart


#FF4548

$luci-feedback-color-error-background


#FCCDCE

$luci-feedback-color-success-primary


#498128

$luci-feedback-color-success-chart


#6FC13E

$luci-feedback-color-success-background


#B4E697

$luci-feedback-color-warning-primary


#F88400

$luci-feedback-color-warning-chart


#FFAC00

$luci-feedback-color-warning-background


#FFE1A1

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-hover-on-light


#1E4A93

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


#F2F2F2

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


#173E77

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


#F2F2F2

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


#1E4A93

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


#F2F2F2

Icon Color

Use these tokens only for interactive icons.

Name Value

$luci-icon-color-default


#7E5FD4

$luci-icon-color-hover


#584198

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-component-on-light-color

#D7D7D7

$luci-border-component-on-light

solid 1px #D7D7D7

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 $luci-interactive-color-focus;

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

52px

$luci-font-size-h2

40px

$luci-font-size-h3

32px

$luci-font-size-h4

24px

$luci-font-size-h5

20px

$luci-font-size-h6

18px

$luci-font-line-height-body

1.5

$luci-font-line-height-heading

1.3

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

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-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