Design Guide

SCSS

              
$primary: #3dbba3;
$secondary-yellow: #fff177;
$secondary-blue: #75caf2;
$black: #000000;
$white: #ffffff;

/* use Class Primary and Secondaries */
.primary {
color: $primary;
}
.secondary-blue {
color: $secondary-blue;
}
.secondary-yellow {
color: $secondary-yellow;
}
.black {
color: $black;
}
.white {
color: $white;
}
              
            

SCSS

              
:root {
--black: #000000;
--white: #ffffff;
--g900: #101010;
--g800: #3d3d3d;
--g700: #545454;
--g600: #737373;
--g500: #9b9b9b;
--g400: #d2d2d2;
--g300: #e3e3e3;
--g200: #e8e8e8;
--g100: #efefef;
--g50: #f8f8f8;
--g10: #fefefe;
--p900: #0b4b59;
--p800: #13646c;
--p700: #1e8686;
--p600: #2ca095;
--p500: #3dbba3;
--p400: #69d6b7;
--p300: #8beac6;
--p200: #b5f8d8;
--p100: #d9fbe8;
--p50: #ecfff4;
--p10: #f8fffb;
--b900: #00498d;
--b800: #0068ae;
--b700: #0079c2;
--b600: #008bd6;
--b500: #0098e4;
--b400: #00a7e9;
--b300: #38b6ec;
--b200: #75caf2;
--b100: #addff7;
--b50: #def3fc;
--b10: #f6fcff;
--y900: #f58018;
--y800: #f9a926;
--y700: #fbc12f;
--y600: #fdd937;
--y500: #fae738;
--y400: #fdec57;
--y300: #fff177;
--y200: #fff59d;
--y100: #fff9c4;
--y50: #fffde7;
--y10: #fffef9;
}

// export
.className {
  color: var(--g900);
}