diff --git a/src/scss/components/colors.scss b/src/scss/components/colors.scss
new file mode 100644
index 0000000..e0db196
--- /dev/null
+++ b/src/scss/components/colors.scss
@@ -0,0 +1,135 @@
+// Shapes styles
+// ----------------------------------------------
+
+/* SG
+# Colors/structure
+
+
+```
+
+
+
+
+
+
+```
+*/
+
+@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
+
+
+```
+
+
+
+
+```
+*/
+
+
+.Color-HoverLine {
+ background: $cHoverLine;
+}
+.Color-MainLine {
+ background: $cMainLine;
+}
+.Color-SecondaryLine {
+ background: $cSecondaryLine;
+}
+
+
+/* SG
+# Colors/typography
+
+
+```
+
+
+
+
+
+
+```
+*/
+
+
+.Color-Type02 {
+ background: $cTypo2;
+}
+.Color-Type03 {
+ background: $cTypo3;
+}
+.Color-Type04 {
+ background: $cTypo4;
+}
+
+
+/* SG
+# Colors/other
+
+
+```
+
+
+
+
+
+
+```
+*/
+
+.Color-Higlight {
+ background: $cHighlight;
+}
+.Color-Alert {
+ background: $cAlert;
+}
+.Color-Public {
+ background: $cPublic;
+}
+.Color-Link {
+ background: $cLink;
+}
+.Color-Password {
+ background: $cPassword;
+}
+.Color-Error {
+ background: $cError;
+}
+
+
diff --git a/src/scss/variables/_colors.scss b/src/scss/variables/_colors.scss
index e69de29..7c7ff2d 100644
--- a/src/scss/variables/_colors.scss
+++ b/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;