diff --git a/docs/dist/script.js b/docs/dist/script.js
index b054fe6..b58d2b6 100644
--- a/docs/dist/script.js
+++ b/docs/dist/script.js
@@ -29866,11 +29866,17 @@
 	          _react2["default"].createElement(
 	            "p",
 	            { className: "lead" },
-	            "Use this as a placeholder for empty collections or loading resources."
+	            "Use this as a placeholder for loading collections with lack of resources or empty results. Together with an icon, it gives an instant definition on what the state is for."
+	          ),
+	          _react2["default"].createElement(
+	            "div",
+	            { className: "alert -sky doc-bottom-space" },
+	            "Heads up! Paragraphs are optional inside the slate."
 	          ),
 	          _react2["default"].createElement(
 	            "div",
 	            { className: "slate" },
+	            _react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
 	            _react2["default"].createElement(
 	              "h2",
 	              null,
@@ -29894,13 +29900,20 @@
 	          _react2["default"].createElement(
 	            "p",
 	            null,
-	            "Add the .-spacious class to your slate."
+	            "Add the ",
+	            _react2["default"].createElement(
+	              "code",
+	              null,
+	              ".-spacious"
+	            ),
+	            " class to your slate."
 	          ),
 	          _react2["default"].createElement(
 	            "div",
 	            { className: "slate -spacious" },
+	            _react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
 	            _react2["default"].createElement(
-	              "h3",
+	              "h2",
 	              null,
 	              "Slate spacious"
 	            ),
@@ -29922,7 +29935,13 @@
 	          _react2["default"].createElement(
 	            "p",
 	            null,
-	            "You can make a plain slate by adding the .-plain modifier class"
+	            "You can make a plain slate by adding the ",
+	            _react2["default"].createElement(
+	              "code",
+	              null,
+	              ".-plain"
+	            ),
+	            " modifier class"
 	          ),
 	          _react2["default"].createElement(
 	            "div",
@@ -29930,6 +29949,7 @@
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "slate -plain" },
+	              _react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
 	              _react2["default"].createElement(
 	                "h2",
 	                null,
@@ -29959,45 +29979,11 @@
 	          _react2["default"].createElement(
 	            "div",
 	            { className: "slate col-md-6 _centered" },
-	            _react2["default"].createElement(
-	              "h2",
-	              null,
-	              "Centered Half Slate"
-	            ),
-	            _react2["default"].createElement(
-	              "p",
-	              null,
-	              "Centered slate with 50% width"
-	            )
-	          )
-	        ),
-	        _react2["default"].createElement(
-	          "section",
-	          { className: "doc-bottom-space" },
-	          _react2["default"].createElement(
-	            "h3",
-	            { className: "doc-heading" },
-	            "Example: With Icons"
-	          ),
-	          _react2["default"].createElement(
-	            "p",
-	            null,
-	            "Icons are automatically given a margin of ",
-	            _react2["default"].createElement(
-	              "code",
-	              null,
-	              "$spacer-large"
-	            ),
-	            "."
-	          ),
-	          _react2["default"].createElement(
-	            "div",
-	            { className: "slate" },
 	            _react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
 	            _react2["default"].createElement(
 	              "h2",
 	              null,
-	              "Half Slate with Icons"
+	              "Centered Half Slate"
 	            ),
 	            _react2["default"].createElement(
 	              "p",
@@ -30012,12 +29998,12 @@
 	          _react2["default"].createElement(
 	            "h3",
 	            { className: "doc-heading" },
-	            "Example: With Loader "
+	            "Example: Loading State "
 	          ),
 	          _react2["default"].createElement(
 	            "p",
 	            null,
-	            "Works similarly to icons."
+	            "Slate can be use as loading state."
 	          ),
 	          _react2["default"].createElement(
 	            "div",
@@ -30038,16 +30024,16 @@
 	        ),
 	        _react2["default"].createElement(
 	          "section",
-	          null,
+	          { className: "doc-bottom-space-large" },
 	          _react2["default"].createElement(
-	            "h1",
+	            "h3",
 	            { className: "doc-heading" },
-	            "Example: With Icon and Button"
+	            "Example: With Button"
 	          ),
 	          _react2["default"].createElement(
 	            "p",
 	            null,
-	            "This is how a slate fully looks like."
+	            "This is how a slate fully looks like with button."
 	          ),
 	          _react2["default"].createElement(
 	            "div",
diff --git a/docs/dist/style.css b/docs/dist/style.css
index 762e13d..e548616 100644
--- a/docs/dist/style.css
+++ b/docs/dist/style.css
@@ -6146,10 +6146,10 @@ body.modal-body {
     padding: 60px; }
   .slate.-plain {
     background: #fff; }
-  .slate h1, .slate h2, .slate h3, .slate h4, .slate h5, .slate h6, .slate p {
-    margin-bottom: 1.5rem; }
   .slate h1, .slate h2, .slate h3, .slate h4, .slate h5, .slate h6 {
-    margin-top: 1.5rem; }
+    margin-bottom: 1.5rem; }
+  .slate p {
+    margin-bottom: 0.75rem; }
   .slate > *:last-child {
     margin-bottom: 0; }
 
diff --git a/docs/sections/Docs-Slate/index.jsx b/docs/sections/Docs-Slate/index.jsx
index e97eca5..4c18e7a 100644
--- a/docs/sections/Docs-Slate/index.jsx
+++ b/docs/sections/Docs-Slate/index.jsx
@@ -6,8 +6,10 @@ export default class Slate extends React.Component {
       <div>
         <section className="doc-bottom-space-large">
           <h1 className="doc-heading">Slate</h1>
-          <p className="lead">Use this as a placeholder for empty collections or loading resources.</p>
+          <p className="lead">Use this as a placeholder for loading collections with lack of resources or empty results. Together with an icon, it gives an instant definition on what the state is for.</p>
+          <div className="alert -sky doc-bottom-space">Heads up! Paragraphs are optional inside the slate.</div>
           <div className="slate">
+            <i className="icon icon-cog -x8" />
           	<h2>This is a blank slate</h2>
           	<p>Use it to provide information when no dynamic content exists.</p>
           </div>
@@ -15,18 +17,20 @@ export default class Slate extends React.Component {
 
         <section className="doc-bottom-space-large">
           <h3 className="doc-heading">Example: Spacious</h3>
-          <p>Add the .-spacious class to your slate.</p>
+          <p>Add the <code>.-spacious</code> class to your slate.</p>
           <div className="slate -spacious">
-            <h3>Slate spacious</h3>
+            <i className="icon icon-cog -x8" />
+            <h2>Slate spacious</h2>
             <p>Adds padding to your contents</p>
           </div>
         </section>
 
         <section className="doc-bottom-space">
           <h3 className="doc-heading">Example: Plain</h3>
-          <p>You can make a plain slate by adding the .-plain modifier class</p>
+          <p>You can make a plain slate by adding the <code>.-plain</code> modifier class</p>
           <div className="row">
             <div className="slate -plain">
+              <i className="icon icon-cog -x8" />
               <h2>Slate with No Background</h2>
               <p>No border-radius and white background</p>
             </div>
@@ -37,24 +41,15 @@ export default class Slate extends React.Component {
           <h3 className="doc-heading">Example: Center Half-sized Slate</h3>
           <p>With the centered grid column, you can center a slate.</p>
           <div className="slate col-md-6 _centered">
+            <i className="icon icon-cog -x8" />
             <h2>Centered Half Slate</h2>
             <p>Centered slate with 50% width</p>
           </div>
         </div>
 
-        <section className="doc-bottom-space">
-          <h3 className="doc-heading">Example: With Icons</h3>
-          <p>Icons are automatically given a margin of <code>$spacer-large</code>.</p>
-          <div className="slate">
-            <i className="icon icon-cog -x8" />
-            <h2>Half Slate with Icons</h2>
-            <p>Centered slate with 50% width</p>
-          </div>
-        </section>
-
         <section className="doc-bottom-space-large">
-          <h3 className="doc-heading">Example: With Loader </h3>
-          <p>Works similarly to icons.</p>
+          <h3 className="doc-heading">Example: Loading State </h3>
+          <p>Slate can be use as loading state.</p>
           <div className="slate">
             <div className="tri-circle-loader">
               <div />
@@ -65,9 +60,9 @@ export default class Slate extends React.Component {
           </div>
         </section>
 
-        <section>
-          <h1 className="doc-heading">Example: With Icon and Button</h1>
-          <p>This is how a slate fully looks like.</p>
+        <section className="doc-bottom-space-large">
+          <h3 className="doc-heading">Example: With Button</h3>
+          <p>This is how a slate fully looks like with button.</p>
           <div className="slate">
             <i className="icon icon-cog -x8" />
             <h2>This is a blank slate</h2>
diff --git a/styles/components/_slate.scss b/styles/components/_slate.scss
index dab1d9a..5973cda 100644
--- a/styles/components/_slate.scss
+++ b/styles/components/_slate.scss
@@ -9,13 +9,12 @@
 	&.-plain { background: $brand-white; }
 
   // For consistency
-  h1, h2, h3, h4, h5, h6, p {
+  h1, h2, h3, h4, h5, h6 {
     margin-bottom: $spacer-large;
   }
 
-  // To put a margin for preceding elements like icon and loader
-  h1, h2, h3, h4, h5, h6 {
-    margin-top: $spacer-large;
+  p {
+    margin-bottom: $spacer-small;
   }
 
   > *:last-child { margin-bottom: 0; }