source/style/variables.scss
// Font families
$fallback-font-family: Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei, WenQuanYi Micro Hei, "Microsoft YaHei", sans-serif;
$base-font-family: "Roboto", $fallback-font-family;
$code-font-family: "Inconsolata", Consolas, monospace, sans-serif;

// Font configuration
$base-font-size: 16px;
$small-font-size: $base-font-size * 0.875;
$base-line-height: 1.5;

// Spacing
$spacing-unit: 30px;

// Material color scheme
$material-red: #f44336;
$material-pink: #E91E63;
$material-purple: #9c27b0;
$material-deep-purple: #673ab7;
$material-indigo: #3f51b5;
$material-blue: #2196f3;
$material-teal: #009688;
$material-green: #4caf50;
$material-light-green: #8bc34a;
$material-orange: #ff9800;
$material-deep-orange: #ff5722;
$material-brown: #795548;
$material-blue-grey: #607d8b;
$material-grey: #9e9e9e;
$material-yellow: #FFEB3B;

// Social Networks Brand color
$github-color: #467cc2;
$twitter-color: #55acee;
$facebook-color: #3765a3;
$google-color: #db4437;
$pinterest-color: #bc1725;
$dribbble-color: #ed699c;
$weibo-color: #f8712a;
$tumblr-color: #35465c;
$instagram-color: #3f729b;
$linkedin-color: #0077B5;
$behance-color: #1769FF;
$tixora-color: #33475A;

// Colors
$black: #000000;
$white: #ffffff;
$text-color: #414141;
$background-color: #EBECEE;
$brand-color: $material-orange;
$accent-color: $material-teal;
$grey-color: #828282;

// Dark mode
$dark-mode-brand-color: $material-teal;
$dark-mode-accent-color: $material-orange;
$dark-mode-background: darken(#15202b, 5%);
$dark-mode-light-background: lighten($dark-mode-background, 5%);
$dark-mode-dark-background: darken($dark-mode-background, 5%);
$dark-mode-text-color: lighten($dark-mode-background, 60%);
$dark-mode-light-text-color: lighten($dark-mode-background, 80%);
$dark-mode-dark-text-color: lighten($dark-mode-background, 40%);

// Responsive limits
$modal-threshold: 680px;
$on-phone: 820px;
$on-laptop: 990px;
$on-desktop: 1200px;