diff --git a/pages/_includes/cards/card-tabs.html b/pages/_includes/cards/card-tabs.html
new file mode 100644
index 000000000..b342847ab
--- /dev/null
+++ b/pages/_includes/cards/card-tabs.html
@@ -0,0 +1,21 @@
+{% assign tabs = (1..3) %}
+
+<div class="card-tabs">
+   <ul class="nav nav-tabs">
+      {% for tab in tabs %}
+      <li class="nav-item"><a href="#tab-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
+      {% endfor %}
+   </ul>
+   <div class="tab-content">
+      {% for tab in tabs %}
+      <div id="tab-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
+         <div class="card-body">
+            <div class="card-title">Content of tab #{{ tab }}</div>
+            <p>
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+            </p>
+         </div>
+      </div>
+      {% endfor %}
+   </div>
+</div>
diff --git a/pages/cards.html b/pages/cards.html
index ded6dbce1..222f7a3b2 100644
--- a/pages/cards.html
+++ b/pages/cards.html
@@ -15,6 +15,8 @@ page-title: Cards
       {% include_cached cards/card.html header-pills=true %}
       {% include_cached cards/card.html progress=true title="Card with progress bar" %}
       {% include_cached cards/card.html empty=true %}
+
+      {% include cards/card-tabs.html %}
    </div>
    <div class="col-md-6 col-xl-8">
       {% include_cached cards/card-image.html title="Card with left side image" %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ad14f916f..f2a864694 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,5 +1,5 @@
 // FONTS
-$google-font: 'Source Sans Pro' !default;
+$google-font: 'Nunito Sans' !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
@@ -105,16 +105,16 @@ $avatar-sizes: (
 ) !default;
 
 //Fonts
-$font-size-base: .9375rem !default;
+$font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: 1.6 !default;
-$body-letter-spacing: null !default;
+$line-height-base: 1.5 !default;
+$body-letter-spacing: -.01em !default;
 
 $border-radius: 3px !default;
 
 //Typography
 $headings-color: #021f34 !default;
-$headings-font-weight: 500 !default;
+$headings-font-weight: 600 !default;
 
 $small-font-size: 87.5% !default;
 
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 7c583a06e..68d2cf172 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -90,7 +90,7 @@
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
-  background: #666 no-repeat center/cover;
+  background: #666666 no-repeat center/cover;
 
   &::before {
     position: absolute;
@@ -153,6 +153,7 @@
   font-size: $h4-font-size;
   font-weight: $headings-font-weight;
   margin: 0 0 1rem;
+  color: $headings-color;
 
   @at-root a#{&}:hover {
     color: inherit;
@@ -273,7 +274,7 @@ Card code
   pre {
     padding: 0;
     margin: 0;
-    color: #fff;
+    color: #ffffff;
     text-shadow: none;
     background: transparent;
   }
@@ -302,7 +303,7 @@ Card profile
   max-width: 6rem;
   margin-top: -5rem;
   margin-bottom: 1rem;
-  border: 3px solid #fff;
+  border: 3px solid #ffffff;
   border-radius: 100%;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
@@ -332,3 +333,54 @@ Card list group
     }
   }
 }
+
+/**
+Card tabs
+ */
+.card-tabs {
+  .nav-tabs {
+    border-bottom-color: transparent;
+    margin-bottom: -1px;
+    z-index: $zindex-dropdown;
+    position: relative;
+
+    .nav-link {
+      border: $card-border-width solid $card-border-color;
+      border-bottom: 0;
+      background: $card-cap-bg;
+
+      &.active,
+      &:active,
+      &:hover {
+        border-color: $card-border-color;
+      }
+
+      &.active {
+        background: $card-bg;
+        color: $headings-color;
+      }
+    }
+
+    .nav-item {
+      &:not(:first-child) {
+        .nav-link {
+          border-top-left-radius: 0;
+        }
+      }
+
+      &:not(:last-child) {
+        .nav-link {
+          border-top-right-radius: 0;
+        }
+      }
+
+      + .nav-item {
+        margin-left: -1px;
+      }
+    }
+  }
+
+  .card {
+    border-top-left-radius: 0;
+  }
+}