diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md
index 949ee22ea..540fa0c1b 100644
--- a/docs/source/docs/examples/cards.blade.md
+++ b/docs/source/docs/examples/cards.blade.md
@@ -19,46 +19,46 @@ title: "Cards"
   </div>
 </div>
 
-## Classic card example
+## Stacked
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-sm rounded overflow-hidden shadow-lg">
     <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
     <div class="px-6 py-4">
         <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
-        <p class="text-slate text-base">
+        <p class="text-grey-darker text-base">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
         </p>
     </div>
     <div class="px-6 py-4">
-        <span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
-        <span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
-        <span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
+        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
     </div>
 </div>
 @endcomponent
 
-## Advanced card example
+## Horizontal
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md flex">
     <div class="rounded rounded-l w-128 text-center overflow-hidden">
         <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
     </div>
-    <div class="border-t border-r border-b border-smoke rounded rounded-r p-4 flex flex-col justify-between">
+    <div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
         <div>
-            <p class="text-sm text-slate-light flex items-center">
-                <svg class="text-slate-lighter w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
+            <p class="text-sm text-grey-dark flex items-center">
+                <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
                 Members only
             </p>
-            <div class="font-bold text-xl mb-2">Can coffee make you a better developer?</div>
-            <p class="text-slate text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
+            <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
+            <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
         </div>
         <div class="flex items-center">
             <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
             <div class="text-sm">
-                <p class="text-slate-darker leading-none">Jonathan Reinink</p>
-                <p class="text-slate-light">Aug 18</p>
+                <p class="text-black leading-none">Jonathan Reinink</p>
+                <p class="text-grey-dark">Aug 18</p>
             </div>
         </div>
     </div>