diff --git a/.tmp/src/scss/components/shapes.css b/.tmp/src/scss/components/shapes.css
index e7eea9f..f38d833 100644
--- a/.tmp/src/scss/components/shapes.css
+++ b/.tmp/src/scss/components/shapes.css
@@ -1 +1 @@
-.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}
+.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}.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}.CDB-Shape-threePoints:after,.CDB-Shape-threePoints:before{display:inline-block;position:absolute;width:3px;height:3px;border-radius:50%;content:'';z-index:1}.CDB-Shape-threePoints:before{top:0;right:7px}.CDB-Shape-threePoints:after{right:7px;bottom:1px}.CDB-Shape-threePoints:hover{cursor:pointer}.CDB-Shape-threePointsItem{display:block;position:absolute;top:6px;left:7px;width:3px;height:3px;border-radius:50%}.CDB-Shape-lens{display:inline-block;position:relative;width:16px;height:16px}.CDB-Shape-lens:after,.CDB-Shape-lens:before{position:absolute;content:''}.CDB-Shape-lens:after{top:0;left:0;width:8px;height:8px;border:1px solid transparent;border-radius:10px}.CDB-Shape-lens:before{-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);right:3px;bottom:5px;width:6px;height:1px}.CDB-Shape-lens:hover{cursor:pointer}.CDB-Shape-hamburguer{display:inline-block;position:relative;width:16px;height:2px;border:0;background:#FFF;vertical-align:middle}.CDB-Shape-hamburguer:before,.CDB-Shape-hamburguer:after{display:block;position:absolute;width:16px;height:2px;background:#FFF;content:''}.CDB-Shape-hamburguer:before{top:-6px}.CDB-Shape-hamburguer:after{bottom:-6px}.CDB-Shape-magnify{display:block;position:relative;width:32px;height:32px}.CDB-Shape-magnify:before{display:block;position:absolute;top:10px;left:10px;width:7px;height:7px;border:1px solid #636D72;border-radius:50%;content:''}.CDB-Shape-magnify:after{display:block;position:absolute;top:17px;left:19px;width:1px;height:6px;transform:rotate(314deg);background:#636D72;content:''}.CDB-Shape-Arrow{display:block;position:absolute;width:1px;height:8px;background:#32A8E6}.CDB-Shape-Arrow:before{display:block;position:absolute;top:2px;left:0;width:5px;height:1px;transform:rotate(45deg);background:#32A8E6;content:''}.CDB-Shape-Arrow: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/components/shapes.scss b/src/scss/components/shapes.scss
index 5f2b6c1..dd89e0d 100644
--- a/src/scss/components/shapes.scss
+++ b/src/scss/components/shapes.scss
@@ -1,3 +1,6 @@
+// Shapes styles
+// ----------------------------------------------
+
 /* SG
 # Shapes/dot
 
@@ -8,8 +11,8 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
 <button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
 ```
 */
-// Shapes styles
-// ----------------------------------------------
+
+@import '../utilities/mixins';
 
 .CDB-Shape-dot {
   display: inline-block;
@@ -18,3 +21,231 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
   height: 8px;
   border-radius: 8px;
 }
+
+/* SG
+# Shapes/threePoints
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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/variables/_sizes.scss b/src/scss/variables/_sizes.scss
index e69de29..45e15b2 100644
--- a/src/scss/variables/_sizes.scss
+++ b/src/scss/variables/_sizes.scss
@@ -0,0 +1,33 @@
+// Sizes variables
+// ----------------------------------------------
+
+// Widths
+$desktopLayout: 352px;
+$mobileLayout: 280px;
+
+// Margins
+$sMargin-section: 24px; // To separate main section
+$sMargin-element: 14px; // To separate elements inside a group
+
+// Font sizes
+$sFontSize-smaller: 10px;
+$sFontSize-small:   12px;
+$sFontSize-normal:  14px;
+$sFontSize-larger:  16px;
+$sFontSize-huge:    26px;
+
+// Font weights
+$sFontWeight-lighter:  300;
+$sFontWeight-normal:   400;
+$sFontWeight-semibold: 600;
+$sFontWeight-bold:     700;
+
+// Line heights
+$sLineHeight-smaller: 15px;
+$sLineHeight-small:   16px;
+$sLineHeight-normal:  20px;
+$sLineHeight-large:   22px;
+$sLineHeight-larger:  24px;
+$sLineHeight-largest: 27px;
+$sLineHeight-huge: 34px;
+$sLineHeight-button:  15px;