Box Developer Documentation
Log in

UI Elements design tokens

Guides Embed Box UI Elements UI Elements design tokens
Edit this page

Required Guides

UI Elements design tokens

This table shows all the design tokens you can use for theming and styling purposes. Provided default values and descriptions give clarity and guidance for implementation.

Token structure

There are two ways to provide tokens to the theme object in Content Explorer: flatten structure using full token names and nested structure using shortened names. The latter allows you to group tokens, which might improve the readability of your customization, but both produce the same results.

Example

Flatten structure:

const theme = {
    tokens: {
        "body-default-font-size": "14px",
        "body-default-font-weight": "400"
        "body-default-text-decoration": "none",
        "body-default-bold-line-height": "20px",
    }
};

Nested structure:

const theme = {
    tokens: {
        Body: {
            Default: {
                "font-size": "14px",
                "font-weight": "400",
                "text-decoration": "none",
            }
            "Default Bold": {
                "line-height": "20px",
            }
        }
    }
};

Border colors

You can pass any CSS color value, like hexadecimal colors, RGB, cross-browser color names, and so on.

TokenDefault valueDescription
border-checkbox-border#6f6f6fDefault border color for checkboxes.
border-checkbox-border-hover#4e4e4eBorder color when hovering over checkboxes.
border-checkbox-border-selected#0061d5Border color for selected checkboxes.
border-checkbox-border-selected-hover#2079e3Border color when hovering over selected checkboxes.
border-cta-border-outline#000000Border for secondary buttons with transparent background.
border-cta-border-outline-disabled#646464Border for disabled outline buttons.
border-cta-border-outline-hover#000000Border for outline buttons on hover.
border-cta-border-outline-pressed#000000Border for outline buttons when pressed.
border-cta-border-secondary#bcbcbcBorder for secondary buttons.
border-cta-border-secondary-disabled#e8e8e8Border for disabled secondary buttons.
border-cta-border-secondary-hover#bcbcbcBorder for secondary buttons on hover.
border-cta-border-secondary-pressed#bcbcbcBorder for secondary buttons when pressed.
border-divider-border#e8e8e8Horizontal line separators.
border-dropdown-border#bcbcbcBorder for dropdown menus.
border-gridthumbnail-border#e8e8e8Border for item (file/folder) thumbnails in grid view.
border-input-border#909090Border for text inputs.
border-input-border-error#ed3757Border for text inputs with errors.
border-input-border-focus#2486fcBorder for focused text inputs.
border-input-border-hover#6f6f6fBorder for text inputs on hover.
border-search-border#f4f4f4Border for search inputs.
border-search-border-hover#6f6f6fBorder for search inputs on hover.
border-switch-border#bcbcbcBorder for toggle switches.
border-switch-border-hover#bcbcbcBorder for toggle switches on hover.
border-tooltip-border-error#f69babBorder for error tool tips.

Icon colors

You can only style interactive icons such as buttons or drop down.

TokenDefault valueDescription
icon-cta-icon#6f6f6fDefault color for icons in buttons.
icon-cta-icon-hover#222222Color for icons in buttons on hover.
icon-cta-icon-pressed#222222Color for icons in buttons when pressed.

Outline colors

TokenDefault valueDescription
outline-focus-on-dark#ffffffFocus outline color on dark backgrounds.
outline-focus-on-light#2486fcFocus outline color on light backgrounds.

Surface colors

TokenDefault valueDescription
surface-checkbox-surface#ffffffBackground color for checkboxes.
surface-checkbox-surface-hover#ffffffBackground color for checkboxes on hover.
surface-checkbox-surface-selected#0061d5Background color for selected checkboxes.
surface-checkbox-surface-selected-hover#2079e3Background color for selected checkboxes on hover.
surface-cta-surface-iconrgba(0, 0, 0, 0)Background for icon buttons.
surface-cta-surface-icon-disabledrgba(0, 0, 0, 0)Background for disabled icon buttons.
surface-cta-surface-icon-hoverrgba(0, 0, 0, 0.04)Background for icon buttons on hover.
surface-cta-surface-icon-pressedrgba(0, 0, 0, 0.08)Background for icon buttons when pressed.
surface-cta-surface-outlinergba(0, 0, 0, 0)Background for secondary buttons with transparent background.
surface-cta-surface-outline-hoverrgba(0, 0, 0, 0.04)Background for outline buttons on hover.
surface-cta-surface-outline-pressedrgba(0, 0, 0, 0.08)Background for outline buttons when pressed.
surface-cta-surface-secondary#ffffffBackground for secondary buttons.
surface-cta-surface-secondary-hover#f4f4f4Background for secondary buttons on hover.
surface-cta-surface-secondary-pressed#e8e8e8Background for secondary buttons when pressed.
surface-cta-surface-tertiary#ffffffBackground for link styled buttons.
surface-cta-surface-tertiary-hover#f4f4f4Background for link styled buttons on hover.
surface-cta-surface-tertiary-pressed#e8e8e8Background for link styled buttons when pressed.
surface-dropdown-surface#ffffffBackground for dropdown menus.
surface-dropdown-surface-error#ffffffBackground for dropdown menus with errors.
surface-dropdown-surface-focus#ffffffBackground for focused dropdown menus.
surface-dropdown-surface-hover#ffffffBackground for dropdown menus on hover.
surface-illustration-surface-box-neutral#0061d5Color for illustrations (detailed icons).
surface-input-surface#ffffffBackground for text inputs.
surface-input-surface-error#ffffffBackground for text inputs with errors.
surface-input-surface-focus#ffffffBackground for focused text inputs.
surface-input-surface-hover#ffffffBackground for text inputs on hover.
surface-menu-surface#ffffffBackground for dropdown menu options.
surface-menu-surface-focus#f4f4f4Background for focused menu items.
surface-menu-surface-hover#f4f4f4Background for menu items on hover.
surface-search-surface#f4f4f4Background for search inputs.
surface-search-surface-focused#ffffffBackground for focused search inputs.
surface-search-surface-hover#fbfbfbBackground for search inputs on hover.
surface-sliderthumb-surface#0061d5Color for range slider thumbs.
surface-sliderthumb-surface-hover#2486fcColor for range slider thumbs on hover.
slidertrack-surface#6f6f6fColor for range slider tracks.
surface-surface#ffffffGeneral background color.
surface-surface-brand#0061d5Background for primary buttons.
surface-surface-brand-disabled#0061d5Background for disabled primary buttons.
surface-surface-brand-hover#006ae9Background for primary buttons on hover.
surface-surface-brand-pressed#004eacBackground for primary buttons when pressed.
surface-switch-surface#ffffffBackground for toggle switches.
surface-switch-surface-off#d3d3d3Background for toggle switches in off state.
surface-switch-surface-on#0061d5Background for toggle switches in on state.
surface-tooltip-surface#4e4e4eBackground for tool tips.
surface-tooltip-surface-error#fdebeeBackground for error tool tips.

Text colors

TokenDefault valueDescription
text-cta-link#0061d5Color for hyperlinks.
text-cta-link-disabled#b2cff2Color for disabled hyperlinks.
text-cta-link-hover#1d6bcaColor for hyperlinks on hover.
text-cta-link-pressed#2486fcColor for hyperlinks when pressed.
text-text-error-on-light#d5324eError text color on light backgrounds.
text-text-on-dark#ffffffText color on dark backgrounds.
text-text-on-light#222222Primary text color on light backgrounds.
text-text-on-light-secondary#6f6f6fSecondary text color on light backgrounds.
text-text-on-light-secondary-hover#4e4e4eSecondary text color on hover.

Typography tokens

The comment in the table refers to pixels in calculation based on a root font-size of 16 px.

TokenDefault valueDescription
body-default-font-familyLato, "Helvetica Neue", sans-serifFont family for body text.
body-default-font-size0.875remFont size for body text.
body-default-font-weight400Font weight for body text.
body-default-letter-spacing0.01875remLetter spacing for body text.
body-default-line-height1.25remLine height for body text.
body-default-text-decorationnoneText decoration for body text.
body-default-bold-font-familyLato, "Helvetica Neue", sans-serifFont family for bold body text.
body-default-bold-font-size0.875remFont size for bold body text.
body-default-bold-font-weight700Font weight for bold body text.
body-default-bold-letter-spacing0.01875remLetter spacing for bold body text.
body-default-bold-line-height1.25remLine height for bold body text.
body-default-bold-text-decorationnoneText decoration for bold body text.
body-default-semibold-font-familyLato, "Helvetica Neue", sans-serifFont family for semi-bold body text.
body-default-semibold-font-size0.875remFont size for semi-bold body text.
body-default-semibold-font-weight600Font weight for semi-bold body text.
body-default-semibold-letter-spacing0.01875remLetter spacing for semi-bold body text.
body-default-semibold-line-height1.25remLine height for semi-bold body text.
body-default-semibold-text-decorationnoneText decoration for semi-bold body text.
body-large-font-familyLato, "Helvetica Neue", sans-serifFont family for large body text.
body-large-font-size1remFont size for large body text.
body-large-font-weight400Font weight for large body text.
body-large-letter-spacing0.01875remLetter spacing for large body text.
body-large-line-height1.5remLine height for large body text.
body-large-text-decorationnoneText decoration for large body text.
body-large-bold-font-familyLato, "Helvetica Neue", sans-serifFont family for large bold body text.
body-large-bold-font-size1remFont size for large bold body text.
body-large-bold-font-weight700Font weight for large bold body text.
body-large-bold-letter-spacing0.01875remLetter spacing for large bold body text.
body-large-bold-line-height1.5remLine height for large bold body text.
body-large-bold-text-decorationnoneText decoration for large bold body text.
caption-bold-font-familyLato, "Helvetica Neue", sans-serifFont family for bold captions.
caption-bold-font-size0.75remFont size for bold captions.
caption-bold-font-weight700Font weight for bold captions.
caption-bold-letter-spacing0.01875remLetter spacing for bold captions.
caption-bold-line-height0.875remLine height for bold captions.
caption-bold-text-decorationnoneText decoration for bold captions.
caption-default-font-familyLato, "Helvetica Neue", sans-serifFont family for captions.
caption-default-font-size0.75remFont size for captions.
caption-default-font-weight400Font weight for captions.
caption-default-letter-spacing0.01875remLetter spacing for captions.
caption-default-line-height0.875remLine height for captions.
caption-default-text-decorationnoneText decoration for captions.
label-bold-font-familyLato, "Helvetica Neue", sans-serifFont family for bold labels.
label-bold-font-size0.625remFont size for bold labels.
label-bold-font-weight700Font weight for bold labels.
label-bold-letter-spacing0.0375remLetter spacing for bold labels.
label-bold-line-height1remLine height for bold labels.
label-bold-text-decorationnoneText decoration for bold labels.
label-default-font-familyLato, "Helvetica Neue", sans-serifFont family for labels.
label-default-font-size0.625remFont size for labels.
label-default-font-weight400Font weight for labels.
label-default-letter-spacing0.0375remLetter spacing for labels.
label-default-line-height1remLine height for labels.
label-default-text-decorationnoneText decoration for labels.
link-default-font-familyLato, "Helvetica Neue", sans-serifFont family for hyperlinks.
link-default-font-size0.875remFont size for hyperlinks.
link-default-font-weight400Font weight for hyperlinks.
link-default-letter-spacing0.01875remLetter spacing for hyperlinks.
link-default-line-height1.25remLine height for hyperlinks.
link-default-text-decorationunderlineText decoration for hyperlinks.
notification-default-font-familyLato, "Helvetica Neue", sans-serifFont family for notifications.
notification-default-font-size0.5625remFont size for notifications.
notification-default-font-weight700Font weight for notifications.
notification-default-letter-spacing0.01875remLetter spacing for notifications.
notification-default-line-height0.75remLine height for notifications.
notification-default-text-decorationnoneText decoration for notifications.
title-large-font-familyLato, "Helvetica Neue", sans-serifFont family for large titles.
title-large-font-size1.125remFont size for large titles.
title-large-font-weight700Font weight for large titles.
title-large-letter-spacing0.01875remLetter spacing for large titles.
title-large-line-height1.5remLine height for large titles.
title-large-text-decorationnoneText decoration for large titles.
title-medium-font-familyLato, "Helvetica Neue", sans-serifFont family for medium titles.
title-medium-font-size1remFont size for medium titles.
title-medium-font-weight700Font weight for medium titles.
title-medium-letter-spacing0.01875remLetter spacing for medium titles.
title-medium-line-height1.5remLine height for medium titles.
title-medium-text-decorationnoneText decoration for medium titles.
title-small-font-familyLato, "Helvetica Neue", sans-serifFont family for small titles.
title-small-font-size0.9375remFont size for small titles.
title-small-font-weight700Font weight for small titles.
title-small-letter-spacing0.01875remLetter spacing for small titles.
title-small-line-height1.25remLine height for small titles.
title-small-text-decorationnoneText decoration for small titles.
title-subtitle-font-familyLato, "Helvetica Neue", sans-serifFont family for subtitles.
title-subtitle-font-size0.875remFont size for subtitles.
title-subtitle-font-weight700Font weight for subtitles.
title-subtitle-letter-spacing0.01875remLetter spacing for subtitles.
title-subtitle-line-height1.25remLine height for subtitles.
title-subtitle-text-decorationnoneText decoration for subtitles.
title-x-large-font-familyLato, "Helvetica Neue", sans-serifFont family for extra-large titles.
title-x-large-font-size1.3125remFont size for extra-large titles.
title-x-large-font-weight700Font weight for extra-large titles.
title-x-large-letter-spacing0.01875remLetter spacing for extra-large titles.
title-x-large-line-height2remLine height for extra-large titles.
title-x-large-text-decorationnoneText decoration for extra-large titles.

Spacing, sizing, and shape tokens

The comment in the table refers to pixels in calculation based on a root font-size of 16 px.

TokenDefault valueDescription
border-10.0625remBorder width (1 px equivalent).
border-20.125remBorder width (2 px equivalent).
border-30.1875remBorder width (3 px equivalent).
border-40.25remBorder width (4 px equivalent).
border-60.375remBorder width (6 px equivalent).
border-80.5remBorder width (8 px equivalent).
dropshadow-10 0 0.5rem 0 rgba(0, 0, 0, 0.05)Subtle shadow effect.
dropshadow-20 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1)Medium shadow effect.
dropshadow-30 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1)Pronounced shadow effect.
radius-050.125remBorder radius (2 px equivalent).
radius-10.25remBorder radius (4 px equivalent).
radius-20.375remBorder radius (6 px equivalent).
radius-30.5remBorder radius (8 px equivalent).
radius-40.75remBorder radius (12 px equivalent).
radius-51remBorder radius (16 px equivalent).
radius-61.25remBorder radius (20 px equivalent).
radius-71.5remBorder radius (24 px equivalent).
radius-81.75remBorder radius (28 px equivalent).
radius-half2remBorder radius (32 px equivalent).
size-050.125remSize measurement (2 px equivalent).
size-10.25remSize measurement (4 px equivalent).
size-20.5remSize measurement (8 px equivalent).
size-30.75remSize measurement (12 px equivalent).
size-41remSize measurement (16 px equivalent).
size-51.25remSize measurement (20 px equivalent).
size-61.5remSize measurement (24 px equivalent).
size-71.75remSize measurement (28 px equivalent).
size-82remSize measurement (32 px equivalent).
size-92.25remSize measurement (36 px equivalent).
size-102.5remSize measurement (40 px equivalent).
size-112.75remSize measurement (44 px equivalent).
size-123remSize measurement (48 px equivalent).
size-143.5remSize measurement (56 px equivalent).
size-153.75remSize measurement (60 px equivalent).
size-164remSize measurement (64 px equivalent).
size-184.5remSize measurement (72 px equivalent).
size-205remSize measurement (80 px equivalent).
space-050.125remSpacing measurement (2 px equivalent).
space-10.25remSpacing measurement (4 px equivalent).
space-20.5remSpacing measurement (8 px equivalent).
space-30.75remSpacing measurement (12 px equivalent).
space-41remSpacing measurement (16 px equivalent).
space-51.25remSpacing measurement (20 px equivalent).
space-61.5remSpacing measurement (24 px equivalent).
space-71.75remSpacing measurement (28 px equivalent).
space-82remSpacing measurement (32 px equivalent).
space-92.25remSpacing measurement (36 px equivalent).
space-102.5remSpacing measurement (40 px equivalent).
space-112.75remSpacing measurement (44 px equivalent).
space-123remSpacing measurement (48 px equivalent).
space-143.5remSpacing measurement (56 px equivalent).
space-153.75remSpacing measurement (60 px equivalent).
space-164remSpacing measurement (64 px equivalent).
space-184.5remSpacing measurement (72 px equivalent).
space-205remSpacing measurement (80 px equivalent).