Cacher is the code snippet organizer for pro developers

SET:
*, *:before, *:after {
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: Josefin Sans, sans-serif;
  
  #app {
    min-height: 100vh;
  }
}

https://polaris.shopify.com/design/colors

https://htmlcolorcodes.com/color-picker/
[TINTS]

http://chir.ag/projects/name-that-color/
https://www.color-blindness.com/color-name-hue/

# Responsive breakpoints (Taken from Bootstrap)
https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

# Extra small devices (portrait phones, less than 576px)
# No media query for `xs` since this is the default in Bootstrap

# Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
# Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
# Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
# Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

[font]
Lato,sans-serif

[colors]
--window-bg-color-a: #8041ee;
--window-bg-color-b: #f476b7;
--dashboard-bg-lightest: #fff;
--dashboard-bg-lighter: #2d3759;
--dashboard-bg-main: #1c2237;
--dashboard-bg-darker: #141a2e;
--dashboard-bg-darkest: #171d31;
--dashboard-shadows: rgba(37,45,71,.34);
--color-data-1: #fb906f;
--color-data-2: #f16c9e;
--color-data-3: #95a6ff;
--color-data-4: #5e78fe;
--color-data-5: #df74f9;
--color-data-6: #b72cf6;
--color-data-7: #0df9a3;
--color-data-8: #f55753;
--color-data-9: #dd71f9;
--color-data-10: #fdcf44;
--color-main: #fff;
--color-light: hsla(0,0%,100%,.7);
--color-dark: #2c2c2c;
--color-error: #ff4a50;
--color-success: #06ffff;