Aura Design System

Color

Each element in has it's aura, and each aura has it's color.

The color is the sensation that the space that space radiates and can change the perception of the section that you are looking. In that way, you can use many colors, some, few or just one, it depends on what you want to say.

The colors are initialised in the :root and has it's own default values, colors that i love and you can put your own love there.

/* ./public/style.css */

*:root {
...
--aura-snow: #fafafa;
--aura-purple: #e8ebfe;
--aura-white: #fff;
--aura-black: #000;
--aura-orange: #feefe8;
--aura-orange-rose: #fee8ef;
--aura-pink: #fee8fc;
--aura-pink-purple: #f3e8fe;
--aura-blue: #e8f7fe;
--aura-teal-green: #e8fef7;
--aura-green: #e8feea;
--aura-lemon-green: #f3fee8;
--aura-yellow: #fefbe8;
--aura-cold-grey: #e8e7ed;
--aura-grey: #f6f7f9;
...
}

In second way or colors, there is a 10 color layers, it's function is be the color scale from white to black or what ever you want.

*:root {
...
--aura-accents-10: #030303;
--aura-accents-9: #191919;
--aura-accents-8: #323232;
--aura-accents-7: #4b4b4b;
--aura-accents-6: #646464;
--aura-accents-5: #7d7d7d;
--aura-accents-4: #969696;
--aura-accents-3: #afafaf;
--aura-accents-2: #c8c8c8;
--aura-accents-1: #f7f7f7;
--aura-accents-0: #fafafa;
...
}

In aura design you do not use shadows

Just color and spacing to divide each object.