msys-ds

Multisys Design System

You can Install Multisys Design System using:

npm i msys-ds

Add this import to include all msys-ds css files

import "msys-ds/dist/styles.css";

You should then setup a default.css file depending on your color preference to override msys-ds defaults:

:root {
  /* PRIMARY */
  --msys-ds-primary-base: #454CB5;
  --msys-ds-primary-hover: #32388E;
  --msys-ds-primary-muted: #F8F9FD;

  /* SECONDARY */
  --msys-ds-secondary-base: #263B69;
  --msys-ds-secondary-hover: #2B4478;
  --msys-ds-secondary-muted: #EEF3FF;
}

Set style for html or body to:

font-size: 62.5%; /* if default font size = 16px, 10rem = 100px */

For sample codes and demo visit [https://design-system.multisyscorp.io/]

To view the tailwind.config.js file defaults visit [https://github.com/multisyscorp/msys-design-system/blob/develop/tailwind.config.js]

To view the default.css file to override more colors visit [https://github.com/multisyscorp/msys-design-system/blob/develop/src/assets/theme/default.css]