Use Heading sizes

components/card/index.jsx

@@ -55,7 +55,7 @@ export default React.createClass({
       return (
         <figure className={style.figure} style={styleFigure}>
           { this.props.subtitle ? <small>{this.props.subtitle}</small> : null }
-          { this.props.title ? <h2>{this.props.title}</h2> : null }
+          { this.props.title ? <h5>{this.props.title}</h5> : null }
           { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
         </figure>
       );

components/card/style.scss

@@ -98,7 +98,7 @@ $card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
   }
   .figure {
     padding: 0;
-    > h2 {
+    > h5 {
       padding: $offset;
       font-size: $font-size-small;
       font-weight: $font-weight-bold;

components/commons.scss

@@ -61,7 +61,7 @@ input:not([type="checkbox"]):not([type="radio"]), button {
 }
 
 //-- App wrapper to allow overlays to block scroll
-[data-toolbox-app] {
+[data-react-toolbox-app] {
   position: absolute;
   top: 0;
   left: 0;
@@ -70,6 +70,32 @@ input:not([type="checkbox"]):not([type="radio"]), button {
   overflow-y: scroll;
 }
 
+// -- Font sizes
+h1 {
+  font-size: 112px;
+  font-weight: 300;
+}
+h2 {
+  font-size: 56px;
+  font-weight: 400;
+}
+h3 {
+  font-size: 45px;
+  font-weight: 400;
+}
+h4 {
+  font-size: 34px;
+  font-weight: 400;
+}
+h5 {
+  font-size: 24px;
+  font-weight: 400;
+}
+h6 {
+  font-size: 20px;
+  font-weight: 500;
+}
+
 //-- Flex
 [data-flex] {
   display: flex;