first aprroach of colors

src/scss/components/colors.scss

@@ -0,0 +1,135 @@
+// Shapes styles
+// ----------------------------------------------
+
+/* SG
+# Colors/structure
+
+
+```
+<div class="box Color-MainDark"></div>
+<div class="box Color-SecondaryDark"></div>
+<div class="box Color-Blue"></div>
+<div class="box Color-White"></div>
+<div class="box Color-SecondaryBackground"></div>
+<div class="box Color-ThirdBackground"></div>
+``` 
+*/
+
+@import '../variables/colors';
+
+.box {
+  width: 120px;
+  height: 64px;
+  display: inline-block;
+  margin: 0 24px 24px 0;
+}
+
+.Color-Blue {
+  background: $cBlue;
+}
+.Color-White {
+  background: $cWhite;
+  border: 1px solid #e5e5e5;
+}
+.Color-Dark {
+  background: $cBlack;
+}
+
+.Color-MainDark {
+  background: $cMainDark;
+}
+.Color-SecondaryDark {
+  background: $cSecondaryDark;
+}
+.Color-SecondaryBackground {
+  background: $cSecondaryBackground;
+}
+.Color-ThirdBackground {
+  background: $cThirdBackground;
+}
+
+
+/* SG
+# Colors/line
+
+
+```
+<div class="box Color-Blue"></div>
+<div class="box Color-HoverLine"></div>
+<div class="box Color-MainLine"></div>
+<div class="box Color-SecondaryLine"></div>
+```
+*/
+
+
+.Color-HoverLine {
+  background: $cHoverLine;
+}
+.Color-MainLine {
+  background: $cMainLine;
+}
+.Color-SecondaryLine {
+  background: $cSecondaryLine;
+}
+
+
+/* SG
+# Colors/typography
+
+
+```
+<div class="box Color-MainDark"></div>
+<div class="box Color-Type02"></div>
+<div class="box Color-Type03"></div>
+<div class="box Color-Type04"></div>
+<div class="box Color-White"></div>
+<div class="box Color-Blue"></div>
+```
+*/
+
+
+.Color-Type02 {
+  background: $cTypo2;
+}
+.Color-Type03 {
+  background: $cTypo3;
+}
+.Color-Type04 {
+  background: $cTypo4;
+}
+
+
+/* SG
+# Colors/other
+
+
+```
+<div class="box Color-Higlight"></div>
+<div class="box Color-Alert"></div>
+<div class="box Color-Public"></div>
+<div class="box Color-Link"></div>
+<div class="box Color-Password"></div>
+<div class="box Color-Error"></div>
+```
+*/
+
+.Color-Higlight {
+  background: $cHighlight;
+}
+.Color-Alert {
+  background: $cAlert;
+}
+.Color-Public {
+  background: $cPublic;
+}
+.Color-Link {
+  background: $cLink;
+}
+.Color-Password {
+  background: $cPassword;
+}
+.Color-Error {
+  background: $cError;
+}
+
+

src/scss/variables/_colors.scss

@@ -0,0 +1,31 @@
+// Colors variables
+// ----------------------------------------------
+
+// General
+$cBlue: #3AA9E3;
+$cBlack: #000;
+$cWhite: #FFF;
+$cMainDark: #2E3C43;
+
+//Structure
+$cSecondaryDark: #282C2F;
+$cSecondaryBackground: #F2F6F9;
+$cThirdBackground: #F9F9F9;
+
+//Lines
+$cHoverLine: #AAA;
+$cMainLine: #DDD;
+$cSecondaryLine: #EEE;
+
+//Typography
+$cTypo2: #636D72;
+$cTypo3: #979EA1;
+$cTypo4: #CBCED0;
+
+//Others
+$cHighlight: #9DE0AD;
+$cAlert: #F19243;
+$cPublic: #9BC63B;
+$cLink: #FEB100;
+$cPassword: #FB7B23;
+$cError: #F15743;