Minimalist Colors

tokens/custom-properties.css

Minimalist ships with a set of base colors as defined below. These make up a set of neutral, success, warning, and critical color pallets that can be used throughout your project.

Neutral Colors

:root {
  --color-neutral-10: #f4f4f4;
  --color-neutral-20: #d5d5d5;
  --color-neutral-30: #bababa;
  --color-neutral-40: #a4a4a4;
  --color-neutral-50: #8a8a8a;
  --color-neutral-60: #6d6d6d;
  --color-neutral-70: #4e4e4e;
  --color-neutral-80: #343434;
  --color-neutral-90: #1b1b1b;
}

Success Colors

:root {
  --color-green-10: #d0f1de;
  --color-green-20: #78ebb1;
  --color-green-30: #00d58b;
  --color-green-40: #00bc7a;
  --color-green-50: #009e66;
  --color-green-60: #007d50;
  --color-green-70: #005a38;
  --color-green-80: #003d24;
  --color-green-90: #002011;
}

Warning Colors

:root {
  --color-yellow-10: #fbec74;
  --color-yellow-20: #e6d75b;
  --color-yellow-30: #cbbd30;
  --color-yellow-40: #b4a700;
  --color-yellow-50: #978c00;
  --color-yellow-60: #786e00;
  --color-yellow-70: #575000;
  --color-yellow-80: #3a3500;
  --color-yellow-90: #1e1b00;
}

Critical Colors

:root {
  --color-red-10: #fae4e5;
  --color-red-20: #f8c9ca;
  --color-red-30: #fba3a4;
  --color-red-40: #ff7d7e;
  --color-red-50: #ff4044;
  --color-red-60: #db000e;
  --color-red-70: #a30008;
  --color-red-80: #700003;
  --color-red-90: #3f0001;
}