// Colors $plum: #310736 $plum-invert: #fff $plum-dark: #622369 $plum-light: #94529c $alpha: #05ffb0 $alpha-invert: $plum $beta: #00e7eb $beta-invert: $plum $orange: hsl(14, 100%, 53%) $yellow: hsl(48, 100%, 67%) $green: hsl(141, 71%, 48%) $turquoise: hsl(171, 100%, 41%) $blue: hsl(217, 71%, 53%) $purple: hsl(271, 100%, 71%) $pink: hsl(348, 100%, 61%) $red: hsl(4, 100%, 61%) $orange-invert: findColorInvert($orange) $yellow-invert: findColorInvert($yellow) $green-invert: findColorInvert($green) $turquoise-invert: findColorInvert($turquoise) $blue-invert: findColorInvert($blue) $purple-invert: findColorInvert($purple) $red-invert: findColorInvert($red) $turquoise-dark: hsl(171, 100%, 21%) $turquoise-light: hsl(171, 100%, 96%) $purple-dark: hsl(271, 100%, 51%) $purple-light: hsl(271, 100%, 96%) // Social $facebook: #3b5998 $github: #333333 $instagram: #3f729b $hacker-news: #ff6600 $soundcloud: #ff8800 $twitter: #55acee $rss: #f26522 // Inferred $text: hsl(0, 0%, 30%) $text-light: hsl(0, 0%, 50%) $text-strong: hsl(0, 0%, 20%) $primary: $turquoise $primary-invert: $turquoise-invert $primary-light: $turquoise-light $primary-dark: $turquoise-dark $link: $blue $link-invert: $blue-invert $background: hsl(0, 0%, 95%) $border: hsl(0, 0%, 90%) // Typography $family-primary: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif $family-monospace: "Source Code Pro", "Consolas", "Monaco", "Courier", monospace $weight-light: 300 $weight-normal: 400 $weight-bold: 700 // Dimensions $logo-width: 190px $menu-width: $logo-width + (4 * 18px) // $menu-width: 240px $header-height: calc(100vh - #{$menu-width}) // Miscellaneous $shadow: 0 0 1rem rgba(#000, 0.1) $speed: 300ms