Token overview
An overview of all available design tokens. We use CamelCase formatting for JavaScript and kebab-case formatting for SASS.
BorderRadius
We use these tokens to define the border-radius of the Atlas components.
info
To find more about the border-radius, visit appearance section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| BorderRadiusXSmall | border-radius-x-small | 2px | |
| BorderRadiusSmall | border-radius-small | 4px | |
| BorderRadiusMedium | border-radius-medium | 6px | |
| BorderRadiusLarge | border-radius-large | 8px | |
| BorderRadiusXLarge | border-radius-x-large | 12px |
Breakpoint
We use breakpoint tokens to define responsive css values.
| JavaScript | SASS | Value |
|---|---|---|
| BreakpointXSmallWidth | breakpoint-x-small-width | 0px |
| BreakpointXSmallWidthFluid | breakpoint-x-small-width-fluid | 100% |
| BreakpointXSmallWidthFixed | breakpoint-x-small-width-fixed | 100% |
| BreakpointXSmallGutter | breakpoint-x-small-gutter | 8px |
| BreakpointXSmallMargin | breakpoint-x-small-margin | 16px |
| BreakpointSmallWidth | breakpoint-small-width | 480px |
| BreakpointSmallWidthFluid | breakpoint-small-width-fluid | 100% |
| BreakpointSmallWidthFixed | breakpoint-small-width-fixed | 100% |
| BreakpointSmallGutter | breakpoint-small-gutter | 12px |
| BreakpointSmallMargin | breakpoint-small-margin | 16px |
| BreakpointMediumWidth | breakpoint-medium-width | 720px |
| BreakpointMediumWidthFluid | breakpoint-medium-width-fluid | 100% |
| BreakpointMediumWidthFixed | breakpoint-medium-width-fixed | 100% |
| BreakpointMediumGutter | breakpoint-medium-gutter | 16px |
| BreakpointMediumMargin | breakpoint-medium-margin | 24px |
| BreakpointLargeWidth | breakpoint-large-width | 1200px |
| BreakpointLargeWidthFluid | breakpoint-large-width-fluid | 100% |
| BreakpointLargeWidthFixed | breakpoint-large-width-fixed | 1080px |
| BreakpointLargeGutter | breakpoint-large-gutter | 24px |
| BreakpointLargeMargin | breakpoint-large-margin | 32px auto |
| BreakpointXLargeWidth | breakpoint-x-large-width | 1400px |
| BreakpointXLargeWidthFluid | breakpoint-x-large-width-fluid | 100% |
| BreakpointXLargeWidthFixed | breakpoint-x-large-width-fixed | 1272px |
| BreakpointXLargeGutter | breakpoint-x-large-gutter | 24px |
| BreakpointXLargeMargin | breakpoint-x-large-margin | 32px auto |
Button
We use these layer styles on everything that resembles a button: Buttons but also Segmented Button as well as checked Check Boxes and Radio Buttons.
| JavaScript | SASS | Value |
|---|---|---|
| ButtonPrimaryDefaultBackgroundColor | button-primary-default-background-color | #255eee |
| ButtonPrimaryDefaultBorder | button-primary-default-border | 1px solid #1f51d9 |
| ButtonPrimaryDefaultBoxShadow | button-primary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonPrimaryHoverBackgroundColor | button-primary-hover-background-color | #1944c3 |
| ButtonPrimaryHoverBorder | button-primary-hover-border | 1px solid #1237ae |
| ButtonPrimaryHoverBoxShadow | button-primary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonPrimaryActiveBackgroundColor | button-primary-active-background-color | #1237ae |
| ButtonPrimaryActiveBorder | button-primary-active-border | 1px solid #0c2a98 |
| ButtonPrimaryActiveBoxShadow | button-primary-active-box-shadow | none |
| ButtonPrimaryDisabledBackgroundColor | button-primary-disabled-background-color | #255eee |
| ButtonPrimaryDisabledBorder | button-primary-disabled-border | 1px solid #1f51d9 |
| ButtonPrimaryDisabledBoxShadow | button-primary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonSecondaryDefaultBackgroundColor | button-secondary-default-background-color | #f4f6f9 |
| ButtonSecondaryDefaultBorder | button-secondary-default-border | 1px solid #e0e2ec |
| ButtonSecondaryDefaultBoxShadow | button-secondary-default-box-shadow | 0 1px 1px 0 rgba(110, 116, 146, 0.12) |
| ButtonSecondaryHoverBackgroundColor | button-secondary-hover-background-color | #e0e2ec |
| ButtonSecondaryHoverBorder | button-secondary-hover-border | 1px solid #b5bad0 |
| ButtonSecondaryHoverBoxShadow | button-secondary-hover-box-shadow | 0 1px 1px 0 rgba(110, 116, 146, 0.12) |
| ButtonSecondaryActiveBackgroundColor | button-secondary-active-background-color | #cdd0e0 |
| ButtonSecondaryActiveBorder | button-secondary-active-border | 1px solid #9ca2bd |
| ButtonSecondaryActiveBoxShadow | button-secondary-active-box-shadow | none |
| ButtonSecondaryDisabledBackgroundColor | button-secondary-disabled-background-color | #f4f6f9 |
| ButtonSecondaryDisabledBorder | button-secondary-disabled-border | 1px solid #e0e2ec |
| ButtonSecondaryDisabledBoxShadow | button-secondary-disabled-box-shadow | none |
| ButtonTertiaryDefaultBackgroundColor | button-tertiary-default-background-color | transparent |
| ButtonTertiaryDefaultBorder | button-tertiary-default-border | 1px solid rgba(#9ca2bd, 0.35) |
| ButtonTertiaryDefaultBoxShadow | button-tertiary-default-box-shadow | none |
| ButtonTertiaryHoverBackgroundColor | button-tertiary-hover-background-color | #f4f6f9 |
| ButtonTertiaryHoverBorder | button-tertiary-hover-border | 1px solid rgba(#9ca2bd, 0.35) |
| ButtonTertiaryHoverBoxShadow | button-tertiary-hover-box-shadow | none |
| ButtonTertiaryActiveBackgroundColor | button-tertiary-active-background-color | #eceef4 |
| ButtonTertiaryActiveBorder | button-tertiary-active-border | 1px solid rgba(#9ca2bd, 0.35) |
| ButtonTertiaryActiveBoxShadow | button-tertiary-active-box-shadow | none |
| ButtonHighlightedDefaultBackgroundColor | button-highlighted-default-background-color | #ddebf9 |
| ButtonHighlightedDefaultBorder | button-highlighted-default-border | 1px solid rgba(#83b0f1, 0.35) |
| ButtonHighlightedDefaultBoxShadow | button-highlighted-default-box-shadow | none |
| ButtonHighlightedHoverBackgroundColor | button-highlighted-hover-background-color | #bdd7f6 |
| ButtonHighlightedHoverBorder | button-highlighted-hover-border | 1px solid rgba(#83b0f1, 0.35) |
| ButtonHighlightedHoverBoxShadow | button-highlighted-hover-box-shadow | none |
| ButtonHighlightedActiveBackgroundColor | button-highlighted-active-background-color | #a0c3f3 |
| ButtonHighlightedActiveBorder | button-highlighted-active-border | 1px solid rgba(#83b0f1, 0.35) |
| ButtonHighlightedActiveBoxShadow | button-highlighted-active-box-shadow | none |
| ButtonDarkDefaultBackgroundColor | button-dark-default-background-color | #353a52 |
| ButtonDarkDefaultBorder | button-dark-default-border | 1px solid #0b0d18 |
| ButtonDarkDefaultBoxShadow | button-dark-default-box-shadow | 0 1px 1px 0 rgba(249, 250, 252, 0.12) |
| ButtonDarkHoverBackgroundColor | button-dark-hover-background-color | #434862 |
| ButtonDarkHoverBorder | button-dark-hover-border | 1px solid #0b0d18 |
| ButtonDarkHoverBoxShadow | button-dark-hover-box-shadow | 0 1px 1px 0 rgba(249, 250, 252, 0.12) |
| ButtonDarkActiveBackgroundColor | button-dark-active-background-color | #565c78 |
| ButtonDarkActiveBorder | button-dark-active-border | 1px solid #0b0d18 |
| ButtonDarkActiveBoxShadow | button-dark-active-box-shadow | none |
| ButtonDarkDisabledBackgroundColor | button-dark-disabled-background-color | #353a52 |
| ButtonDarkDisabledBorder | button-dark-disabled-border | 1px solid #121523 |
| ButtonDarkDisabledBoxShadow | button-dark-disabled-box-shadow | none |
| ButtonNegativeDefaultBackgroundColor | button-negative-default-background-color | #cb3763 |
| ButtonNegativeDefaultBorder | button-negative-default-border | 1px solid #9e204c |
| ButtonNegativeDefaultBoxShadow | button-negative-default-box-shadow | 0 1px 1px 0 rgba(102, 8, 53, 0.16) |
| ButtonNegativeHoverBackgroundColor | button-negative-hover-background-color | #9e204c |
| ButtonNegativeHoverBorder | button-negative-hover-border | 1px solid #821441 |
| ButtonNegativeHoverBoxShadow | button-negative-hover-box-shadow | 0 1px 1px 0 rgba(102, 8, 53, 0.16) |
| ButtonNegativeActiveBackgroundColor | button-negative-active-background-color | #821441 |
| ButtonNegativeActiveBorder | button-negative-active-border | 1px solid #660835 |
| ButtonNegativeActiveBoxShadow | button-negative-active-box-shadow | none |
| ButtonNegativeDisabledBackgroundColor | button-negative-disabled-background-color | #cb3763 |
| ButtonNegativeDisabledBorder | button-negative-disabled-border | 1px solid #9e204c |
| ButtonNegativeDisabledBoxShadow | button-negative-disabled-box-shadow | 0 1px 1px 0 rgba(102, 8, 53, 0.16) |
| ButtonFloatingDefaultBackgroundColor | button-floating-default-background-color | #255eee |
| ButtonFloatingDefaultBorder | button-floating-default-border | 1px solid #1f51d9 |
| ButtonFloatingDefaultBoxShadow | button-floating-default-box-shadow | 0 2px 8px 0 rgba(110, 116, 146, 0.2) |
| ButtonFloatingHoverBackgroundColor | button-floating-hover-background-color | #1944c3 |
| ButtonFloatingHoverBorder | button-floating-hover-border | 1px solid #1237ae |
| ButtonFloatingHoverBoxShadow | button-floating-hover-box-shadow | 0 2px 8px 0 rgba(110, 116, 146, 0.2) |
| ButtonFloatingActiveBackgroundColor | button-floating-active-background-color | #1237ae |
| ButtonFloatingActiveBorder | button-floating-active-border | 1px solid #0c2a98 |
| ButtonFloatingActiveBoxShadow | button-floating-active-box-shadow | none |
| ButtonFloatingDisabledBackgroundColor | button-floating-disabled-background-color | #255eee |
| ButtonFloatingDisabledBorder | button-floating-disabled-border | 1px solid #1f51d9 |
| ButtonFloatingDisabledBoxShadow | button-floating-disabled-box-shadow | none |
| ButtonFeedbackInfoPrimaryDefaultBackgroundColor | button-feedback-info-primary-default-background-color | #bdd7f6 |
| ButtonFeedbackInfoPrimaryDefaultBorder | button-feedback-info-primary-default-border | 1px solid #83b0f1 |
| ButtonFeedbackInfoPrimaryDefaultBoxShadow | button-feedback-info-primary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackInfoPrimaryHoverBackgroundColor | button-feedback-info-primary-hover-background-color | #a0c3f3 |
| ButtonFeedbackInfoPrimaryHoverBorder | button-feedback-info-primary-hover-border | 1px solid #6495f0 |
| ButtonFeedbackInfoPrimaryHoverBoxShadow | button-feedback-info-primary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackInfoPrimaryActiveBackgroundColor | button-feedback-info-primary-active-background-color | #83b0f1 |
| ButtonFeedbackInfoPrimaryActiveBorder | button-feedback-info-primary-active-border | 1px solid #457aef |
| ButtonFeedbackInfoPrimaryActiveBoxShadow | button-feedback-info-primary-active-box-shadow | none |
| ButtonFeedbackInfoPrimaryDisabledBackgroundColor | button-feedback-info-primary-disabled-background-color | #bdd7f6 |
| ButtonFeedbackInfoPrimaryDisabledBorder | button-feedback-info-primary-disabled-border | 1px solid #83b0f1 |
| ButtonFeedbackInfoPrimaryDisabledBoxShadow | button-feedback-info-primary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackInfoSecondaryDefaultBackgroundColor | button-feedback-info-secondary-default-background-color | transparent |
| ButtonFeedbackInfoSecondaryDefaultBorder | button-feedback-info-secondary-default-border | 1px solid #83b0f1 |
| ButtonFeedbackInfoSecondaryDefaultBoxShadow | button-feedback-info-secondary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackInfoSecondaryHoverBackgroundColor | button-feedback-info-secondary-hover-background-color | #bdd7f6 |
| ButtonFeedbackInfoSecondaryHoverBorder | button-feedback-info-secondary-hover-border | 1px solid #6495f0 |
| ButtonFeedbackInfoSecondaryHoverBoxShadow | button-feedback-info-secondary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackInfoSecondaryActiveBackgroundColor | button-feedback-info-secondary-active-background-color | #a0c3f3 |
| ButtonFeedbackInfoSecondaryActiveBorder | button-feedback-info-secondary-active-border | 1px solid #457aef |
| ButtonFeedbackInfoSecondaryActiveBoxShadow | button-feedback-info-secondary-active-box-shadow | none |
| ButtonFeedbackInfoSecondaryDisabledBackgroundColor | button-feedback-info-secondary-disabled-background-color | transparent |
| ButtonFeedbackInfoSecondaryDisabledBorder | button-feedback-info-secondary-disabled-border | 1px solid #83b0f1 |
| ButtonFeedbackInfoSecondaryDisabledBoxShadow | button-feedback-info-secondary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativePrimaryDefaultBackgroundColor | button-feedback-negative-primary-default-background-color | #ffdee7 |
| ButtonFeedbackNegativePrimaryDefaultBorder | button-feedback-negative-primary-default-border | 1px solid #f9acc1 |
| ButtonFeedbackNegativePrimaryDefaultBoxShadow | button-feedback-negative-primary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativePrimaryHoverBackgroundColor | button-feedback-negative-primary-hover-background-color | #f9ceda |
| ButtonFeedbackNegativePrimaryHoverBorder | button-feedback-negative-primary-hover-border | 1px solid #fb94af |
| ButtonFeedbackNegativePrimaryHoverBoxShadow | button-feedback-negative-primary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativePrimaryActiveBackgroundColor | button-feedback-negative-primary-active-background-color | #f9acc1 |
| ButtonFeedbackNegativePrimaryActiveBorder | button-feedback-negative-primary-active-border | 1px solid #f97194 |
| ButtonFeedbackNegativePrimaryActiveBoxShadow | button-feedback-negative-primary-active-box-shadow | none |
| ButtonFeedbackNegativePrimaryDisabledBackgroundColor | button-feedback-negative-primary-disabled-background-color | #ffdee7 |
| ButtonFeedbackNegativePrimaryDisabledBorder | button-feedback-negative-primary-disabled-border | 1px solid #f9acc1 |
| ButtonFeedbackNegativePrimaryDisabledBoxShadow | button-feedback-negative-primary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativeSecondaryDefaultBackgroundColor | button-feedback-negative-secondary-default-background-color | transparent |
| ButtonFeedbackNegativeSecondaryDefaultBorder | button-feedback-negative-secondary-default-border | 1px solid #f9acc1 |
| ButtonFeedbackNegativeSecondaryDefaultBoxShadow | button-feedback-negative-secondary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativeSecondaryHoverBackgroundColor | button-feedback-negative-secondary-hover-background-color | #ffdee7 |
| ButtonFeedbackNegativeSecondaryHoverBorder | button-feedback-negative-secondary-hover-border | 1px solid #fb94af |
| ButtonFeedbackNegativeSecondaryHoverBoxShadow | button-feedback-negative-secondary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackNegativeSecondaryActiveBackgroundColor | button-feedback-negative-secondary-active-background-color | #f9ceda |
| ButtonFeedbackNegativeSecondaryActiveBorder | button-feedback-negative-secondary-active-border | 1px solid #f97194 |
| ButtonFeedbackNegativeSecondaryActiveBoxShadow | button-feedback-negative-secondary-active-box-shadow | none |
| ButtonFeedbackNegativeSecondaryDisabledBackgroundColor | button-feedback-negative-secondary-disabled-background-color | transparent |
| ButtonFeedbackNegativeSecondaryDisabledBorder | button-feedback-negative-secondary-disabled-border | 1px solid #f9acc1 |
| ButtonFeedbackNegativeSecondaryDisabledBoxShadow | button-feedback-negative-secondary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningPrimaryDefaultBackgroundColor | button-feedback-warning-primary-default-background-color | #f6e3c7 |
| ButtonFeedbackWarningPrimaryDefaultBorder | button-feedback-warning-primary-default-border | 1px solid #f6cd90 |
| ButtonFeedbackWarningPrimaryDefaultBoxShadow | button-feedback-warning-primary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningPrimaryHoverBackgroundColor | button-feedback-warning-primary-hover-background-color | #f5daae |
| ButtonFeedbackWarningPrimaryHoverBorder | button-feedback-warning-primary-hover-border | 1px solid #f4bf6e |
| ButtonFeedbackWarningPrimaryHoverBoxShadow | button-feedback-warning-primary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningPrimaryActiveBackgroundColor | button-feedback-warning-primary-active-background-color | #f6cd90 |
| ButtonFeedbackWarningPrimaryActiveBorder | button-feedback-warning-primary-active-border | 1px solid #f1b251 |
| ButtonFeedbackWarningPrimaryActiveBoxShadow | button-feedback-warning-primary-active-box-shadow | none |
| ButtonFeedbackWarningPrimaryDisabledBackgroundColor | button-feedback-warning-primary-disabled-background-color | #f6e3c7 |
| ButtonFeedbackWarningPrimaryDisabledBorder | button-feedback-warning-primary-disabled-border | 1px solid #f6cd90 |
| ButtonFeedbackWarningPrimaryDisabledBoxShadow | button-feedback-warning-primary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningSecondaryDefaultBackgroundColor | button-feedback-warning-secondary-default-background-color | transparent |
| ButtonFeedbackWarningSecondaryDefaultBorder | button-feedback-warning-secondary-default-border | 1px solid #f6cd90 |
| ButtonFeedbackWarningSecondaryDefaultBoxShadow | button-feedback-warning-secondary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningSecondaryHoverBackgroundColor | button-feedback-warning-secondary-hover-background-color | #f6e3c7 |
| ButtonFeedbackWarningSecondaryHoverBorder | button-feedback-warning-secondary-hover-border | 1px solid #f4bf6e |
| ButtonFeedbackWarningSecondaryHoverBoxShadow | button-feedback-warning-secondary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackWarningSecondaryActiveBackgroundColor | button-feedback-warning-secondary-active-background-color | #f5daae |
| ButtonFeedbackWarningSecondaryActiveBorder | button-feedback-warning-secondary-active-border | 1px solid #f1b251 |
| ButtonFeedbackWarningSecondaryActiveBoxShadow | button-feedback-warning-secondary-active-box-shadow | none |
| ButtonFeedbackWarningSecondaryDisabledBackgroundColor | button-feedback-warning-secondary-disabled-background-color | transparent |
| ButtonFeedbackWarningSecondaryDisabledBorder | button-feedback-warning-secondary-disabled-border | 1px solid #f6cd90 |
| ButtonFeedbackWarningSecondaryDisabledBoxShadow | button-feedback-warning-secondary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositivePrimaryDefaultBackgroundColor | button-feedback-positive-primary-default-background-color | #b0f4e7 |
| ButtonFeedbackPositivePrimaryDefaultBorder | button-feedback-positive-primary-default-border | 1px solid #92e1d1 |
| ButtonFeedbackPositivePrimaryDefaultBoxShadow | button-feedback-positive-primary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositivePrimaryHoverBackgroundColor | button-feedback-positive-primary-hover-background-color | #a1ebdc |
| ButtonFeedbackPositivePrimaryHoverBorder | button-feedback-positive-primary-hover-border | 1px solid #65d4c0 |
| ButtonFeedbackPositivePrimaryHoverBoxShadow | button-feedback-positive-primary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositivePrimaryActiveBackgroundColor | button-feedback-positive-primary-active-background-color | #92e1d1 |
| ButtonFeedbackPositivePrimaryActiveBorder | button-feedback-positive-primary-active-border | 1px solid #38c8b0 |
| ButtonFeedbackPositivePrimaryActiveBoxShadow | button-feedback-positive-primary-active-box-shadow | none |
| ButtonFeedbackPositivePrimaryDisabledBackgroundColor | button-feedback-positive-primary-disabled-background-color | #b0f4e7 |
| ButtonFeedbackPositivePrimaryDisabledBorder | button-feedback-positive-primary-disabled-border | 1px solid #92e1d1 |
| ButtonFeedbackPositivePrimaryDisabledBoxShadow | button-feedback-positive-primary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositiveSecondaryDefaultBackgroundColor | button-feedback-positive-secondary-default-background-color | transparent |
| ButtonFeedbackPositiveSecondaryDefaultBorder | button-feedback-positive-secondary-default-border | 1px solid #92e1d1 |
| ButtonFeedbackPositiveSecondaryDefaultBoxShadow | button-feedback-positive-secondary-default-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositiveSecondaryHoverBackgroundColor | button-feedback-positive-secondary-hover-background-color | #b0f4e7 |
| ButtonFeedbackPositiveSecondaryHoverBorder | button-feedback-positive-secondary-hover-border | 1px solid #65d4c0 |
| ButtonFeedbackPositiveSecondaryHoverBoxShadow | button-feedback-positive-secondary-hover-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
| ButtonFeedbackPositiveSecondaryActiveBackgroundColor | button-feedback-positive-secondary-active-background-color | #a1ebdc |
| ButtonFeedbackPositiveSecondaryActiveBorder | button-feedback-positive-secondary-active-border | 1px solid #38c8b0 |
| ButtonFeedbackPositiveSecondaryActiveBoxShadow | button-feedback-positive-secondary-active-box-shadow | none |
| ButtonFeedbackPositiveSecondaryDisabledBackgroundColor | button-feedback-positive-secondary-disabled-background-color | transparent |
| ButtonFeedbackPositiveSecondaryDisabledBorder | button-feedback-positive-secondary-disabled-border | 1px solid #92e1d1 |
| ButtonFeedbackPositiveSecondaryDisabledBoxShadow | button-feedback-positive-secondary-disabled-box-shadow | 0 1px 1px 0 rgba(12, 42, 152, 0.16) |
Color
We defined color presets in this library which you should use with the color picker when you apply colors. The names reflect on the purpose of each color. Neutral is used for pretty much all parts of the UI, Primary is reserved to mark user selection or primary actions, Negative only for destructive actions (eg. delete), Warning for messages that infor the user of important states or events and Positive to mark successful or completed interactions.
info
To find more about the colors, visit color section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| ColorWhite | color-white | #ffffff | |
| ColorBlack | color-black | #222222 | |
| ColorFocus | color-focus | #1a62ff | |
| ColorNeutral5 | color-neutral-5 | #f9fafc | |
| ColorNeutral10 | color-neutral-10 | #f4f6f9 | |
| ColorNeutral20 | color-neutral-20 | #eceef4 | |
| ColorNeutral30 | color-neutral-30 | #e0e2ec | |
| ColorNeutral40 | color-neutral-40 | #cdd0e0 | |
| ColorNeutral50 | color-neutral-50 | #b5bad0 | |
| ColorNeutral60 | color-neutral-60 | #9ca2bd | |
| ColorNeutral70 | color-neutral-70 | #848ba9 | |
| ColorNeutral80 | color-neutral-80 | #6e7492 | |
| ColorNeutral90 | color-neutral-90 | #565c78 | |
| ColorNeutral100 | color-neutral-100 | #434862 | |
| ColorNeutral110 | color-neutral-110 | #353a52 | |
| ColorNeutral120 | color-neutral-120 | #2a2f45 | |
| ColorNeutral130 | color-neutral-130 | #21253a | |
| ColorNeutral140 | color-neutral-140 | #191d2f | |
| ColorNeutral150 | color-neutral-150 | #121523 | |
| ColorNeutral160 | color-neutral-160 | #0b0d18 | |
| ColorPrimary5 | color-primary-5 | #f3f7fe | |
| ColorPrimary10 | color-primary-10 | #ecf3fc | |
| ColorPrimary20 | color-primary-20 | #ddebf9 | |
| ColorPrimary30 | color-primary-30 | #bdd7f6 | |
| ColorPrimary40 | color-primary-40 | #a0c3f3 | |
| ColorPrimary50 | color-primary-50 | #83b0f1 | |
| ColorPrimary60 | color-primary-60 | #6495f0 | |
| ColorPrimary70 | color-primary-70 | #457aef | |
| ColorPrimary80 | color-primary-80 | #255eee | |
| ColorPrimary90 | color-primary-90 | #1f51d9 | |
| ColorPrimary100 | color-primary-100 | #1944c3 | |
| ColorPrimary110 | color-primary-110 | #1237ae | |
| ColorPrimary120 | color-primary-120 | #0c2a98 | |
| ColorPrimary130 | color-primary-130 | #0c2663 | |
| ColorPrimary140 | color-primary-140 | #051844 | |
| ColorPrimary150 | color-primary-150 | #041335 | |
| ColorPrimary160 | color-primary-160 | #020c21 | |
| ColorNegative5 | color-negative-5 | #fff6f8 | |
| ColorNegative10 | color-negative-10 | #ffeff3 | |
| ColorNegative20 | color-negative-20 | #ffe8ee | |
| ColorNegative30 | color-negative-30 | #ffdee7 | |
| ColorNegative40 | color-negative-40 | #f9ceda | |
| ColorNegative50 | color-negative-50 | #f9acc1 | |
| ColorNegative60 | color-negative-60 | #fb94af | |
| ColorNegative70 | color-negative-70 | #f97194 | |
| ColorNegative80 | color-negative-80 | #f84d79 | |
| ColorNegative90 | color-negative-90 | #cb3763 | |
| ColorNegative100 | color-negative-100 | #9e204c | |
| ColorNegative110 | color-negative-110 | #821441 | |
| ColorNegative120 | color-negative-120 | #660835 | |
| ColorNegative130 | color-negative-130 | #56072c | |
| ColorNegative140 | color-negative-140 | #450524 | |
| ColorNegative150 | color-negative-150 | #35041b | |
| ColorNegative160 | color-negative-160 | #240212 | |
| ColorWarning5 | color-warning-5 | #faf7f4 | |
| ColorWarning10 | color-warning-10 | #fbf2e6 | |
| ColorWarning20 | color-warning-20 | #f9ebd6 | |
| ColorWarning30 | color-warning-30 | #f6e3c7 | |
| ColorWarning40 | color-warning-40 | #f5daae | |
| ColorWarning50 | color-warning-50 | #f6cd90 | |
| ColorWarning60 | color-warning-60 | #f4bf6e | |
| ColorWarning70 | color-warning-70 | #f1b251 | |
| ColorWarning80 | color-warning-80 | #e9a032 | |
| ColorWarning90 | color-warning-90 | #c1862f | |
| ColorWarning100 | color-warning-100 | #a2722d | |
| ColorWarning110 | color-warning-110 | #835d2a | |
| ColorWarning120 | color-warning-120 | #664b29 | |
| ColorWarning130 | color-warning-130 | #443626 | |
| ColorWarning140 | color-warning-140 | #312824 | |
| ColorWarning150 | color-warning-150 | #242123 | |
| ColorWarning160 | color-warning-160 | #171823 | |
| ColorPositive5 | color-positive-5 | #f2fcfb | |
| ColorPositive10 | color-positive-10 | #e1faf6 | |
| ColorPositive20 | color-positive-20 | #d4f8f2 | |
| ColorPositive30 | color-positive-30 | #b0f4e7 | |
| ColorPositive40 | color-positive-40 | #a1ebdc | |
| ColorPositive50 | color-positive-50 | #92e1d1 | |
| ColorPositive60 | color-positive-60 | #65d4c0 | |
| ColorPositive70 | color-positive-70 | #38c8b0 | |
| ColorPositive80 | color-positive-80 | #09bb9f | |
| ColorPositive90 | color-positive-90 | #06a693 | |
| ColorPositive100 | color-positive-100 | #049187 | |
| ColorPositive110 | color-positive-110 | #017c7b | |
| ColorPositive120 | color-positive-120 | #04585c | |
| ColorPositive130 | color-positive-130 | #07333d | |
| ColorPositive140 | color-positive-140 | #052a33 | |
| ColorPositive150 | color-positive-150 | #032229 | |
| ColorPositive160 | color-positive-160 | #01191f | |
| ColorChart1 | color-chart-1 | #A56EFF | |
| ColorChart2 | color-chart-2 | #F5A167 | |
| ColorChart3 | color-chart-3 | #78BBB9 | |
| ColorChart4 | color-chart-4 | #330045 | |
| ColorChart5 | color-chart-5 | #A2C86D | |
| ColorChart6 | color-chart-6 | #DD7208 | |
| ColorChart7 | color-chart-7 | #0B58FE | |
| ColorChart8 | color-chart-8 | #F9BD33 | |
| ColorChart9 | color-chart-9 | #005D5D | |
| ColorChart10 | color-chart-10 | #D9A6C1 | |
| ColorChart11 | color-chart-11 | #012D9C | |
| ColorChart12 | color-chart-12 | #B51A0C | |
| ColorChart13 | color-chart-13 | #009D9A | |
| ColorChart14 | color-chart-14 | #B602D0 | |
| ColorChart15 | color-chart-15 | #65579A | |
| ColorChart16 | color-chart-16 | #798858 | |
| ColorChart17 | color-chart-17 | #B18601 | |
| ColorChart18 | color-chart-18 | #0F93E8 | |
| ColorChart19 | color-chart-19 | #E46291 | |
| ColorChart20 | color-chart-20 | #198038 | |
| ColorChart21 | color-chart-21 | #E18971 | |
| ColorChart22 | color-chart-22 | #8D3A61 | |
| ColorChart23 | color-chart-23 | #FA4D56 | |
| ColorChart24 | color-chart-24 | #417AA9 | |
| ColorChart25 | color-chart-25 | #A3735E | |
| ColorChartPastel1 | color-chart-pastel-1 | #C19CFF | |
| ColorChartPastel2 | color-chart-pastel-2 | #94ACFF | |
| ColorChartPastel3 | color-chart-pastel-3 | #57B9F0 | |
| ColorChartPastel4 | color-chart-pastel-4 | #4EC8C0 | |
| ColorChartPastel5 | color-chart-pastel-5 | #6FC284 | |
| ColorChartPastel6 | color-chart-pastel-6 | #A2C86D | |
| ColorChartPastel7 | color-chart-pastel-7 | #C0C840 | |
| ColorChartPastel8 | color-chart-pastel-8 | #F9BD33 | |
| ColorChartPastel9 | color-chart-pastel-9 | #F5A167 | |
| ColorChartPastel10 | color-chart-pastel-10 | #FF8F8F | |
| ColorChartPastel11 | color-chart-pastel-11 | #D9A6C1 | |
| ColorChartPastel12 | color-chart-pastel-12 | #D1A591 |
Divider
Dividers come in two variations: strong and soft. We use them to segment screens, mostly in combination with Panels.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| DividerSoftColor | divider-soft-color | #eceef4 | |
| DividerStrongColor | divider-strong-color | #cdd0e0 |
DragItem
We use these styles for the Drag Item component. Please notice: These styles are used in combination with the global elevation styles to create the shadows.
| JavaScript | SASS | Value |
|---|---|---|
| DragItemDefaultBackgroundColor | drag-item-default-background-color | #ffffff |
| DragItemDefaultBoxShadow | drag-item-default-box-shadow | inset 0 -1px 0 0 #eceef4 |
| DragItemDefaultBorder | drag-item-default-border | 1px solid #cdd0e0 |
| DragItemHoverBackgroundColor | drag-item-hover-background-color | #ffffff |
| DragItemHoverBoxShadow | drag-item-hover-box-shadow | inset 0 -1px 0 0 #eceef4 |
| DragItemHoverBorder | drag-item-hover-border | 1px solid #9ca2bd |
| DragItemDraggingBackgroundColor | drag-item-dragging-background-color | #ffffff |
| DragItemDraggingBoxShadow | drag-item-dragging-box-shadow | inset 0 -1px 0 0 #eceef4 |
| DragItemDraggingBorder | drag-item-dragging-border | 1px solid #255eee |
| DragItemFocusBackgroundColor | drag-item-focus-background-color | #ffffff |
| DragItemFocusBoxShadow | drag-item-focus-box-shadow | inset 0 -1px 0 0 #eceef4, 0 0 0 1px #255eee |
| DragItemFocusBorder | drag-item-focus-border | 1px solid #255eee |
Elevation
We use these styles to create visual depth – the higher the number in the scale, the higher an object appears to hover above the surface level. Apply these styles to a separate layer in any symbol that needs the elevation shadow.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| Elevation1BoxShadow | elevation-1-box-shadow | 0 1px 4px 0 rgba(110, 116, 146, 0.25) | |
| Elevation2BoxShadow | elevation-2-box-shadow | 0 2px 6px 0 rgba(110, 116, 146, 0.08) | |
| Elevation3BoxShadow | elevation-3-box-shadow | 0 2px 8px 0 rgba(110, 116, 146, 0.2) | |
| Elevation4BoxShadow | elevation-4-box-shadow | 0 4px 24px 0 rgba(110, 116, 146, 0.3), 0 2px 8px 0 rgba(110, 116, 146, 0.1) | |
| Elevation5BoxShadow | elevation-5-box-shadow | 0 4px 32px 0 rgba(110, 116, 146, 0.15), 0 4px 56px 0 rgba(110, 116, 146, 0.15), 0 2px 8px 0 rgba(110, 116, 146, 0.1) |
Font
For all UI text, we use system fonts. That’s San Francisco on iOS/OSX and Arial on most Linux and Windows systems.
info
To find more about the fonts, visit typography section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| FontFamilySystem | font-family-system | BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Arial, sans-serif | Lorem ipsum dolor... |
| FontFamilyMonospace | font-family-monospace | "Courier New", Courier, monospace | Lorem ipsum dolor... |
| FontWeightNormal | font-weight-normal | normal | Lorem ipsum dolor... |
| FontWeightMedium | font-weight-medium | 500 | Lorem ipsum dolor... |
| FontWeightBold | font-weight-bold | bold | Lorem ipsum dolor... |
Input
We use these layer styles on everything that resembles an input: (Text-)Input/Textarea but also Checkboxes and Radio Buttons.
| JavaScript | SASS | Value |
|---|---|---|
| InputLoweredDefaultBackgroundColor | input-lowered-default-background-color | #ffffff |
| InputLoweredDefaultBorder | input-lowered-default-border | 1px solid #cdd0e0 |
| InputLoweredDefaultBoxShadow | input-lowered-default-box-shadow | inset 0 1px 1px 0 rgba(110, 116, 146, 0.12) |
| InputLoweredHoverBackgroundColor | input-lowered-hover-background-color | #ffffff |
| InputLoweredHoverBorder | input-lowered-hover-border | 1px solid #9ca2bd |
| InputLoweredHoverBoxShadow | input-lowered-hover-box-shadow | inset 0 1px 1px 0 rgba(110, 116, 146, 0.12) |
| InputLoweredFocusBackgroundColor | input-lowered-focus-background-color | #ffffff |
| InputLoweredFocusBorder | input-lowered-focus-border | 1px solid #255eee |
| InputLoweredFocusBoxShadow | input-lowered-focus-box-shadow | inset 0 1px 1px 0 rgba(110, 116, 146, 0.12), 0 0 0 1px #255eee |
| InputLoweredInvalidBackgroundColor | input-lowered-invalid-background-color | #ffffff |
| InputLoweredInvalidBorder | input-lowered-invalid-border | 1px solid #f84d79 |
| InputLoweredInvalidBoxShadow | input-lowered-invalid-box-shadow | inset 0 1px 1px 0 rgba(110, 116, 146, 0.12), 0 0 0 1px #f84d79 |
| InputLoweredDisabledColor | input-lowered-disabled-color | #848ba9 |
| InputLoweredDisabledBackgroundColor | input-lowered-disabled-background-color | #f4f6f9 |
| InputLoweredDisabledBorder | input-lowered-disabled-border | 1px solid #cdd0e0 |
| InputLoweredDisabledBoxShadow | input-lowered-disabled-box-shadow | none |
| InputRaisedDefaultBackgroundColor | input-raised-default-background-color | #ffffff |
| InputRaisedDefaultBorder | input-raised-default-border | 1px solid #cdd0e0 |
| InputRaisedDefaultBoxShadow | input-raised-default-box-shadow | 0 1px 1px 0 rgba(110, 116, 146, 0.12) |
| InputRaisedHoverBackgroundColor | input-raised-hover-background-color | #ffffff |
| InputRaisedHoverBorder | input-raised-hover-border | 1px solid #9ca2bd |
| InputRaisedHoverBoxShadow | input-raised-hover-box-shadow | 0 1px 1px 0 rgba(42, 47, 69, 0.12) |
| InputRaisedFocusBackgroundColor | input-raised-focus-background-color | #ffffff |
| InputRaisedFocusBorder | input-raised-focus-border | 1px solid #255eee |
| InputRaisedFocusBoxShadow | input-raised-focus-box-shadow | 0 0 0 1px #255eee, 0 2px 1px 0 rgba(42, 47, 69, 0.12) |
| InputRaisedInvalidBackgroundColor | input-raised-invalid-background-color | #ffffff |
| InputRaisedInvalidBorder | input-raised-invalid-border | 1px solid #f84d79 |
| InputRaisedInvalidBoxShadow | input-raised-invalid-box-shadow | 0 0 0 1px #f84d79, 0 2px 1px 0 rgba(42, 47, 69, 0.12) |
| InputKeyboardFocusBackgroundColor | input-keyboard-focus-background-color | #ffffff |
| InputKeyboardFocusBorder | input-keyboard-focus-border | 2px solid #1a62ff |
PopOver
We use these layer styles for all kinds of Popovers (eg. Date Picker). Please notice: These styles are used in combination with the global elevation styles to create the shadows.
| JavaScript | SASS | Value |
|---|---|---|
| PopOverBackgroundColor | pop-over-background-color | #ffffff |
| PopOverBoxShadow | pop-over-box-shadow | 0 2px 8px 0 rgba(110, 116, 146, 0.2) |
| PopOverBorder | pop-over-border | 1px solid #cdd0e0 |
Spacing
Like with the color scale, the step numbers offer some padding to add additional intermediate steps later on if we need them. You read each ten-step number as a whole multiplier of 8px: s-20 → 2×8 = 16px. In five-steps, the number five reads like 0.5: s-15 → 1.5×8 = 12px.
info
To find more about the spacing scale, visit spacing scale section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| Spacing5 | spacing-5 | 4px | |
| Spacing10 | spacing-10 | 8px | |
| Spacing15 | spacing-15 | 12px | |
| Spacing20 | spacing-20 | 16px | |
| Spacing25 | spacing-25 | 20px | |
| Spacing30 | spacing-30 | 24px | |
| Spacing40 | spacing-40 | 32px | |
| Spacing50 | spacing-50 | 40px | |
| Spacing60 | spacing-60 | 48px | |
| Spacing70 | spacing-70 | 56px | |
| Spacing80 | spacing-80 | 64px |
Stacking
To ensure cohesive z-index hierarchy and avoid overlapping, we are using the Stacking foundation design language to set the elevation of our elements.
info
For more information about it, please visit the Stacking section on the design language page.
| JavaScript | SASS | Value |
|---|---|---|
| StackingNegative | stacking-negative | -1 |
| StackingCanvas | stacking-canvas | 0 |
| StackingDefault | stacking-default | 1 |
| StackingLayout | stacking-layout | 10 |
| StackingLayoutSticky | stacking-layout-sticky | 15 |
| StackingDropdown | stacking-dropdown | 100 |
| StackingTooltip | stacking-tooltip | 1000 |
| StackingModal | stacking-modal | 10000 |
| StackingModalContent | stacking-modal-content | 10001 |
| StackingNotification | stacking-notification | 100000 |
Table
These styles are used to generate a heat-map for the Table component by scaling between soft and strong colors.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| TableHeatMapSoftColor | table-heat-map-soft-color | #f8f0ff | |
| TableHeatMapStrongColor | table-heat-map-strong-color | #b07dff |
Tile
We use these layer styles for Tiles. Please notice: Some of these styles are used in combination with the global elevation styles to create the shadows.
| JavaScript | SASS | Value |
|---|---|---|
| TileBorderRadius | tile-border-radius | 12px |
| TileBackgroundColor | tile-background-color | #ffffff |
| TileDefaultBorder | tile-default-border | 1px solid #e0e2ec |
| TileDefaultBoxShadow | tile-default-box-shadow | 0 2px 6px 0 rgba(110, 116, 146, 0.08) |
| TileDraggableDraggingBorder | tile-draggable-dragging-border | 1px solid #255eee |
| TileDraggableDraggingBoxShadow | tile-draggable-dragging-box-shadow | 0 0 0 1px #255eee, 0 4px 24px 0 rgba(110, 116, 146, 0.3), 0 2px 8px 0 rgba(110, 116, 146, 0.1) |
| TileDraggableHoverBorder | tile-draggable-hover-border | 1px solid #9ca2bd |
| TileDraggableHoverBoxShadow | tile-draggable-hover-box-shadow | 0 2px 8px 0 rgba(110, 116, 146, 0.2) |
| TileResizableHoverBorder | tile-resizable-hover-border | 1px solid #9ca2bd |
| TileResizableResizingBorder | tile-resizable-resizing-border | 1px solid #255eee |
| TileResizableResizingBoxShadow | tile-resizable-resizing-box-shadow | 0 0 0 1px #255eee |
Transition
We use these tokens to define the duration of the UI animations.
info
To find more about the transitions, visit motion section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| TransitionDurationShort | transition-duration-short | 75ms | |
| TransitionDurationLong | transition-duration-long | 120ms | |
| TransitionDurationExtraLong | transition-duration-extra-long | 240ms |
TypeScale
We have a small type scale with four sizes and three weights each. We deliberately did not create more semantic text styles (eg. Headline 1, Headline 2, Paragraph, …) yet since all typography is defined in context of their components (symbols) anyways.
info
To find more about the type scales, visit typography section on the design language page.
| JavaScript | SASS | Value | Example |
|---|---|---|---|
| TypeScale1FontSize | type-scale-1-font-size | 12px | Lorem ipsum dolor... |
| TypeScale1LineHeight | type-scale-1-line-height | 16px | Lorem ipsum dolor... |
| TypeScale1LetterSpacing | type-scale-1-letter-spacing | 0.2px | Lorem ipsum dolor... |
| TypeScale2FontSize | type-scale-2-font-size | 14px | Lorem ipsum dolor... |
| TypeScale2LineHeight | type-scale-2-line-height | 20px | Lorem ipsum dolor... |
| TypeScale2LetterSpacing | type-scale-2-letter-spacing | 0 | Lorem ipsum dolor... |
| TypeScale3FontSize | type-scale-3-font-size | 16px | Lorem ipsum dolor... |
| TypeScale3LineHeight | type-scale-3-line-height | 24px | Lorem ipsum dolor... |
| TypeScale3LetterSpacing | type-scale-3-letter-spacing | 0 | Lorem ipsum dolor... |
| TypeScale4FontSize | type-scale-4-font-size | 20px | Lorem ipsum dolor... |
| TypeScale4LineHeight | type-scale-4-line-height | 28px | Lorem ipsum dolor... |
| TypeScale4LetterSpacing | type-scale-4-letter-spacing | 0 | Lorem ipsum dolor... |
| TypeScale5FontSize | type-scale-5-font-size | 24px | Lorem ipsum dolor... |
| TypeScale5LineHeight | type-scale-5-line-height | 32px | Lorem ipsum dolor... |
| TypeScale5LetterSpacing | type-scale-5-letter-spacing | 0 | Lorem ipsum dolor... |