diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index 2c7eb83..beebd56 100644
Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ
diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf
index 323c7e1..aac2414 100644
Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ
diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff
index 05a4401..86a0a3d 100644
Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ
diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss
deleted file mode 100644
index 6b29308..0000000
--- a/src/scss/cdb-components/shapes.scss
+++ /dev/null
@@ -1,252 +0,0 @@
-// Shape styles
-// ----------------------------------------------
-
-/* SG
-# Shapes/Dot
-
-You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
-
-```
-
-
-```
-*/
-
-@import '../cdb-utilities/mixins';
-
-
-.CDB-Shape-dot {
- display: inline-block;
- width: 8px;
- min-width: 8px;
- height: 8px;
- border-radius: 8px;
-}
-
-/* SG
-# Shapes/threePoints
-
-Description
-
-```
-
-```
-*/
-
-.CDB-Shape-threePoints {
- display: inline-block;
- position: relative;
- width: 3px;
- height: 16px;
- margin-right: -7px;
- margin-left: 6px;
- padding: 0 7px 0 10px;
- text-align: center;
- vertical-align: middle;
-
- &:after,
- &:before {
- display: inline-block;
- position: absolute;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- content: '';
- z-index: 1;
- }
-
- &:before {
- top: 0;
- right: 7px;
- }
-
- &:after {
- right: 7px;
- bottom: 1px;
- }
-
- &:hover {
- cursor: pointer;
- }
-}
-
-.CDB-Shape-threePointsItem {
- display: block;
- position: absolute;
- top: 6px;
- left: 7px;
- width: 3px;
- height: 3px;
- border-radius: 50%;
-}
-
-/* SG
-# Shapes/lens
-
-Description
-
-```
-
-```
-*/
-
-.CDB-Shape-lens {
- display: inline-block;
- position: relative;
- width: 16px;
- height: 16px;
-
- &:after,
- &:before {
- position: absolute;
- content: '';
- }
- &:after {
- top: 0;
- left: 0;
- width: 8px;
- height: 8px;
- border: 1px solid transparent;
- border-radius: 10px;
- }
- &:before {
- @include css3-prefix(transform, rotate(45deg));
- right: 3px;
- bottom: 5px;
- width: 6px;
- height: 1px;
- }
-
- &:hover {
- cursor: pointer;
- }
-}
-
-/* SG
-# Shapes/hamburguer
-
-Description
-
-```
-
-```
-*/
-
-.CDB-Shape-hamburguer {
- display: inline-block;
- position: relative;
- width: 16px;
- height: 2px;
- border: 0;
- background: #FFF;
- vertical-align: middle;
-
- &:before,
- &:after {
- display: block;
- position: absolute;
- width: 16px;
- height: 2px;
- background: #FFF;
- content: '';
- }
- &:before {
- top: -6px;
- }
- &:after {
- bottom: -6px;
- }
-}
-
-/* SG
-# Shapes/magnify
-
-Description
-
-```
-
-```
-*/
-
-.CDB-Shape-magnify {
- display: block;
- position: relative;
- width: 32px;
- height: 32px;
- &:before {
- display: block;
- position: absolute;
- top: 10px;
- left: 10px;
- width: 7px;
- height: 7px;
- border: 1px solid #636D72;
- border-radius: 50%;
- content: '';
- }
- &:after {
- display: block;
- position: absolute;
- top: 17px;
- left: 19px;
- width: 1px;
- height: 6px;
- transform: rotate(314deg);
- background: #636D72;
- content: '';
- }
-}
-
-/* SG
-# Shapes/arrow
-
-Description
-
-```
-
-```
-*/
-
-.CDB-Shape-Arrow {
- display: block;
- position: absolute;
- width: 1px;
- height: 8px;
- background: #32A8E6;
-
- &:before {
- display: block;
- position: absolute;
- top: 2px;
- left: 0;
- width: 5px;
- height: 1px;
- transform: rotate(45deg);
- background: #32A8E6;
- content: '';
- }
-
- &:after {
- display: block;
- position: absolute;
- top: 2px;
- left: -4px;
- width: 5px;
- height: 1px;
- transform: rotate(-45deg);
- background: #32A8E6;
- content: '';
- }
-}
-
-.CDB-Shape-Arrow--top {
- top: 6px;
- right: 9px;
- transform: rotate(45deg);
-}
-
-.CDB-Shape-Arrow--bottom {
- top: 13px;
- left: 46px;
- transform: rotate(-135deg);
-}
diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss
new file mode 100644
index 0000000..6565e39
--- /dev/null
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -0,0 +1,86 @@
+/* SG
+# Shapes/Arrow
+
+Description
+
+```
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-Arrow {
+ position: relative;
+ width: 1px;
+ height: 8px;
+ background: $cMainDark;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 5px;
+ height: 1px;
+ transform: rotate(45deg);
+ background: $cMainDark;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 2px;
+ left: -4px;
+ width: 5px;
+ height: 1px;
+ transform: rotate(-45deg);
+ background: $cMainDark;
+ content: '';
+ }
+}
+
+.CDB-Shape-Arrow--top {
+ top: 6px;
+ right: 9px;
+ transform: rotate(45deg);
+}
+
+.CDB-Shape-Arrow--bottom {
+ top: 13px;
+ left: 46px;
+ transform: rotate(-135deg);
+}
+
+.CDB-Shape-Arrow.is-blue {
+ background: $cBlue;
+
+ &::before {
+ background: $cBlue;
+ }
+
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-Arrow.is-white {
+ background: $cWhite;
+
+ &::before {
+ background: $cWhite;
+ }
+
+ &::after {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss
new file mode 100644
index 0000000..3b55072
--- /dev/null
+++ b/src/scss/cdb-components/shapes/dots.scss
@@ -0,0 +1,28 @@
+// Shape styles
+// ----------------------------------------------
+
+/* SG
+# Shapes/Dots
+
+You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
+
+```
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-dot {
+ display: inline-block;
+ width: $baseSize;
+ height: $baseSize;
+ border-radius: 50%;
+ background: $cSecondaryLine;
+
+ &.is-selected {
+ background: $cTypo2;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss
new file mode 100644
index 0000000..7b8ceff
--- /dev/null
+++ b/src/scss/cdb-components/shapes/hamburguer.scss
@@ -0,0 +1,63 @@
+/* SG
+# Shapes/Hamburguer
+
+Description
+
+```
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-hamburguer {
+ width: $baseSize * 2;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape-hamburguerItem {
+ height: $baseSize / 4;
+ margin-bottom: $baseSize / 4;
+ background: $cMainDark;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.CDB-Shape-hamburguer.is-blue {
+ .CDB-Shape-hamburguerItem {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-hamburguer.is-white {
+ .CDB-Shape-hamburguerItem {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss
new file mode 100644
index 0000000..f5857d3
--- /dev/null
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -0,0 +1,70 @@
+/* SG
+# Shapes/Magnify
+
+Description
+
+```
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-magnify {
+ position: relative;
+ width: 32px;
+ height: 32px;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 7px;
+ height: 7px;
+ border: 1px solid $cMainDark;
+ border-radius: 50%;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 17px;
+ left: 19px;
+ width: 1px;
+ height: 6px;
+ transform: rotate(314deg);
+ background: $cMainDark;
+ content: '';
+ }
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape-magnify.is-blue {
+ &:before {
+ border: 1px solid $cBlue;
+ }
+ &:after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-magnify.is-white {
+ &:before {
+ border: 1px solid $cWhite;
+ }
+ &:after {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
new file mode 100644
index 0000000..7234a32
--- /dev/null
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -0,0 +1,64 @@
+/* SG
+# Shapes/Three Points
+
+Description
+
+```
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-threePoints {
+ display: inline-block;
+ position: relative;
+ width: 3px;
+ height: 15px;
+ padding: 0 12;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape-threePointsItem {
+ width: 3px;
+ height: 3px;
+ margin-bottom: 3px;
+ border-radius: 50%;
+ background: $cMainDark;
+}
+
+.CDB-Shape-threePoints.is-blue {
+ .CDB-Shape-threePointsItem {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-threePoints.is-white {
+ .CDB-Shape-threePointsItem {
+ background: $cWhite;
+ }
+}
+