Skip to main content


The following web format is provided when compiling design tokens to Less using web-less.

File structure#

During compilation, an index.less file will be created based on the design system YAML configuration file. Additional themes/<name>.less files will be created for each theme configured in the YAML file.

This would look something like the following:

├── themes/
│ ├── day.less
│ └── night.less
├── index.less


As mentioned above, a design system and multiple theme files are created. The design system file defines primitive variables, while each theme file defines color and palette variables, both of which rely on Less variables.

The compiled design system file looks something like the following:

@border-sm-radius: 0.11rem; // 1.50px
@border-sm-width: 0rem; // 0px
@border-df-radius: 0.21rem; // 3px
@border-df-width: 0.07rem; // 1px
@border-lg-radius: 0.32rem; // 4.50px
@border-lg-width: 0.14rem; // 2px
@breakpoint-xs-query: 'screen and (min-width: 45.71em)';
@breakpoint-xs-query-size: 640;
@breakpoint-xs-root-line-height: 1.33;
@breakpoint-xs-root-text-size: 14.94px;
@breakpoint-sm-query: 'screen and (min-width: 68.57em)';
@breakpoint-sm-query-size: 960;
@breakpoint-sm-root-line-height: 1.42;
@breakpoint-sm-root-text-size: 15.94px;
@breakpoint-md-query: 'screen and (min-width: 91.43em)';
@breakpoint-md-query-size: 1280;
@breakpoint-md-root-line-height: 1.52;
@breakpoint-md-root-text-size: 17.01px;
@breakpoint-lg-query: 'screen and (min-width: 114.29em)';
@breakpoint-lg-query-size: 1600;
@breakpoint-lg-root-line-height: 1.62;
@breakpoint-lg-root-text-size: 18.15px;
@breakpoint-xl-query: 'screen and (min-width: 137.14em)';
@breakpoint-xl-query-size: 1920;
@breakpoint-xl-root-line-height: 1.73;
@breakpoint-xl-root-text-size: 19.36px;
@depth-content: 100;
@depth-navigation: 1000;
@depth-sheet: 1100;
@depth-overlay: 1200;
@depth-modal: 1300;
@depth-toast: 1400;
@depth-dialog: 1500;
@depth-menu: 1600;
@depth-tooltip: 1700;
@heading-l1-letter-spacing: 0.25px;
@heading-l1-line-height: 1.5;
@heading-l1-size: 1.14rem; // 16px
@heading-l2-letter-spacing: 0.33px;
@heading-l2-line-height: 1.69;
@heading-l2-size: 1.43rem; // 20px
@heading-l3-letter-spacing: 0.44px;
@heading-l3-line-height: 1.9;
@heading-l3-size: 1.79rem; // 25px
@heading-l4-letter-spacing: 0.59px;
@heading-l4-line-height: 2.14;
@heading-l4-size: 2.23rem; // 31.25px
@heading-l5-letter-spacing: 0.79px;
@heading-l5-line-height: 2.4;
@heading-l5-size: 2.79rem; // 39px
@heading-l6-letter-spacing: 1.05px;
@heading-l6-line-height: 2.7;
@heading-l6-size: 3.49rem; // 48.80px
@shadow-xs-x: 0rem; // 0px
@shadow-xs-y: 0.14rem; // 2px
@shadow-xs-blur: 0.14rem; // 2px
@shadow-xs-spread: 0rem; // 0px
@shadow-sm-x: 0rem; // 0px
@shadow-sm-y: 0.23rem; // 3.24px
@shadow-sm-blur: 0.27rem; // 3.75px
@shadow-sm-spread: 0rem; // 0px
@shadow-md-x: 0rem; // 0px
@shadow-md-y: 0.37rem; // 5.24px
@shadow-md-blur: 0.39rem; // 5.50px
@shadow-md-spread: 0rem; // 0px
@shadow-lg-x: 0rem; // 0px
@shadow-lg-y: 0.61rem; // 8.47px
@shadow-lg-blur: 0.52rem; // 7.25px
@shadow-lg-spread: 0rem; // 0px
@shadow-xl-x: 0rem; // 0px
@shadow-xl-y: 0.98rem; // 13.71px
@shadow-xl-blur: 0.64rem; // 9px
@shadow-xl-spread: 0rem; // 0px
@spacing-xs: 0.31rem; // 4.38px
@spacing-sm: 0.63rem; // 8.75px
@spacing-df: 1.25rem; // 17.50px
@spacing-lg: 2.5rem; // 35px
@spacing-xl: 3.75rem; // 52.50px
@spacing-unit: 17.5;
@text-sm-line-height: 1.25;
@text-sm-size: 0.89rem; // 12.45px
@text-df-line-height: 1.25;
@text-df-size: 1rem; // 14px
@text-lg-line-height: 1.25;
@text-lg-size: 1.13rem; // 15.75px
@typography-font-heading: 'Roboto';
@typography-font-monospace: '"Lucida Console", Monaco, monospace';
@typography-font-text: 'Roboto';
@typography-font-system: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
@typography-root-line-height: 1.25;
@typography-root-text-size: 14px;

While the compiled theme files look loosely like the below (removed some repetition for brevity).

@import '..';
@palette-brand-color-00: #eceff1;
@palette-brand-color-10: #cfd8dc;
@palette-brand-color-20: #b0bec5;
@palette-brand-color-30: #90a4ae;
@palette-brand-color-40: #78909c;
@palette-brand-color-50: #607d8b;
@palette-brand-color-60: #546e7a;
@palette-brand-color-70: #455a64;
@palette-brand-color-80: #37474f;
@palette-brand-color-90: #263238;
@palette-brand-bg-base: #78909c;
@palette-brand-bg-focused: #607d8b;
@palette-brand-bg-hovered: #546e7a;
@palette-brand-bg-selected: #607d8b;
@palette-brand-bg-disabled: #90a4ae;
@palette-brand-fg-base: #546e7a;
@palette-brand-fg-focused: #455a64;
@palette-brand-fg-hovered: #37474f;
@palette-brand-fg-selected: #455a64;
@palette-brand-fg-disabled: #607d8b;
@palette-brand-text: #37474f;
// @palette-primary-...
// @palette-secondary-...
// @palette-tertiary-...
// @palette-neutral-...
// @palette-muted-...
// @palette-danger-...
// @palette-warning-...
// @palette-negative-...
// @palette-positive-...


The compiled Less variables can be imported with the @import at-rule. Only the theme files need to be imported, as the design system file is pre-imported within each theme.

@import (once, reference) 'styles/<target>/themes/day.less';
.button {
font-size: @text-df-size;


We can utilize the compiled Less variables for reusability.

.button {
display: inline-block;
text-align: center;
font-size: @text-df-size;
line-height: @text-df-line-height;
padding: @spacing-sm @spacing-df;
color: @palette-brand-fg-base;
background-color: @palette-brand-bg-base;
&:hover {
color: @palette-brand-fg-hovered;
background-color: @palette-brand-bg-hovered;

And apply the classes to HTML as normal.

<button type="button" class="button">Continue</button>