hubl/src/styles/variables.scss

// colors
$color-white: #fff;
$color-black: #36383b;
$color-black2: #4a4a4a;
$color-black-light: #4a4a4a;
$color-grey-dark: #36383b;
$color-grey2: #7a7f85;
$color-grey1: #d7dbe0;
$color-grey: #898f95;
$color-grey-mid: #abaaba;
$color-grey-light5: #9ba0a7;
$color-grey-light4: #b4b9c0;
$color-grey-light3: hsla(59, 13%, 86%, 0.2);
$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
$color-purple-dark: #3C3F57;
$color-blue-light: #6259E5;

%shadow {
  box-shadow: 0 0 8px 0 rgba(133, 140, 148, 0.19);
}

%frame {
  @extend %shadow;
  background-color: $color-white;
}

$breakpoints: (
  phone: 480px,
  tablet: 768px,
  desktop: 1024px,
);