Design Tokens

The design token system centralizes the storage and management of basic interface parameters: color (color), sizes and spaces (dimensions), typography (font), and effects (effects). Design tokens apply to all system components, ensuring a consistent appearance, instant theme changing and scalable design maintenance.

caution

In this version only color and font-family token categories are supported.

You can override default token values and create custom themes.

To override a style, create a new CSS file with the required parameters and add its name to the root index.html file.

A design token is an atomic unit of visual interface that stores a design value – such as color, typography, spacing, or corner radius – in a machine-readable format.

Design tokens are implemented using CSS variables and are available in:

• component styles
• client scripts
• widget scripts

Design token example:

Example

.Filter {
    background: var(--color-fill-background-container-basic-primary);
    border-bottom: 1px solid var(--color-stroke-basic-primary);
    border-top: 1px solid var(--color-stroke-basic-primary);
    padding: 24px;

    &.compact {
        padding-top: 0;
  }
}

System components supporting design tokens

• Input fields: codeMirror, color, conditions, daysOfWeek, documentId, htmlInput, image, list, maskedInput, reference, select, stringInput, templateField, textarea, url, unavailableField
• Control elements: checkbox, toggle, radiobutton
• Field messages: fieldMessage
• Field wrapper component: fieldWrapper
• Form sections: section
• Condition builder: conditionFilters, conditionFields, filter
• Reports and report designer: report
• Tabulation: tabs, slider
• Relates lists: relatedLists
• Tabs on related lists: relatedListTab
• Sidebar titles : sidebar
• tables: table, groupedTable
• Modal windows: modalWindow
• Attachments: attachment
• List view: listbox
• Form view: formLayout
• UI actions: button
• Header: header

Color category

The color design token category is intended for managing the colors of elements, container backgrounds, lines, strokes, and text.

color-stroke

---

Use stroke to define line colors.

Types

• basic – line color for for all basic components. It has two states:
  • primary – main color
  • secondary – additional color
• warning – line color for elements containing errors
• focus – line color during interaction

Example

--color-stroke-basic-primary: var(--color-transparent-black-150);
--color-stroke-basic-secondary: rgba(41, 41, 41, 0.02);
--color-stroke-focus: #63A6E9;
--color-stroke-warning: #EC5E46;

color-text

---

Use color-text to define text color.

• interactive – text color that changes during user interaction:
  • default – standard text color
  • hovered – text color on hover
  • pressed – link color when clicked
  • visited – color for visited links
• static - static text color. This type includes several states and levels:
  • basic – similar to the stroke subcategory, basic is used as the main color and includes the following levels:
    • primary – first level
    • primaryInvert – first level, inverted color
    • secondary – second level
    • secondaryInvert – second level, inverted color
    • tertiary – third level
    • quaternary – fourth level
    • quinary – fifth level
  • warning – color for warning texts
  • palette – custom colors:
    • paint1-600
    • paint5-500

Example

--color-text-static-warning: #C61E03;

--color-text-static-basic-primary: #202020;
--color-text-static-basic-secondary: var(--color-neutral-900);
--color-text-static-basic-tertiary: #202020;
--color-text-static-basic-quaternary: rgba(41, 41, 41, 0.68);
--color-text-static-basic-quinary: rgba(41, 41, 41, 0.40);
--color-text-static-basic-primaryInvert: #FFFFFF;
--color-text-static-basic-secondaryInvert: var(--color-transparent-white-900);

--color-text-static-palette-paint1-600: #1066BC;
--color-text-static-palette-paint5-500: #7B58D0;

--color-text-interactive-hovered: #0C5CAC;
--color-text-interactive-pressed: #074786;
--color-text-interactive-visited: #5841B8;
--color-text-interactive-default: #1066BC;

color-fill-shape

---

Use color-fill-shape to fill icons and graphic forms.

• basic – similar to the stroke and text subcategories. It defined the main color and includes the following states:
  • primary – first level
  • secondary – second level
  • secondaryInvert – second level, inverted color
  • tertiary – third level
  • quaternary – fourth level
  • quinary – fifth level
• warning – color for elements containing an error
• attention – color for elements that require user attention
• online – online marker
• palette – user color. You can set up to five colors:
  • paint1-500
  • paint1-600
  • paint3-400
  • paint4-400
  • paint5-500

Example

--color-fill-shape-palette-paint1-500: #2080DF;
--color-fill-shape-palette-paint1-600: #1066BC;
--color-fill-shape-palette-paint3-400: #2EA060;
--color-fill-shape-palette-paint4-400: #F39720;
--color-fill-shape-palette-paint5-500: #7B58D0;

--color-fill-shape-basic-primary: var(--color-transparent-black-900);
--color-fill-shape-basic-secondary: #202020;
--color-fill-shape-basic-tertiary: var(--color-transparent-black-640);
--color-fill-shape-basic-quaternary: var(--color-transparent-black-450);
--color-fill-shape-basic-quinary: rgba(41, 41, 41, 0.45);
--color-fill-shape-basic-secondaryInvert: var(--color-transparent-white-900);
--color-fill-shape-online: var(--color-green-500);
--color-fill-shape-attention: var(--color-orange-400);
--color-fill-shape-warning: var(--color-red-400);

color-fill-background

---

Use color-fill-background to fill a whole container background (container) or its element(element).

color-fill-background-container

• basic – use as the main color. Available states are:
  • primary – main color for container background
  • secondary – additional color for container background
• palette – custom background color. In the current version you can define only one palette color – paint4-010.

Example

--color-fill-background-container-basic-primary: #FFFFFF;
--color-fill-background-container-basic-secondary: #F7F7F8;
--color-fill-background-container-palette-paint4-010: var(--color-transparent-orange-100);

color-fill-background-element-static

Use color-fill-background-element-static to define the color for static elements:

• basic – main color. You can define several shades of the main color:
  • 200
  • 1000
  • invert1000

Example

--color-fill-background-element-static-basic-200: rgba(41, 41, 41, 0.04);
--color-fill-background-element-static-basic-1000: #202020;
--color-fill-background-element-static-basic-invert1000: #FFFFFF;

color-fill-background-element-interactive

Use color-fill-background-element-interactive to define a background color that changes upon user interaction, for example on hover or upon successful event completion.

Type	Subtype	Action
basic	primary secondary tertiary	default – available only for primary and secondary hovered – on hover pressed – on click disabled – when the element is not active brightDisabled – a distinct inactive state. Available only for the tertiary subtype
warning	primary	default hovered pressed
success	primary	default hovered pressed
stripe	–	default – default color selected – color for a selected element
loading	–	–

Example

--color-fill-background-element-interactive-loading: var(--color-transparent-black-180);

--color-fill-background-element-interactive-stripe-default: #F5F9FE;
--color-fill-background-element-interactive-stripe-selected: #D1E5FA;

--color-fill-background-element-interactive-warning-primary-default: #D82A0E;
--color-fill-background-element-interactive-warning-primary-hovered: #C61E03;
--color-fill-background-element-interactive-warning-primary-pressed: #AB1A03;

--color-fill-background-element-interactive-success-primary-default: #90D5A8;
--color-fill-background-element-interactive-success-primary-hovered: #207745;
--color-fill-background-element-interactive-success-primary-pressed: #23683B;

--color-fill-background-element-interactive-basic-primary-default: #1D73C9;
--color-fill-background-element-interactive-basic-primary-hovered: #1066BC;
--color-fill-background-element-interactive-basic-primary-pressed: #0C5CAC;
--color-fill-background-element-interactive-basic-primary-disabled: rgba(41, 41, 41, 0.04);

--color-fill-background-element-interactive-basic-secondary-default: rgba(41, 41, 41, 0.06);
--color-fill-background-element-interactive-basic-secondary-hovered: rgba(41, 41, 41, 0.12);
--color-fill-background-element-interactive-basic-secondary-pressed: var(--color-transparent-black-180);
--color-fill-background-element-interactive-basic-secondary-disabled: rgba(41, 41, 41, 0.04);

--color-fill-background-element-interactive-basic-tertiary-hovered: rgba(41, 41, 41, 0.06);
--color-fill-background-element-interactive-basic-tertiary-pressed: rgba(255, 255, 255, 0.12);
--color-fill-background-element-interactive-basic-tertiary-disabled: var(--color-transparent-black-020);
--color-fill-background-element-interactive-basic-tertiary-brightDisabled: var(--color-transparent-black-120);

font

Use this category to define system fonts.

font-family

---

Specify the font name and its category as the value.

• title – font for titles
• body – font for common text

Example

--font-family-body: 'Inter', sans-serif;
--font-family-title: 'Inter', sans-serif;

info

To restore the fonts used in platform version 1.32.0 and earlier, apply the following parameters:

-- font-family-body: 'Open Sans', sans-serif;
-- font-family-title: 'Montserrat', sans-serif;