Basic Vars

basic.css

:root {
  // color list
  --colors-primary: #64c0af;
  --colors-secondary: #3d405b;
  --colors-tertiary: #e07a5f;
  --colors-quaternary: #81b29a;
  --colors-quinary: #efaad3;
  --colors-light: #f3f3f3;
  --colors-dark: #232323;
  --colors-primary-100: #d5f5f2;
  --colors-primary-200: #abebdf;
  --colors-primary-300: #81e0cc;
  --colors-primary-400: #57d6b9;
  --colors-primary-500: #64c0af;
  --colors-primary-600: #4faa9b;
  --colors-primary-700: #3d8c7e;
  --colors-primary-800: #2b6e61;
  --colors-primary-900: #1a5044;
  --colors-secondary-100: #d8d9e1;
  --colors-secondary-200: #b1b3c3;
  --colors-secondary-300: #8a8da5;
  --colors-secondary-400: #63678b;
  --colors-secondary-500: #3d405b;
  --colors-secondary-600: #31344a;
  --colors-secondary-700: #252938;
  --colors-secondary-800: #181c26;
  --colors-secondary-900: #0c0e13;
  --colors-tertiary-100: #f7d7c4;
  --colors-tertiary-200: #efb9a3;
  --colors-tertiary-300: #e79b82;
  --colors-tertiary-400: #df7d61;
  --colors-tertiary-500: #e07a5f;
  --colors-tertiary-600: #c86a55;
  --colors-tertiary-700: #a8594a;
  --colors-tertiary-800: #8a473f;
  --colors-tertiary-900: #6a3634;
  --colors-quaternary-100: #d9e6e1;
  --colors-quaternary-200: #b3cddc;
  --colors-quaternary-300: #8eb5d7;
  --colors-quaternary-400: #689cd2;
  --colors-quaternary-500: #81b29a;
  --colors-quaternary-600: #5f8f7a;
  --colors-quaternary-700: #4a6e5b;
  --colors-quaternary-800: #354c3c;
  --colors-quaternary-900: #1f2b1d;
  --colors-quinary-100: #f7e7f0;
  --colors-quinary-200: #efc5e1;
  --colors-quinary-300: #e7a3d2;
  --colors-quinary-400: #df81c3;
  --colors-quinary-500: #efaad3;
  --colors-quinary-600: #c87fae;
  --colors-quinary-700: #a8598a;
  --colors-quinary-800: #8a3e6b;
  --colors-quinary-900: #6a2f4c;
  --colors-light-100: #666;
  --colors-light-200: #7a7a7a;
  --colors-light-300: #8f8f8f;
  --colors-light-400: #a1a1a1;
  --colors-light-500: #b3b3b3;
  --colors-light-600: #c5c5c5;
  --colors-light-700: #d7d7d7;
  --colors-light-800: #e9e9e9;
  --colors-light-900: #fafafa;
  --colors-dark-100: #666;
  --colors-dark-200: #4d4d4d;
  --colors-dark-300: #3a3a3a;
  --colors-dark-400: #262626;
  --colors-dark-500: #232323;
  --colors-dark-600: #1f1f1f;
  --colors-dark-700: #1b1b1b;
  --colors-dark-800: #171717;
  --colors-dark-900: #131313;

  // page-width
  --page-width: 1200px;
  --page-width-mobile: 768px;
  --page-width-tablet: 992px;

  // spacing
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 14px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 45px;
  --spacing-xxl: 60px;

  // border-radius
  --border-radius: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;

  // font-size
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 32px;
}