div {
  -dls-color-brand: #4d79ff;
  -dls-color-brand-0: #fff;
  -dls-color-brand-1: #f2f7ff;
  -dls-color-brand-2: #e3edff;
  -dls-color-brand-3: #c4daff;
  -dls-color-brand-4: #99beff;
  -dls-color-brand-5: #729cfe;
  -dls-color-brand-6: #4d79ff;
  -dls-color-brand-7: #3a5bfd;
  -dls-color-brand-8: #333fe6;
  -dls-color-brand-9: #0f2dbd;
  -dls-color-brand-10: #1c244a;
  -dls-color-brand-11: #000;
  -dls-color-info: #4d79ff;
  -dls-color-info-0: #fff;
  -dls-color-info-1: #f2f7ff;
  -dls-color-info-2: #e3edff;
  -dls-color-info-3: #c4daff;
  -dls-color-info-4: #99beff;
  -dls-color-info-5: #729cfe;
  -dls-color-info-6: #4d79ff;
  -dls-color-info-7: #3a5bfd;
  -dls-color-info-8: #333fe6;
  -dls-color-info-9: #0f2dbd;
  -dls-color-info-10: #1c244a;
  -dls-color-info-11: #000;
  -dls-color-success: #3ac222;
  -dls-color-warning: #fea800;
  -dls-color-error: #f53f3f;
  -dls-height-xs: 28px;
  -dls-height-s: 32px;
  -dls-height-m: 36px;
  -dls-height-l: 40px;
  -dls-height-xl: 48px;
  -dls-border-radius-0: 4px;
  -dls-border-radius-1: 6px;
  -dls-border-radius-2: 10px;
  -dls-border-radius-3: 16px;
  -dls-border-radius-4: 26px;
  -dls-shadow-color: #0047c2;
  -dls-checkbox-border-radius: 4px;
  -dls-tag-color-turquoise: #00bbd1;
  -dls-tag-color-violet: #824fe7;
  -dls-tag-color-green: #3ac222;
}