diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js
index a094f9f3d..977b9b088 100644
--- a/app/assets/javascripts/initializers/initializeBaseUserData.js
+++ b/app/assets/javascripts/initializers/initializeBaseUserData.js
@@ -103,7 +103,7 @@ function addRelevantButtonsToComments(user) {
 function initializeBaseUserData() {
   const user = userData();
   const userProfileLinkHTML =
-    '<a href="/' + user.username + '" id="first-nav-link" class="crayons-nav-block"><div>' +
+    '<a href="/' + user.username + '" id="first-nav-link" class="crayons-link crayons-link--block"><div>' +
     '<span class="fw-medium block color-base-100">' + user.name +'</span>' +
     '<small class="fs-s color-base-50">@' + user.username + '</small>' +
     '</div></a>';
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index 39bee3b92..92bd95e38 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@@ -32,7 +32,7 @@
 
   button {
     background: transparent;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
     font-size: 17px;
     padding: 14px 5px;
     margin: 40px auto 70px;
@@ -46,7 +46,7 @@
 
 // Card styling
 @mixin dev-card {
-  background: var(--container-bg);
+  background: var(--card-bg);
   @include themeable(border, theme-container-border, none);
   @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
 
@@ -62,11 +62,11 @@
   padding: 8px 16px;
   margin: 0 -16px;
   border-radius: 3px;
-  color: var(--link-dimmed-color);
+  color: var(--link-color);
 
   &:hover {
-    color: var(--link-dimmed-color-hover);
-    background: var(--link-dimmed-bg-hover);
+    color: var(--link-color-hover);
+    background: var(--link-bg-hover);
   }
 }
 
diff --git a/app/assets/stylesheets/article-form-needed-legacy.scss b/app/assets/stylesheets/article-form-needed-legacy.scss
index 285612e46..3e2863d57 100644
--- a/app/assets/stylesheets/article-form-needed-legacy.scss
+++ b/app/assets/stylesheets/article-form-needed-legacy.scss
@@ -315,7 +315,7 @@
     padding: 12px 15px 18px;
     font-family: 'Lucida Console', Monaco, monospace, sans-serif;
     font-size: 17px;
-    background: var(--container-bg);
+    background: var(--card-bg);
     color: var(--body-color);
 
     &::placeholder {
diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index af366429e..c7e758003 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -116,7 +116,7 @@ article {
     margin: auto;
 
     .org-branded-title-link {
-      color: var(--container-color-secondary);
+      color: var(--card-color-secondary);
       .org-branded-title {
         font-size: calc(0.9em + 0.3vw);
         padding: 8px 0 6px;
@@ -191,7 +191,7 @@ article {
       padding: 0;
       padding: 0 3px 16px;
       font-weight: 500;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       font-size: 13.5px;
       line-height: 1.8em;
 
@@ -210,7 +210,7 @@ article {
       }
 
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
         text-decoration: none;
       }
 
@@ -350,7 +350,7 @@ article {
       'Book Antiqua', Georgia, serif;
     font-size: 21px;
     line-height: 32px;
-    background: var(--container-bg);
+    background: var(--card-bg);
     position: relative;
     z-index: 5;
     padding: 5px 0px;
@@ -675,7 +675,7 @@ article {
     position: relative;
     overflow: hidden;
     padding: 0px 0px 5px;
-    background: var(--container-bg);
+    background: var(--card-bg);
     font-family: $helvetica;
 
     a {
@@ -745,7 +745,7 @@ article {
         font-size: 0.85em;
 
         a {
-          color: var(--container-color-tertiary);
+          color: var(--card-color-tertiary);
           margin-right: 6px;
           display: inline-block;
         }
@@ -918,7 +918,7 @@ article {
         padding: 4px;
         border-radius: 100px;
         transition: box-shadow 0.18s;
-        background: var(--container-bg);
+        background: var(--card-bg);
         @media screen and (min-width: 500px) {
           height: 26px;
           width: 26px;
@@ -948,7 +948,7 @@ article {
         vertical-align: 6px;
         margin-left: 5px;
         vertical-align: 10px;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
         font-size: 13px;
         width: 27px;
 
@@ -1175,7 +1175,7 @@ article {
     .article-actions-comments-count {
       display: none;
       position: relative;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       font-weight: bold;
       font-size: calc(0.8em + 0.1vw);
       vertical-align: calc(7px - 0.07vw);
diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index bc3da968a..2b3e6a33f 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -36,7 +36,7 @@
         display: block;
         .side-bar {
           display: block;
-          background: var(--container-bg);
+          background: var(--card-bg);
           height: 100%;
           overflow-y: auto;
         }
@@ -70,7 +70,7 @@
     z-index: 5;
     padding: 16px 0;
     box-sizing: border-box;
-    color: var(--widget-color);
+    color: var(--card-secondary-color);
     &.sidebar-additional {
       display: none;
       &.showing {
@@ -220,11 +220,11 @@
   padding: 5px 0px 15px;
   display: none;
   font-size: 1.1em;
-  background: var(--container-bg);
+  background: var(--card-bg);
   a {
     display: block;
     text-align: center;
-    color: var(--container-color);
+    color: var(--card-color);
     padding: 20px 0px;
     &.selected {
       background: var(--accent-brand-lighter);
@@ -416,7 +416,7 @@
   }
 
   a {
-    color: var(--container-color);
+    color: var(--card-color);
   }
 
   .placeholder-div {
@@ -510,7 +510,7 @@
         theme-container-accent-background,
         darken($light-gray, 6%)
       );
-      color: var(--container-color);
+      color: var(--card-color);
       padding: 8px;
       border-radius: 3px 0 3px 0;
       font-weight: 600;
@@ -599,7 +599,7 @@
       }
     }
     .time-ago-indicator {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       display: inline-block;
       margin-left: 4px;
       font-weight: 400;
@@ -622,7 +622,7 @@
       text-overflow: ellipsis;
       font-size: 0.8em;
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
 
       &:hover {
@@ -732,7 +732,7 @@
     bottom: 65px;
     font-size: 0.8em;
     a {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     @media screen and (min-width: 450px) {
       font-size: 1em;
@@ -759,7 +759,7 @@
     font-size: 0.7em;
     padding: 6px 0px;
     z-index: 8;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
   }
   .article-engagement-count {
     font-size: 13px;
@@ -772,12 +772,12 @@
     border: 0;
     -webkit-appearance: none;
     font-family: $helvetica-condensed;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     a {
       &:hover {
         opacity: 1;
       }
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     img {
       height: 18px;
@@ -875,7 +875,7 @@
   display: flex;
   padding: 8px 16px;
   font-size: 0.8em;
-  color: var(--container-color-tertiary);
+  color: var(--card-color-tertiary);
 
   img {
     height: 50px;
@@ -897,7 +897,7 @@
     }
     padding-top: 0.2em;
     font-weight: 500;
-    color: var(--container-color);
+    color: var(--card-color);
   }
   &:hover {
     @include themeable(
@@ -932,7 +932,7 @@
     width: 27%;
     padding: 9px 0px;
     text-align: center;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     margin: 1%;
   }
   .query-filter-button {
@@ -945,7 +945,7 @@
     padding: 9px 0px;
     text-align: left;
     border-radius: 100px;
-    color: var(--container-color);
+    color: var(--card-color);
     text-align: center;
     margin: 1%;
 
diff --git a/app/assets/stylesheets/base/boxes.scss b/app/assets/stylesheets/base/boxes.scss
index ad91ff876..cfa4cb361 100644
--- a/app/assets/stylesheets/base/boxes.scss
+++ b/app/assets/stylesheets/base/boxes.scss
@@ -4,7 +4,7 @@
   $this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/
   border: 2px solid;
   border-radius: $br-default;
-  background-color: var(--container-bg);
+  background-color: var(--card-bg);
 
   @include box($this, var(--box), var(--box-darker));
 
diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss
index a4ee8caba..716c5fc6c 100644
--- a/app/assets/stylesheets/chat.scss
+++ b/app/assets/stylesheets/chat.scss
@@ -139,7 +139,7 @@
   padding: 8px;
   font-size: 14px;
   -webkit-appearance: none;
-  background: var(--container-bg);
+  background: var(--card-bg);
   color: var(--body-color);
 
   @media screen and (min-width: 1000px) {
@@ -172,7 +172,7 @@
 }
 
 .chat__channeltypefilterbutton--active {
-  color: var(--link-brand-color);
+  color: var(--link-branded-color);
 
   @media screen and (min-width: 1300px) {
     border: 1px solid darken($light-medium-gray, 5%);
@@ -388,7 +388,7 @@
   justify-content: space-between;
   @include themeable(border, theme-container-border, 1px solid $outline-color);
   @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
-  background: var(--container-bg);
+  background: var(--card-bg);
   flex-flow: row nowrap;
 }
 
@@ -554,7 +554,7 @@
 .activechatchannel__activecontentexitbutton {
   border: 0px;
   font-size: 30px;
-  color: var(--container-color-tertiary);
+  color: var(--card-color-tertiary);
   padding: 0px;
   background: transparent;
   position: absolute;
@@ -707,7 +707,7 @@
 }
 
 .chatchanneltab--active {
-  background: var(--container-bg);
+  background: var(--card-bg);
   border: 1px solid $dark-purple;
   box-shadow: 3px 3px 0px $dark-purple;
 }
@@ -950,8 +950,8 @@
   }
 
   a h1 {
-    color: var(--container-color);
-    border-color: var(--container-color);
+    color: var(--card-color);
+    border-color: var(--card-color);
   }
 
   img {
@@ -982,7 +982,7 @@
   resize: none;
   flex-grow: 1;
   height: 42px;
-  background: var(--container-bg);
+  background: var(--card-bg);
   @include themeable(border, theme-border, 1px solid $outline-color);
   color: var(--body-color);
 }
@@ -1114,7 +1114,7 @@
   max-width: 670px;
   padding: 0px;
   margin-bottom: 6px;
-  background: var(--container-bg);
+  background: var(--card-bg);
   .chatchannels__richlinkmainimage {
     position: relative;
     width: 100%;
@@ -1134,14 +1134,14 @@
       vertical-align: -0.25em;
       &.chatchannels__richlinkprofilepic {
         border-radius: 100px;
-        border: 1px solid var(--container-color-tertiary);
+        border: 1px solid var(--card-color-tertiary);
       }
     }
   }
   h4 {
     margin-top: -12px;
     margin-bottom: 15px;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     font-weight: 500;
     padding: 0px calc(10px + 0.2vw);
     img {
@@ -1149,7 +1149,7 @@
       width: 22px;
       border-radius: 100px;
       margin-right: 3px;
-      border: 1px solid var(--container-color-tertiary);
+      border: 1px solid var(--card-color-tertiary);
       vertical-align: -6px;
     }
   }
@@ -1242,7 +1242,7 @@
 
 .mention__list {
   position: absolute;
-  background: var(--container-bg);
+  background: var(--card-bg);
   display: none;
   z-index: 1;
   border-top: 1px solid #dbdbdb;
diff --git a/app/assets/stylesheets/classified_listings.scss b/app/assets/stylesheets/classified_listings.scss
index 204a60562..9ee17dd0e 100644
--- a/app/assets/stylesheets/classified_listings.scss
+++ b/app/assets/stylesheets/classified_listings.scss
@@ -118,9 +118,9 @@
     margin: 60px auto 0px;
     width: 100%;
     max-width: 580px;
-    background: var(--container-bg);
+    background: var(--card-bg);
     box-sizing: border-box;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
     @media screen and (min-width: 580px) {
       border-radius: 8px;
       margin: 20px auto 20px;
@@ -196,7 +196,7 @@
       cursor: pointer;
       font-size: 0.8em;
       padding: 8px 0px;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     .cta-main-listing-form {
       border: 0px;
@@ -255,7 +255,7 @@
       a {
         text-decoration: underline;
         display: inline-block;
-        color: var(--link-brand-color);
+        color: var(--link-branded-color);
       }
       @media screen and (min-width: 580px) {
         font-size: 1.1em;
@@ -266,14 +266,14 @@
     }
     p {
       font-size: 0.8em;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
   }
   .classifieds-load-more-button {
     text-align: center;
     button {
       color: var(--body-color);
-      border: 1px solid var(--container-color-tertiary);
+      border: 1px solid var(--card-color-tertiary);
       font-size: 17px;
       padding: 14px 5px;
       margin: 40px auto 70px;
@@ -294,14 +294,14 @@
   padding: 5px;
   font-size: 17px;
   border-radius: 3px;
-  background: var(--container-bg);
+  background: var(--card-bg);
   margin-top: 10px;
   color: var(--body-color);
   border: 1px solid $light-medium-gray;
 }
 
 .listingform__tagsoptions {
-  border: 1px solid var(--container-color-tertiary);
+  border: 1px solid var(--card-color-tertiary);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
@@ -385,7 +385,7 @@
   text-overflow: ellipsis;
   font-size: 0.9em;
   break-inside: avoid;
-  background: var(--container-bg);
+  background: var(--card-bg);
   h3 {
     display: flex;
     justify-content: space-between;
@@ -467,7 +467,7 @@
   .single-classified-listing-tags {
     padding: 10px 15px;
     a {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       @include themeable(
         background,
         theme-container-accent-background,
@@ -483,10 +483,10 @@
   }
   .single-classified-listing-author-info {
     font-size: 0.69em;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     padding: 0px 15px 4px;
     a {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       display: inline-block;
       &.classified-listing-edit-button {
         margin-left: 4px;
@@ -524,7 +524,7 @@
   margin: 40px auto 10px;
   color: var(--body-color);
   border: 3px solid var(--body-color);
-  background: var(--container-bg);
+  background: var(--card-bg);
 }
 
 form.listings-contact-via-connect {
@@ -607,7 +607,7 @@ form.listings-contact-via-connect {
     }
 
     &.active {
-      background: var(--container-color-tertiary);
+      background: var(--card-color-tertiary);
       color: var(--body-color-inverted);
     }
   }
@@ -699,12 +699,12 @@ form.listings-contact-via-connect {
 
   .dashboard-listings-view {
     .dashboard-listing-row {
-      border: 1px solid var(--container-color-tertiary);
+      border: 1px solid var(--card-color-tertiary);
       padding: 5px 15px;
       margin-bottom: 13px;
       border-radius: 3px;
       position: relative;
-      background: var(--container-bg);
+      background: var(--card-bg);
 
       &.draft {
         background: var(--theme-container-accent-background, #fffeec);
@@ -715,7 +715,7 @@ form.listings-contact-via-connect {
       }
 
       .listing-org {
-        background: var(--container-color-secondary);
+        background: var(--card-color-secondary);
         color: var(--body-color-inverted);
         margin-right: 5px;
         padding: 3px 10px;
@@ -726,7 +726,7 @@ form.listings-contact-via-connect {
       }
 
       h2 {
-        color: var(--container-color);
+        color: var(--card-color);
         font-weight: 500;
         margin-bottom: 10px;
         margin-top: 8px;
@@ -740,14 +740,14 @@ form.listings-contact-via-connect {
       .dashboard-listing-date {
         font-size: 0.85em;
         padding: 3px 0px 6px;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
 
       .dashboard-listing-category {
         padding: 10px 15px;
         a {
-          color: var(--container-color-tertiary);
-          background: var(--container-bg);
+          color: var(--card-color-tertiary);
+          background: var(--card-bg);
           display: inline-block;
           margin: 2px;
           padding: 2px 7px;
@@ -761,7 +761,7 @@ form.listings-contact-via-connect {
         font-size: 0.85em;
         padding: 3px 0px 6px;
         a {
-          color: var(--container-color);
+          color: var(--card-color);
         }
       }
 
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index e0c369aad..5fdb5e174 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -65,7 +65,7 @@ a.header-link {
     max-width: 100%;
     margin: 50px auto 10px;
     padding: 0px 0px 90px;
-    background: var(--container-bg);
+    background: var(--card-bg);
     z-index: 3;
     position: relative;
     @media screen and (min-width: 820px) {
@@ -102,7 +102,7 @@ a.header-link {
       margin: auto;
       margin-bottom: -35px;
       .read-more {
-        color: var(--link-brand-color);
+        color: var(--link-branded-color);
         display: inline-block;
         &:hover {
           opacity: 0.96;
@@ -305,7 +305,7 @@ a.header-link {
       &.preview-loading {
         background: white url(image-src('loading-ellipsis.svg')) no-repeat
           center center;
-        background-color: var(--container-bg);
+        background-color: var(--card-bg);
         color: var(--body-color-inverted);
         background-size: 50px;
       }
@@ -319,7 +319,7 @@ a.header-link {
       text-align: left;
       font-size: 19px;
       font-family: $helvetica;
-      background: var(--container-bg);
+      background: var(--card-bg);
       box-shadow: $shadow;
       width: calc(100% - 80px);
       margin: 19px auto 8px;
@@ -386,7 +386,7 @@ a.header-link {
       text-align: right;
       font-size: 0.9em;
       font-weight: 500;
-      color: var(--link-brand-color);
+      color: var(--link-branded-color);
       &.sub-comment-code-of-conduct {
         font-size: 1em;
       }
@@ -396,7 +396,7 @@ a.header-link {
         margin: 5px 0px;
       }
       a {
-        color: var(--link-brand-color);
+        color: var(--link-branded-color);
       }
     }
     input[type='submit'] {
@@ -483,7 +483,7 @@ a.header-link {
     .root-comment {
       margin-top: -80px;
       .comment-parent-link {
-        background: var(--container-bg);
+        background: var(--card-bg);
         @include themeable(
           border,
           theme-container-border,
@@ -758,7 +758,7 @@ a.header-link {
   .details {
     padding: 0px;
     border-top-left-radius: 3px;
-    color: var(--link-brand-color);
+    color: var(--link-branded-color);
     position: relative;
     .comment-date {
       border: none;
@@ -768,7 +768,7 @@ a.header-link {
       font-size: 12px;
       text-align: right;
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
     }
     .dropbtn {
@@ -1067,7 +1067,7 @@ a.header-link {
   .inner-comment {
     padding: 0px;
     border: 1px solid $light-medium-gray;
-    background: var(--container-bg);
+    background: var(--card-bg);
     &.comment-created-via-fetch {
       animation: comment-create 1.2s;
       .body {
diff --git a/app/assets/stylesheets/components/avatars.scss b/app/assets/stylesheets/components/avatars.scss
index ed2c35175..afe91c29b 100644
--- a/app/assets/stylesheets/components/avatars.scss
+++ b/app/assets/stylesheets/components/avatars.scss
@@ -62,5 +62,5 @@
   }
 }
 
-@include avatar-logo('avatar', 100%, var(--widget-color-tertiary));
+@include avatar-logo('avatar', 100%, var(--card-color-tertiary));
 @include avatar-logo('logo', $br-default, var(--body-color-inverted));
diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss
new file mode 100644
index 000000000..f8d970c2b
--- /dev/null
+++ b/app/assets/stylesheets/components/cards.scss
@@ -0,0 +1,31 @@
+@import '../config/import';
+
+$card-divider: 1px solid var(--body-bg);
+
+.crayons-card {
+  border-radius: $br-default;
+  background: var(--card-bg);
+  color: var(--card-color);
+
+  &--secondary {
+    background: var(--card-secondary-bg);
+    color: var(--card-secondary-color);
+  }
+
+  &__header {
+    padding: $su-4 $su-4;
+    border-bottom: $card-divider;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    color: var(--card-headline);
+    font-weight: $fw-bold;
+  }
+
+  &__body {
+    padding: $su-4;
+  }
+}
diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 1c9676634..fa53b48a4 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -1,25 +1,35 @@
 @import '../config/import';
 
-.crayons-nav-block {
-  display: flex;
-  align-items: center;
-  padding: $su-3;
-  border-radius: $br-default;
-  color: var(--link-dimmed-color);
+.crayons-link {
+  color: var(--link-color);
 
-  @media (min-width: $breakpoint-s) {
-    padding: $su-2;
+  &--branded {
+    color: var(--link-branded-color);
   }
 
-  &:hover:not(&--current) {
-    background: var(--link-dimmed-bg-hover);
-    color: var(--link-dimmed-color-hover);
+  &:hover {
+    color: var(--link-color-hover);
   }
 
   &--current {
     font-weight: $fw-medium;
-    background: var(--link-dimmed-bg-current);
-    color: var(--link-dimmed-color-current);
+    color: var(--link-color-current);
+    background: var(--link-bg-current);
+  }
+}
+
+.crayons-link--block {
+  display: flex;
+  align-items: center;
+  padding: $su-3;
+  border-radius: $br-default;
+
+  &:hover {
+    background: var(--link-bg-hover);
+  }
+
+  @media (min-width: $breakpoint-s) {
+    padding: $su-2;
   }
 
   .crayons-icon {
@@ -43,22 +53,41 @@
   }
 }
 
+.crayons-link--contentful {
+  display: block;
+  padding: $su-4;
+  border-bottom: 1px solid var(--body-bg);
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: $br-default;
+    border-bottom-left-radius: $br-default;
+  }
+
+  .crayons-link__secondary {
+    color: var(--link-color-secondary);
+    font-size: $fs-s;
+    padding-top: $su-1;
+  }
+
+  &:hover {
+    background: var(--link-bg-hover-alt);
+    .crayons-link__secondary {
+      color: var(--link-color-secondary-hover);
+    }
+  }
+}
+
 .crayons-tabs {
   display: flex;
 
-  &__item {
+  .crayons-link {
     padding: 0 0.5em;
-    color: var(--link-dimmed-secondary-color);
     position: relative;
     display: inline-block;
 
-    &:hover {
-      color: var(--link-dimmed-color-hover);
-    }
-
     &--current {
-      color: var(--link-dimmed-color-current);
-      font-weight: $fw-medium;
+      background: transparent;
 
       &::after {
         position: absolute;
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index f22472d0c..252b43696 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -52,25 +52,23 @@
 
   // Main colors
   --body-bg: #f9fafa; // todo: replace with `var(--base-10);` when ready.
-  --body-color: #0a0a0a; // todo: replace with `var(--base-100);` when ready.
+  --body-color: var(
+    --base-100
+  ); // todo: replace with `var(--base-100);` when ready.
   --body-color-inverted: var(--base-inverted);
 
   // Main content containers
-  --container-bg: var(--base-inverted);
-  --container-color: var(--base-100);
-  --container-color-secondary: var(--base-70);
-  --container-color-tertiary: var(--base-50);
-
-  // Secondary content containers
-  --widget-bg: var(--base-0);
-  --widget-color: var(--base-90);
-  --widget-color-secondary: var(--base-70);
-  --widget-color-tertiary: var(--base-50);
-  --widget-headline: var(--base-100);
+  --card-bg: var(--base-inverted);
+  --card-color: var(--base-100);
+  --card-color-secondary: var(--base-70);
+  --card-color-tertiary: var(--base-60);
+  --card-secondary-bg: var(--base-0);
+  --card-secondary-color: var(--base-90);
+  --card-headline-color: var(--base-100);
 
   // Header
   --header-bg: var(--base-inverted);
-  --header-shadow: rgba(0,0,0,0.1);
+  --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: var(--base-70);
   --header-icons-color-hover: var(--base-100);
 
@@ -85,17 +83,16 @@
   --footer-link-color: var(--base-80);
   --footer-link-color-hover: var(--base-100);
 
-  // Links in content
-  --link-brand-color: #557de8; // todo: replace with `var(--accent-brand)` when ready.
-  --link-brand-color-hover: var(--accent-brand-darker);
-
-  // Greyscale links, for places where we don't want to make them use accent color
-  --link-dimmed-color: var(--base-90);
-  --link-dimmed-color-secondary: var(--base-80);
-  --link-dimmed-bg-hover: var(--base-0);
-  --link-dimmed-color-hover: var(--base-100);
-  --link-dimmed-bg-current: var(--base-inverted);
-  --link-dimmed-color-current: var(--base-100);
+  // Links
+  --link-color: var(--base-90);
+  --link-color-hover: var(--accent-brand-darker);
+  --link-color-current: var(--base-100);
+  --link-color-secondary: var(--base-60);
+  --link-color-secondary-hover: var(--base-70);
+  --link-branded-color: var(--accent-brand);
+  --link-bg-hover: var(--base-0);
+  --link-bg-hover-alt: var(--base-inverted);
+  --link-bg-current: var(--base-inverted);
 
   // Primary buttons
   --button-primary-bg: var(--accent-brand);
diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss
index c8c631875..5d39ba240 100644
--- a/app/assets/stylesheets/crayons.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -7,6 +7,7 @@
 
 @import 'components/avatars';
 @import 'components/buttons';
+@import 'components/cards';
 @import 'components/dropdowns';
 @import 'components/forms';
 @import 'components/indicators';
diff --git a/app/assets/stylesheets/credits.scss b/app/assets/stylesheets/credits.scss
index f6461af0a..3054c45ef 100644
--- a/app/assets/stylesheets/credits.scss
+++ b/app/assets/stylesheets/credits.scss
@@ -95,7 +95,7 @@
     padding: 10px 5px;
     a {
       text-decoration: underline;
-      color: var(--link-brand-color);
+      color: var(--link-branded-color);
     }
     @media screen and (min-width: 950px) {
       font-size: 1.4em;
@@ -104,7 +104,7 @@
   }
   .bulk-description {
     text-align: center;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     padding: 25px 12px;
     font-size: 0.8em;
     @include themeable(
@@ -125,7 +125,7 @@
     margin: 3px auto;
     padding: 10px 0px;
     border: 1px solid $light-gray;
-    background: var(--container-bg);
+    background: var(--card-bg);
     font-weight: bold;
     display: inline-block;
     font-size: 15px;
@@ -153,10 +153,10 @@
     cursor: pointer;
     font-size: 0.8em;
     user-select: none;
-    color: var(--link-brand-color);
+    color: var(--link-branded-color);
     div {
       margin-top: 5px;
-      background: var(--container-bg);
+      background: var(--card-bg);
       padding: 10px 15px;
       border-radius: 8px;
       box-shadow: 0 1px 3px 0 #cfd7df;
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index f5949bd2a..743bec01a 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -102,7 +102,7 @@
           theme-container-accent-background,
           $purple
         );
-        color: var(--container-color);
+        color: var(--card-color);
       }
 
       &:not(.active):hover {
@@ -112,7 +112,7 @@
           theme-container-background-hover,
           $light-medium-purple
         );
-        color: var(--container-color);
+        color: var(--card-color);
       }
 
       &:not(:last-child) {
@@ -411,11 +411,11 @@
     .dashboard-meta-details {
       font-size: 0.85em;
       padding: 3px 0px 6px;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
 
     a {
-      color: var(--container-color);
+      color: var(--card-color);
       &.block-link {
         display: block;
       }
diff --git a/app/assets/stylesheets/index-comments.scss b/app/assets/stylesheets/index-comments.scss
index ce8b9bf26..549434d1f 100644
--- a/app/assets/stylesheets/index-comments.scss
+++ b/app/assets/stylesheets/index-comments.scss
@@ -3,7 +3,7 @@
 .index-comments {
   text-align: left;
   padding-bottom: calc(0.6vw + 5px);
-  background: var(--container-bg);
+  background: var(--card-bg);
   border-radius: 3px;
   @include themeable(border, theme-container-border, none);
   @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
@@ -53,14 +53,14 @@
     }
     .comment-date {
       font-size: 0.7em;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       margin-left: 5px;
       vertical-align: 2px;
       display: inline-block;
     }
     .comment-preview {
       font-size: 0.9em;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     @media screen and (min-width: 430px) {
       padding: 5px 0px;
diff --git a/app/assets/stylesheets/item-list.scss b/app/assets/stylesheets/item-list.scss
index 56a8e702d..26e1fbe6c 100644
--- a/app/assets/stylesheets/item-list.scss
+++ b/app/assets/stylesheets/item-list.scss
@@ -38,7 +38,7 @@
         font-size: 0.9em;
         font-family: $monospace;
         text-decoration: underline;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
       .filters-header-action {
         font-size: 0.8em;
@@ -125,7 +125,7 @@
           border-radius: 3px;
           background: transparent;
           border: 1px solid $black;
-          color: var(--container-color-tertiary);
+          color: var(--card-color-tertiary);
           @include themeable(border-color, theme-secondary-color, $medium-gray);
         }
       }
@@ -149,7 +149,7 @@
         .item-details {
           a {
             display: inline-block;
-            color: var(--container-color-tertiary);
+            color: var(--card-color-tertiary);
 
             &.item-user {
               margin-right: 5px;
diff --git a/app/assets/stylesheets/ltags/ClassifiedListingTag.scss b/app/assets/stylesheets/ltags/ClassifiedListingTag.scss
index e1c402da6..97ff152ce 100644
--- a/app/assets/stylesheets/ltags/ClassifiedListingTag.scss
+++ b/app/assets/stylesheets/ltags/ClassifiedListingTag.scss
@@ -44,7 +44,7 @@
         margin-left: 1px;
 
         a {
-          color: var(--container-color-secondary);
+          color: var(--card-color-secondary);
           display: inline-block;
           margin: 2px;
           padding: 2px 7px;
@@ -55,7 +55,7 @@
     }
 
     .ltag__listing-author-info {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       line-height: 1.3em;
       a {
         margin: 0.1vw 0;
@@ -63,7 +63,7 @@
         font-size: 0.7em;
         margin-bottom: 0;
         font-weight: bold;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
     }
   }
diff --git a/app/assets/stylesheets/ltags/DevCommentTag.scss b/app/assets/stylesheets/ltags/DevCommentTag.scss
index 56c25dbe2..34dee7dc8 100644
--- a/app/assets/stylesheets/ltags/DevCommentTag.scss
+++ b/app/assets/stylesheets/ltags/DevCommentTag.scss
@@ -6,7 +6,7 @@
   font-family: $helvetica;
   margin: 0.95em 0 1.2em;
   position: relative;
-  border: 1px solid var(--container-color-tertiary);
+  border: 1px solid var(--card-color-tertiary);
   box-shadow: $shadow;
   border-radius: 3px;
   @media screen and (min-width: 760px) {
@@ -53,12 +53,12 @@
       display: block;
       width: 100px;
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
     }
 
     a {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       line-height: initial;
       align-self: center;
       margin-right: 6px;
diff --git a/app/assets/stylesheets/ltags/GithubReadmeTag.scss b/app/assets/stylesheets/ltags/GithubReadmeTag.scss
index 0afbda3fd..a7844c14b 100644
--- a/app/assets/stylesheets/ltags/GithubReadmeTag.scss
+++ b/app/assets/stylesheets/ltags/GithubReadmeTag.scss
@@ -9,7 +9,7 @@
   overflow: hidden;
   max-width: 620px;
   a {
-    color: var(--link-brand-color) !important;
+    color: var(--link-branded-color) !important;
   }
   .readme-overview {
     padding: 0.8em 0.5em;
diff --git a/app/assets/stylesheets/ltags/GithubTag.scss b/app/assets/stylesheets/ltags/GithubTag.scss
index 5db7143ea..c106fa6ae 100644
--- a/app/assets/stylesheets/ltags/GithubTag.scss
+++ b/app/assets/stylesheets/ltags/GithubTag.scss
@@ -41,7 +41,7 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   background-color: #fff;
-  background-color: var(--container-bg);
+  background-color: var(--card-bg);
   border: 1px solid #d1d5da;
   box-shadow: $shadow;
   border-radius: 3px;
@@ -87,7 +87,7 @@
   .timeline-comment-header {
     display: flex;
     background: #f6f8fa;
-    background: var(--container-bg);
+    background: var(--card-bg);
     border-bottom: 1px solid #d1d5da;
     padding: 0px 15px;
 
@@ -194,7 +194,7 @@
     color: #444d56;
     vertical-align: middle;
     background-color: #fafbfc;
-    background-color: var(--container-bg);
+    background-color: var(--card-bg);
     border: solid 1px #c6cbd1;
     border-bottom-color: #959da5;
     border-radius: 3px;
@@ -206,7 +206,7 @@
     padding: 0px;
     margin-bottom: 15px;
     a.github-user-link {
-      color: var(--container-color-secondary);
+      color: var(--card-color-secondary);
       font-weight: 600;
       white-space: nowrap;
     }
@@ -368,7 +368,7 @@
   text-align: center;
   padding: 0.35em 0 1.35em;
   box-shadow: -0px -0px 60px 42px #fff;
-  box-shadow: -0px -0px 60px 42px var(--container-bg);
+  box-shadow: -0px -0px 60px 42px var(--card-bg);
   position: relative;
   z-index: 100;
 }
diff --git a/app/assets/stylesheets/ltags/LinkTag.scss b/app/assets/stylesheets/ltags/LinkTag.scss
index 96905f7e3..052cfbe58 100644
--- a/app/assets/stylesheets/ltags/LinkTag.scss
+++ b/app/assets/stylesheets/ltags/LinkTag.scss
@@ -80,9 +80,9 @@
       margin-bottom: 0;
       font-weight: bold;
       color: $medium-gray;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
     }
     .ltag__link__taglist {
@@ -98,7 +98,7 @@
       margin-left: 1px;
     }
     .ltag__link__servicename {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       font-size: 0.7em;
       img {
         vertical-align: -5px;
diff --git a/app/assets/stylesheets/ltags/StackexchangeTag.scss b/app/assets/stylesheets/ltags/StackexchangeTag.scss
index 1c67aee83..2298456d5 100644
--- a/app/assets/stylesheets/ltags/StackexchangeTag.scss
+++ b/app/assets/stylesheets/ltags/StackexchangeTag.scss
@@ -142,7 +142,7 @@
     text-align: center;
     position: relative;
     box-shadow: 0px 0px 60px 42px #fff;
-    box-shadow: 0px 0px 60px 42px var(--container-bg);
+    box-shadow: 0px 0px 60px 42px var(--card-bg);
   }
 
   .ltag__stackexchange--btn {
diff --git a/app/assets/stylesheets/ltags/TagTag.scss b/app/assets/stylesheets/ltags/TagTag.scss
index 352b13aa1..75ddf8ed9 100644
--- a/app/assets/stylesheets/ltags/TagTag.scss
+++ b/app/assets/stylesheets/ltags/TagTag.scss
@@ -17,7 +17,7 @@
   }
   .ltag__tag__content {
     a {
-      color: var(--container-color);
+      color: var(--card-color);
     }
     width: 90%;
     width: calc(100% - 36px);
diff --git a/app/assets/stylesheets/ltags/UserTag.scss b/app/assets/stylesheets/ltags/UserTag.scss
index fb04c17b6..90a2c727e 100644
--- a/app/assets/stylesheets/ltags/UserTag.scss
+++ b/app/assets/stylesheets/ltags/UserTag.scss
@@ -76,7 +76,7 @@
       line-height: 22px;
       font-size: 0.75em;
       a {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
         margin-right: 10px;
         display: inline-block;
         .icon-img {
diff --git a/app/assets/stylesheets/moderators.scss b/app/assets/stylesheets/moderators.scss
index 623430a85..5c881c32d 100644
--- a/app/assets/stylesheets/moderators.scss
+++ b/app/assets/stylesheets/moderators.scss
@@ -83,8 +83,8 @@
   width: 96%;
   max-width: 1600px;
   border-radius: 3px;
-  border: 1px solid var(--container-color-tertiary);
-  background: var(--container-bg);
+  border: 1px solid var(--card-color-tertiary);
+  background: var(--card-bg);
 
   .mod-index-row {
     padding: 10px;
@@ -125,7 +125,7 @@
       }
       a {
         font-weight: 500;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
     }
     .quick-mod-button {
@@ -239,7 +239,7 @@
     margin-bottom: 5px;
     border-radius: 3px;
     box-sizing: border-box;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
   }
 
   .tag-mod-form form input[type='submit'] {
@@ -271,7 +271,7 @@
     height: 100px;
     box-sizing: boder-box;
     border-radius: 3px;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
   }
 
   .level-rating-button {
@@ -294,7 +294,7 @@
   .tag-mod-addition-radio {
     padding: 5px 20px;
     border-radius: 3px;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
     display: inline-block;
     margin: 30px auto 10px;
     min-width: 205px;
diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss
index 3241f09dd..638a8511d 100644
--- a/app/assets/stylesheets/more-articles.scss
+++ b/app/assets/stylesheets/more-articles.scss
@@ -99,7 +99,7 @@
   overflow: hidden;
 
   a {
-    color: var(--container-color);
+    color: var(--card-color);
   }
   .content-classification {
     margin: 15px 20px -8px;
diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
index 42bb21221..3ee54f126 100644
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@@ -392,7 +392,7 @@
               theme-container-background,
               1px solid rgb(232, 229, 229)
             );
-            background: var(--container-bg);
+            background: var(--card-bg);
             color: var(--body-color);
           }
           input[type='submit'] {
diff --git a/app/assets/stylesheets/partnerships.scss b/app/assets/stylesheets/partnerships.scss
index 5ee9df759..48640e3f2 100644
--- a/app/assets/stylesheets/partnerships.scss
+++ b/app/assets/stylesheets/partnerships.scss
@@ -30,7 +30,7 @@
     border-radius: 12px;
     margin: 50px auto 40px;
     width: calc(100% - 20px);
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
     @include themeable(
       box-shadow,
       theme-container-box-shadow,
@@ -50,7 +50,7 @@
     h4 {
       font-size: 0.8em;
       margin: 3px 0px;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     h3 {
       margin: 5px 0px;
@@ -102,7 +102,7 @@
       margin: 8px 0px;
       display: inline-block;
       border: 0px;
-      background: var(--link-brand-color);
+      background: var(--link-branded-color);
       @include themeable(color, theme-container-background, white);
     }
   }
@@ -125,7 +125,7 @@
     border-radius: 12px;
     margin: 10px 0px;
     display: inline-block;
-    border: 1px solid var(--container-color-tertiary);
+    border: 1px solid var(--card-color-tertiary);
     @include themeable(
       box-shadow,
       theme-container-box-shadow,
@@ -146,7 +146,7 @@
       text-align: center;
       border-radius: 5px;
       font-weight: bold;
-      background: var(--link-brand-color);
+      background: var(--link-branded-color);
       @include themeable(color, theme-container-background, white);
     }
   }
diff --git a/app/assets/stylesheets/preact/article-form.scss b/app/assets/stylesheets/preact/article-form.scss
index be0a763c5..33071dc0a 100644
--- a/app/assets/stylesheets/preact/article-form.scss
+++ b/app/assets/stylesheets/preact/article-form.scss
@@ -234,7 +234,7 @@
     left: 8px;
     right: 155px;
   }
-  background: var(--container-bg);
+  background: var(--card-bg);
   border: 1px solid var(--body-color);
   font-family: $monospace;
   z-index: 20;
@@ -294,7 +294,7 @@
 }
 
 .articleform__tagoptionsummary {
-  color: var(--container-color-secondary);
+  color: var(--card-color-secondary);
   font-weight: 400;
 }
 
@@ -371,8 +371,8 @@
   // scrollbars not needed because the preact-textarea-autosize package
   // automatically resizes the article form
   overflow: hidden;
-  background: var(--container-bg);
-  color: var(--container-color);
+  background: var(--card-bg);
+  color: var(--card-color);
   @media screen and (min-width: 600px) {
     font-size: 18px;
     min-height: calc(85vh - 280px);
@@ -402,7 +402,7 @@
   bottom: 0px;
   left: 0;
   right: 0;
-  background: var(--container-bg);
+  background: var(--card-bg);
   z-index: 20;
   &::after {
     position: absolute;
@@ -435,7 +435,7 @@
       display: inline-block;
       margin-bottom: 2px;
       font-size: 11px;
-      color: var(--container-color-secondary);
+      color: var(--card-color-secondary);
       font-style: italic;
       margin-left: -2px;
     }
@@ -456,7 +456,7 @@
       border: none;
       box-shadow: none;
       color: $medium-gray;
-      color: var(--container-color-secondary);
+      color: var(--card-color-secondary);
       font-family: sans-serif;
       font-size: 1rem;
       cursor: pointer;
diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index f15c513cc..1c903719c 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -26,7 +26,7 @@
   }
 
   a {
-    color: var(--link-brand-color);
+    color: var(--link-branded-color);
   }
 }
 
@@ -120,7 +120,7 @@
   }
 
   .subtitle {
-    color: var(--container-color-secondary);
+    color: var(--card-color-secondary);
     font-size: $fs-xl;
     font-weight: $fw-medium;
     letter-spacing: normal;
@@ -239,7 +239,7 @@
       }
 
       input[type='checkbox']:checked {
-        background: var(--link-brand-color);
+        background: var(--link-branded-color);
       }
     }
   }
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index c4f5ba7b1..33ae67973 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -66,7 +66,7 @@ body {
 }
 
 a {
-  color: var(--link-brand-color);
+  color: var(--link-branded-color);
   text-decoration: none;
   &:hover {
     opacity: 0.9;
diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss
index 13d7d4032..861202852 100755
--- a/app/assets/stylesheets/settings.scss
+++ b/app/assets/stylesheets/settings.scss
@@ -432,8 +432,8 @@ $input-width: 650px;
       width: 70%;
     }
     .single-app-integration {
-      background: var(--container-bg);
-      border: 1px solid var(--container-color-tertiary);
+      background: var(--card-bg);
+      border: 1px solid var(--card-color-tertiary);
       border-radius: 8px;
       padding: 10px;
       h2 {
@@ -442,7 +442,7 @@ $input-width: 650px;
         font-size: 1.5em;
       }
       sup {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
       img {
         height: 1em;
@@ -530,7 +530,7 @@ $input-width: 650px;
 .github-repos {
   max-height: 400px;
   overflow-y: auto;
-  background: var(--container-bg);
+  background: var(--card-bg);
   box-shadow: $shadow;
   &.loading-repos {
     height: 400px;
@@ -542,7 +542,7 @@ $input-width: 650px;
     height: 400px;
   }
   .github-repo-row {
-    background: var(--container-bg);
+    background: var(--card-bg);
     padding: 12px;
     margin: 5px 0px;
     transition: all 0.6s ease;
@@ -810,7 +810,7 @@ ul.delete__account {
   align-items: center;
   justify-content: space-between;
   flex-flow: row wrap;
-  background: var(--container-bg);
+  background: var(--card-bg);
   border-radius: 5px;
   border: 1px solid $light-medium-gray;
   padding: 0.5rem 0 0.8rem 0.5rem;
diff --git a/app/assets/stylesheets/sidebar-data.scss b/app/assets/stylesheets/sidebar-data.scss
index 6397b1961..81bf92394 100644
--- a/app/assets/stylesheets/sidebar-data.scss
+++ b/app/assets/stylesheets/sidebar-data.scss
@@ -8,7 +8,7 @@
   font-family: $monospace;
   padding: 16px;
   @include themeable(color, theme-secondary-color, $dark-medium-gray);
-  color: var(--widget-color-tertiary);
+  color: var(--card-color-tertiary);
   .mod-action-button {
     padding: 2px 9px;
     font-size: 1.2em;
diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss
index 52f4c8560..72d947de9 100644
--- a/app/assets/stylesheets/sticky-nav.scss
+++ b/app/assets/stylesheets/sticky-nav.scss
@@ -21,7 +21,7 @@
   }
   .primary-sticky-nav-author {
     a {
-      color: var(--container-color);
+      color: var(--card-color);
     }
     .primary-sticky-nav-author-top-profile-image {
       width: 35px;
@@ -40,7 +40,7 @@
     }
     .primary-sticky-nav-author-summary {
       font-weight: 400;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       padding: 10px 0px 5px;
       font-style: italic;
       font-size: 0.88em;
@@ -76,7 +76,7 @@
       vertical-align: -1px;
     }
     a {
-      color: var(--container-color);
+      color: var(--card-color);
       display: inline-block;
     }
   }
@@ -87,13 +87,13 @@
     font-weight: bold;
     @include dev-card;
     margin-left: 10px;
-    color: var(--container-color);
+    color: var(--card-color);
     width: 262px;
     border-radius: 3px;
     .primary-sticky-nav-element-details {
       margin-top: 9px;
       font-size: 0.8em;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
   }
   .user-metadata-details {
@@ -109,7 +109,7 @@
       font-size: 0.8em;
       font-weight: 800;
       margin-bottom: 2px;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
     }
     .value {
       display: inline-block;
@@ -124,7 +124,7 @@
 
 .primary-sticky-nav-org-summary {
   font-weight: 400;
-  color: var(--container-color);
+  color: var(--card-color);
   padding: 4px 0px;
   font-size: 0.95em;
   margin-top: 20px;
diff --git a/app/assets/stylesheets/theme-selector.scss b/app/assets/stylesheets/theme-selector.scss
index aa2aafe1c..677aadea4 100644
--- a/app/assets/stylesheets/theme-selector.scss
+++ b/app/assets/stylesheets/theme-selector.scss
@@ -91,7 +91,7 @@
 .theme-selector__col--center {
   width: 20%;
   height: 85%;
-  background: var(--container-bg);
+  background: var(--card-bg);
   border-radius: 2px;
   border: var(--theme-container-border);
 }
@@ -107,7 +107,7 @@
 
 .theme-selector__posts {
   height: calc(100% - 18px);
-  background: var(--container-bg);
+  background: var(--card-bg);
   border: var(--theme-container-border);
   border-radius: 2px;
 }
@@ -119,7 +119,7 @@
   --body-color: #0a0a0a;
   --header-bg: #fdf9f3;
   --form-bg: #e8e7e7;
-  --container-bg: #fff;
+  --card-bg: #fff;
   --theme-container-border: 1px solid #d6d6d6;
 }
 
@@ -128,7 +128,7 @@
   --body-color: #fff;
   --header-bg: #1c2938;
   --form-bg: #424a54;
-  --container-bg: #202c3d;
+  --card-bg: #202c3d;
   --theme-container-border: 1px solid #141d26;
 }
 
@@ -137,7 +137,7 @@
   --body-color: #0a0a0a;
   --header-bg: #ff4983;
   --form-bg: #fff7f9;
-  --container-bg: #fff;
+  --card-bg: #fff;
   --theme-container-border: 1px solid #ff4983;
 }
 
@@ -146,7 +146,7 @@
   --body-color: #0a0a0a;
   --header-bg: #ffffff;
   --form-bg: #f4f5f7;
-  --container-bg: #fff;
+  --card-bg: #fff;
   --theme-container-border: 1px solid #d6d6d6;
 }
 
@@ -155,7 +155,7 @@
   --body-color: #42ff87;
   --header-bg: #1c1c1c;
   --form-bg: #0a0a0a;
-  --container-bg: #0a0a0a;
+  --card-bg: #0a0a0a;
   --theme-container-border: 1px solid #42ff87;
 }
 
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 497dd4554..2f1b6842b 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -46,20 +46,17 @@
   --body-color-inverted: var(--base-inverted);
 
   // Main content containers
-  --container-bg: var(--base-inverted);
-  --container-color: var(--accent-brand);
-  --container-color-secondary: var(--accent-brand-darker);
-  --container-color-tertiary: var(--base-50);
-
-  // Secondary content containers
-  --widget-bg: var(--base-10);
-  --widget-color: var(--accent-brand);
-  --widget-color-secondary: var(--accent-brand-darker);
-  --widget-color-tertiary: var(--base-50);
-  --widget-headline: var(--accent-brand-lighter);
+  --card-bg: var(--base-inverted);
+  --card-color: var(--accent-brand);
+  --card-color-secondary: var(--accent-brand-darker);
+  --card-color-tertiary: var(--base-50);
+  --card-secondary-bg: var(--base-10);
+  --card-secondary-color: var(--base-90);
+  --card-headline-color: var(--accent-brand-lighter);
 
   // Header
   --header-bg: var(--base-10);
+  --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: var(--base-70);
   --header-icons-color-hover: var(--base-100);
 
@@ -74,17 +71,16 @@
   --footer-link-color: var(--accent-brand);
   --footer-link-color-hover: var(--accent-brand-lighter);
 
-  // Links in content
-  --link-brand-color: #e24ec1;
-  --link-brand-color-hover: #ff53d9;
-
-  // Greyscale links, for places where we don't want to make them use accent color
-  --link-dimmed-color: var(--accent-brand);
-  --link-dimmed-color-secondary: var(--accent-brand-darker);
-  --link-dimmed-bg-hover: var(--base-0);
-  --link-dimmed-color-hover: var(--accent-brand-lighter);
-  --link-dimmed-bg-current: var(--base-inverted);
-  --link-dimmed-color-current: var(--accent-brand-lighter);
+  // Links
+  --link-color: var(--accent-brand);
+  --link-color-hover: var(--accent-brand-darker); // #ff53d9;
+  --link-color-current: var(--accent-brand-lighter);
+  --link-color-secondary: var(--accent-brand-darker);
+  --link-color-secondary-hover: var(--accent-brand-darker);
+  --link-branded-color: #e24ec1;
+  --link-bg-hover: var(--base-0);
+  --link-bg-hover-alt: var(--base-0);
+  --link-bg-current: var(--base-inverted);
 
   // Primary buttons
   --button-primary-bg: var(--accent-brand);
@@ -119,4 +115,12 @@
   // Default box
   --box: var(--base-90);
   --box-darker: var(--base-100);
+
+  // Indicators
+  --indicator-accent-bg: var(--accent-brand);
+  --indicator-accent-color: var(--body-color-inverted);
+  --indicator-critical-bg: var(--accent-danger);
+  --indicator-critical-color: var(--body-color-inverted);
+  --indicator-default-bg: var(--button-secondary-bg);
+  --indicator-default-color: var(--button-secondary-color);
 }
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index 997bef230..564ccfbdb 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -46,26 +46,22 @@
   --body-color-inverted: var(--base-inverted);
 
   // Main content containers
-  --container-bg: var(--base-inverted);
-  --container-color: var(--base-100);
-  --container-color-secondary: var(--base-70);
-  --container-color-tertiary: var(--base-50);
-
-  // Secondary content containers
-  --widget-bg: var(--base-0);
-  --widget-color: var(--base-90);
-  --widget-color-secondary: var(--base-70);
-  --widget-color-tertiary: var(--base-50);
-  --widget-headline: var(--base-100);
+  --card-bg: var(--base-inverted);
+  --card-color: var(--base-100);
+  --card-color-secondary: var(--base-70);
+  --card-color-tertiary: var(--base-50);
+  --card-secondary-bg: var(--base-0);
+  --card-secondary-color: var(--base-90);
+  --card-headline-color: var(--base-100);
 
   // Header
   --header-bg: var(--base-0);
-  --header-shadow: rgba(0,0,0,0.1);
+  --header-shadow: rgba(0, 0, 0, 0.1);
   --header-icons-color: #0a0a0a;
   --header-icons-color-hover: #000;
 
   // Logo
-  --logo-bg: ##e3e5ed;
+  --logo-bg: #e3e5ed;
   --logo-color: #232426;
 
   // Footer
@@ -75,17 +71,16 @@
   --footer-link-color: var(--base-80);
   --footer-link-color-hover: var(--base-100);
 
-  // Links in content
-  --link-brand-color: #757ec6;
-  --link-brand-color-hover: var(--accent-brand-darker);
-
-  // Greyscale links, for places where we don't want to make them use accent color
-  --link-dimmed-color: var(--base-90);
-  --link-dimmed-color-secondary: var(--base-80);
-  --link-dimmed-bg-hover: var(--base-0);
-  --link-dimmed-color-hover: var(--base-100);
-  --link-dimmed-bg-current: var(--base-inverted);
-  --link-dimmed-color-current: var(--base-100);
+  // Links
+  --link-color: var(--base-90);
+  --link-color-hover: var(--accent-brand-darker);
+  --link-color-current: var(--base-100);
+  --link-color-secondary: var(--base-70);
+  --link-color-secondary-hover: var(--base-80);
+  --link-branded-color: var(--accent-brand);
+  --link-bg-hover: var(--base-0);
+  --link-bg-hover-alt: var(--base-10);
+  --link-bg-current: var(--base-inverted);
 
   // Primary buttons
   --button-primary-bg: var(--accent-brand);
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 56fe74415..ba971d96e 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -46,21 +46,17 @@
   --body-color-inverted: var(--base-inverted);
 
   // Main content containers
-  --container-bg: var(--base-10);
-  --container-color: var(--base-100);
-  --container-color-secondary: var(--base-70);
-  --container-color-tertiary: var(--base-50);
-
-  // Secondary content containers
-  --widget-bg: var(--base-10);
-  --widget-color: var(--base-90);
-  --widget-color-secondary: var(--base-70);
-  --widget-color-tertiary: var(--base-50);
-  --widget-headline: var(--base-100);
+  --card-bg: var(--base-10);
+  --card-color: var(--base-100);
+  --card-color-secondary: var(--base-70);
+  --card-color-tertiary: var(--base-50);
+  --card-secondary-bg: var(--base-10);
+  --card-secondary-color: var(--base-90);
+  --card-headline-color: var(--base-100);
 
   // Header
   --header-bg: var(--base-10);
-  --header-shadow: rgba(0,0,0,0.3);
+  --header-shadow: rgba(0, 0, 0, 0.3);
   --header-icons-color: rgba(255, 255, 255, 0.8);
   --header-icons-color-hover: #fff;
 
@@ -75,17 +71,16 @@
   --footer-link-color: var(--base-80);
   --footer-link-color-hover: var(--base-100);
 
-  // Links in content
-  --link-brand-color: #17a1f6;
-  --link-brand-color-hover: var(--accent-brand-darker);
-
-  // Greyscale links, for places where we don't want to make them use accent color
-  --link-dimmed-color: var(--base-90);
-  --link-dimmed-color-secondary: var(--base-80);
-  --link-dimmed-bg-hover: var(--base-0);
-  --link-dimmed-color-hover: var(--base-100);
-  --link-dimmed-bg-current: var(--base-inverted);
-  --link-dimmed-color-current: var(--base-100);
+  // Links
+  --link-color: var(--base-90);
+  --link-color-hover: var(--accent-brand-lighter);
+  --link-color-current: var(--base-100);
+  --link-color-secondary: var(--base-70);
+  --link-color-secondary-hover: var(--base-80);
+  --link-branded-color: #17a1f6;
+  --link-bg-hover: var(--base-0);
+  --link-bg-hover-alt: var(--base-inverted);
+  --link-bg-current: var(--base-inverted);
 
   // Primary buttons
   --button-primary-bg: var(--accent-success);
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index f7063c8ca..5da3bb20f 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -26,9 +26,9 @@
   --accent-brand-lighter: #ff99b9;
 
   // Success
-  --accent-success: #71DB92;
-  --accent-success-darker: #5ABF79;
-  --accent-success-lighter: #93EDAF;
+  --accent-success: #71db92;
+  --accent-success-darker: #5abf79;
+  --accent-success-lighter: #93edaf;
 
   // Warning
   --accent-warning: #ffcf4c;
@@ -46,17 +46,13 @@
   --body-color-inverted: var(--base-inverted);
 
   // Main content containers
-  --container-bg: var(--base-inverted);
-  --container-color: var(--base-100);
-  --container-color-secondary: var(--base-70);
-  --container-color-tertiary: var(--base-50);
-
-  // Secondary content containers
-  --widget-bg: var(--base-0);
-  --widget-color: var(--base-90);
-  --widget-color-secondary: var(--base-70);
-  --widget-color-tertiary: var(--base-50);
-  --widget-headline: var(--base-100);
+  --card-bg: var(--base-inverted);
+  --card-color: var(--base-100);
+  --card-color-secondary: var(--base-70);
+  --card-color-tertiary: var(--base-50);
+  --card-secondary-bg: var(--base-0);
+  --card-secondary-color: var(--base-90);
+  --card-headline-color: var(--base-100);
 
   // Header
   --header-bg: var(--base-40);
@@ -75,17 +71,16 @@
   --footer-link-color: var(--base-80);
   --footer-link-color-hover: var(--base-100);
 
-  // Links in content
-  --link-brand-color: #4e57ef;
-  --link-brand-color-hover: var(--accent-brand-darker);
-
-  // Greyscale links, for places where we don't want to make them use accent color
-  --link-dimmed-color: var(--base-90);
-  --link-dimmed-color-secondary: var(--base-80);
-  --link-dimmed-bg-hover: var(--base-10);
-  --link-dimmed-color-hover: var(--base-100);
-  --link-dimmed-bg-current: var(--base-inverted);
-  --link-dimmed-color-current: var(--base-100);
+  // Links
+  --link-color: var(--base-90);
+  --link-color-hover: var(--base-80);
+  --link-color-current: var(--base-100);
+  --link-color-secondary: var(--base-70);
+  --link-color-secondary-hover: var(--base-80);
+  --link-branded-color: #4e57ef;
+  --link-bg-hover: var(--base-0);
+  --link-bg-hover-alt: var(--base-inverted);
+  --link-bg-current: var(--base-inverted);
 
   // Primary buttons
   --button-primary-bg: var(--accent-brand);
@@ -118,11 +113,11 @@
   --label-secondary: var(--base-90);
 
   // Default box
-  --box: var(--container-bg);
+  --box: var(--card-bg);
   --box-darker: var(--base-100);
 
   // Indicators
-  --indicator-accent-bg: var(--link-brand-color);
+  --indicator-accent-bg: var(--link-branded-color);
   --indicator-accent-color: var(--body-color-inverted);
   --indicator-critical-bg: var(--base-80);
   --indicator-critical-color: var(--body-color-inverted);
diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
index 71e833f09..03f62c7ff 100644
--- a/app/assets/stylesheets/user-profile-header.scss
+++ b/app/assets/stylesheets/user-profile-header.scss
@@ -9,7 +9,7 @@
   width: 1216px;
   max-width: 92%;
   margin: 24px auto;
-  background: var(--container-bg);
+  background: var(--card-bg);
   border-radius: 3px;
   @media screen and (min-width: 950px) {
     max-width: 98%;
@@ -185,7 +185,7 @@
         padding: 0px 0px;
         margin: 0;
         font-style: italic;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
         width: 94%;
         font-size: 0.9em;
         margin-top: 12px;
@@ -276,7 +276,7 @@
         font-size: 0.7em;
         font-weight: 800;
         margin-bottom: 2px;
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
       }
       .value {
         display: inline-block;
@@ -510,7 +510,7 @@
       right: 3px;
       border: 1px solid $light-medium-gray;
       border-radius: 3px;
-      background: var(--container-bg);
+      background: var(--card-bg);
       z-index: 20;
       width: 200px;
       box-shadow: $shadow;
diff --git a/app/assets/stylesheets/video-collection.scss b/app/assets/stylesheets/video-collection.scss
index 2b7b2c0b3..1d4d639dc 100644
--- a/app/assets/stylesheets/video-collection.scss
+++ b/app/assets/stylesheets/video-collection.scss
@@ -67,7 +67,7 @@
       color: var(--body-color);
       font-size: 0.95em;
       &.video-username {
-        color: var(--container-color-tertiary);
+        color: var(--card-color-tertiary);
         font-size: 0.88em;
       }
     }
diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss
index a30389fbb..0907e3e62 100644
--- a/app/assets/stylesheets/widgets.scss
+++ b/app/assets/stylesheets/widgets.scss
@@ -27,7 +27,7 @@
   }
 
   .sidebar-profile--username {
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
   }
 }
 
@@ -46,7 +46,7 @@
     right: 0;
     width: 100%;
     height: 1px;
-    background: var(--widget-color-tertiary);
+    background: var(--card-color-tertiary);
     opacity: 0.25;
   }
 
@@ -141,7 +141,7 @@
       }
     }
     .suggest-podcast {
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       text-decoration: underline;
       padding: 0 5px;
     }
@@ -156,10 +156,10 @@
     padding: 8px 0;
     font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
       monospace;
-    color: var(--container-color);
+    color: var(--card-color);
     a {
       display: inline-block;
-      color: var(--container-color);
+      color: var(--card-color);
       h4 {
         display: inline-block;
         margin: 0;
@@ -243,7 +243,7 @@
       }
       .widget-listing-link-category {
         display: inline-block;
-        color: var(--widget-color-tertiary);
+        color: var(--card-color-tertiary);
         font-size: 0.8em;
         line-height: 1;
       }
@@ -270,7 +270,7 @@
     .widget-subtext {
       padding: 0;
       margin: 0;
-      color: var(--container-color-tertiary);
+      color: var(--card-color-tertiary);
       font-size: 0.85em;
     }
     .widget-user-pic {
@@ -320,7 +320,7 @@
         theme-container-accent-background,
         lighten($bold-blue, 10%)
       );
-      color: var(--container-color);
+      color: var(--card-color);
     }
     &.query-type-filter-button {
       &:hover {
@@ -370,7 +370,7 @@
     }
   }
   .social-icons a {
-    color: var(--widget-color);
+    color: var(--card-secondary-color);
     margin-right: 8px;
   }
   .row {
@@ -407,7 +407,7 @@
 
   .discuss-list-comment-count {
     font-size: 0.8em;
-    color: var(--container-color-tertiary);
+    color: var(--card-color-tertiary);
     img {
       width: 20px;
       vertical-align: -3px;
@@ -427,7 +427,7 @@
 // Sidebar sponsors
 .sidebar-sponsor {
   margin-bottom: 24px;
-  color: var(--widget-color-tertiary);
+  color: var(--card-color-tertiary);
   img {
     width: 100%;
     max-width: 180px;
@@ -435,7 +435,7 @@
 }
 .sidebar-sponsor--footer {
   font-size: 0.75em;
-  color: var(--container-color-tertiary);
+  color: var(--card-color-tertiary);
   a {
     background: lighten($purple, 3%);
     color: $black;
@@ -476,11 +476,11 @@
 
   a.sidebar-nav-link {
     @include sidebar-link;
-    color: var(--link-dimmed-color);
+    color: var(--link-color);
     font-weight: 400;
 
     &.sidebar-nav-link-tag {
-      color: var(--link-dimmed-color);
+      color: var(--link-color);
     }
   }
   a.sidebar-nav-link-follow {
@@ -507,7 +507,7 @@
   margin-bottom: 10px;
   font-family: $helvetica-condensed;
   font-stretch: condensed;
-  background: var(--widget-bg);
+  background: var(--card-secondary-bg);
 }
 
 // "Extra" links in sidebar: about, contact, ...
@@ -515,6 +515,6 @@
   a {
     @include sidebar-link;
     font-size: 0.9em;
-    color: var(--link-dimmed-color-secondary);
+    color: var(--link-color-secondary);
   }
 }
diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb
index 3f436b686..3fca78def 100644
--- a/app/views/layouts/_nav_menu.html.erb
+++ b/app/views/layouts/_nav_menu.html.erb
@@ -3,27 +3,27 @@
     <div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">...</div>
 
     <div class="border-0 border-b-1 border-solid border-base-20 p-1">
-      <a href="/dashboard" class="crayons-nav-block">Dashboard</a>
-      <a href="/new" class="crayons-nav-block">Write a Post</a>
-      <a href="/readinglist" class="crayons-nav-block">Reading List</a>
-      <a href="/settings" class="crayons-nav-block">Settings</a>
-      <a href="/p/information" class="crayons-nav-block" id="second-last-nav-link">Key Links</a>
+      <a href="/dashboard" class="crayons-link crayons-link--block">Dashboard</a>
+      <a href="/new" class="crayons-link crayons-link--block">Write a Post</a>
+      <a href="/readinglist" class="crayons-link crayons-link--block">Reading List</a>
+      <a href="/settings" class="crayons-link crayons-link--block">Settings</a>
+      <a href="/p/information" class="crayons-link crayons-link--block" id="second-last-nav-link">Key Links</a>
     </div>
     <div class="p-1">
-      <a href="/signout_confirm" class="crayons-nav-block" id="last-nav-link">Sign Out</a>
+      <a href="/signout_confirm" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
     </div>
   <% else %>
     <div class="border-0 border-b-1 border-solid border-base-20 p-1">
-      <a href="/enter" data-no-instant id="first-nav-link" class="crayons-nav-block fw-medium">Sign In/Up</a>
+      <a href="/enter" data-no-instant id="first-nav-link" class="crayons-link crayons-link--block fw-medium">Sign In/Up</a>
       <% if SiteConfig.auth_allowed?("twitter") %>
-        <a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="crayons-nav-block pl-5" data-no-instant>Via Twitter</a>
+        <a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="crayons-link crayons-link--block pl-5" data-no-instant>Via Twitter</a>
       <% end %>
       <% if SiteConfig.auth_allowed?("github") %>
-        <a href="/users/auth/github?state=navbar_basic" class="crayons-nav-block pl-5" data-no-instant id="second-last-nav-link">Via GitHub</a>
+        <a href="/users/auth/github?state=navbar_basic" class="crayons-link crayons-link--block pl-5" data-no-instant id="second-last-nav-link">Via GitHub</a>
       <% end %>
     </div>
     <div class="p-1">
-      <a href="/p/information" class="crayons-nav-block" id="last-nav-link">All about <%= ApplicationConfig["COMMUNITY_NAME"] %></a>
+      <a href="/p/information" class="crayons-link crayons-link--block" id="last-nav-link">All about <%= ApplicationConfig["COMMUNITY_NAME"] %></a>
     </div>
   <% end %>
 </div>
diff --git a/app/views/pages/crayons.html.erb b/app/views/pages/crayons.html.erb
index b2e633200..92bb57524 100644
--- a/app/views/pages/crayons.html.erb
+++ b/app/views/pages/crayons.html.erb
@@ -50,67 +50,6 @@
   }
 </style>
 
-<div class="container">
-  <div class="body">
-    <h2>Subscribe dropdown</h2>
-  </div>
-
-  <div>
-    <p>This is default state:</p>
-    <div class="crayons-btn-group mb-4">
-      <a href="#" class="crayons-btn crayons-btn--outlined">Subscribe</a>
-    </div>
-
-    <p>This is subscribed state, so it has additional cog button:</p>
-    <div class="crayons-btn-group mb-4">
-      <a href="#" class="crayons-btn crayons-btn--outlined">Unsubscribe</a>
-      <a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--icon-alone">
-        <%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon", title: "Customize subscription") %>
-      </a>
-    </div>
-    
-    <p>This is subscribed state, and the cog button has <code>.crayons-btn--outlined--active</code> class applied so it has darker border and color.</p>
-    <div class="crayons-btn-group mb-4">
-      <a href="#" class="crayons-btn crayons-btn--outlined">Unsubscribe</a>
-      <a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--outlined--active crayons-btn--icon-alone">
-        <%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon", title: "Customize subscription") %>
-      </a>
-    </div>
-    
-    <p>This is our dropdown. It has additional utility classes <code>inline-block static</code> only for purpose of this demo.</p>
-    <div class="crayons-dropdown inline-block static">
-      <div class="crayons-fields mb-5">
-        <div class="crayons-field crayons-field--radio">
-          <input type="radio" id="subscribe-all" name="subscribe_comments" class="crayons-radio" checked>
-          <label for="subscribe-all" class="crayons-field__label">
-            All comments
-            <p class="crayons-field__description">You’ll receive notifications for all new comments.</p>
-          </label>
-        </div>
-
-        <div class="crayons-field crayons-field--radio">
-          <input type="radio" id="subscribe-toplevel" name="subscribe_comments" class="crayons-radio">
-          <label for="subscribe-toplevel" class="crayons-field__label">
-            Top-level comments
-            <p class="crayons-field__description">You’ll receive notifications only for all new top-level comments.</p>
-          </label>
-        </div>
-
-        <div class="crayons-field crayons-field--radio">
-          <input type="radio" id="subscribe-author" name="subscribe_comments" class="crayons-radio">
-          <label for="subscribe-author" class="crayons-field__label">
-            Post author comments
-            <p class="crayons-field__description">You’ll receive notifications only if post author sends a new comment.</p>
-          </label>
-        </div>
-      </div>
-      
-      <button class="crayons-btn w-100">Done</button>
-    </div>
-    </div>
-  </div>
-</div>
-
 <div class="container">
   <div class="body">
     <h2>Main Typography</h2>
@@ -241,6 +180,93 @@
   '.rstrip %></pre>
 </div>
 
+
+<div class="container">
+  <div class="body">
+    <h2>Cards</h2>
+    <p>Cards are basically content containers. There are two types of cards:</p>
+    <ul>
+      <li>Primary (default) - main content, like whole article or feed cards.</li>
+      <li>Secondary - secondary content, used for example for sidebar widgets.</li>
+    </ul>
+    <p>The visual difference between the two is basically in color: secodanry cards are a <strong>little</strong> less visible.</p>
+  </div>
+
+  <div class="p-6 bg-base-10">
+    <div class="crayons-card mb-4">
+      <div class="crayons-card__body">
+        Hello, I am a primary card.
+      </div>
+    </div>
+
+    <div class="crayons-card crayons-card--secondary">
+      <div class="crayons-card__body">
+        ...And I am a secondary card.
+      </div>
+    </div>
+  </div>
+
+  <pre><%='
+  <div class="crayons-card">
+    <div class="crayons-card__body">
+      Hello, I am a primary card.
+    </div>
+  </div>
+
+  <div class="crayons-card crayons-card--secondary">
+    <div class="crayons-card__body">
+      ...And I am a secondary card.
+    </div>
+  </div>
+  '.rstrip %></pre>
+
+  <div class="body">
+    <p>If you need headers, cards do have them as well.</p>
+  </div>
+
+  <div class="p-6 bg-base-10">
+    <div class="crayons-card crayons-card--secondary mb-4">
+      <div class="crayons-card__header">
+        <h3 class="crayons-card__headline">Card title.</h3>
+      </div>
+      <div class="crayons-card__body">
+        I'm a card content.
+      </div>
+    </div>
+
+    <div class="crayons-card crayons-card--secondary">
+      <div class="crayons-card__header">
+        <h3 class="crayons-card__headline">Card title.</h3>
+        <div class="crayons-card__actions">
+          <a href="#" class="crayons-link--branded">Action</a>
+        </div>
+      </div>
+      <div class="crayons-card__body">
+        I'm a card content.
+      </div>
+    </div>
+  </div>
+
+  <pre><%='
+  <div class="crayons-card crayons-card--secondary">
+    <div class="crayons-card__header">
+      <h3 class="crayons-card__headline">Card title.</h3>
+    </div>
+    <div class="crayons-card__body">...</div>
+  </div>
+
+  <div class="crayons-card crayons-card--secondary">
+    <div class="crayons-card__header">
+      <h3 class="crayons-card__headline">Card title.</h3>
+      <div class="crayons-card__actions">
+        <a href="#" class="crayons-link--branded">Action</a>
+      </div>
+    </div>
+    <div class="crayons-card__body">...</div>
+  </div>
+  '.rstrip %></pre>
+</div>
+
 <div class="container">
   <div class="body">
     <h2>Form elements</h2>
@@ -599,101 +625,12 @@
   '.rstrip %></pre>
 </div>
 
-<div class="container">
-  <div class="body">
-    <h2>Boxes</h2>
-    <p>“Box” will be a background element used for many other components, for example banners, dropdowns, modals. This component does not have any guidelines in terms of placement or spacing, since it’s supposed to be used to build other components.</p>
-    <p>There are:</p>
-    <ul>
-      <li>2 types: outlined  & filled,</li>
-      <li>5 styles: default, danger, warning, info, success,</li>
-      <li>4 eleveations: 0, 1, 2, 3.</li>
-    </ul>
-    <p>By default use “outlined” type unless you really have to make something stand out - then use “filled”. But double check if it makes sense since “filled” style really steals attention.</p>
-    <p>Use style that makes the most sense for you current use case. It’s pretty obvious when to use Danger, Warning and Success. But for Default and Info - it’s more up to designer to make a good call :).</p>
-    <p>Elevations should define what kind of element it is:</p>
-    <ul>
-      <li>0: something inside content.</li>
-      <li>1: that can also be used in content but for elements that need more attention, like notices...</li>
-      <li>2: dropdowns</li>
-      <li>3: modals</li>
-    </ul>
-  </div>
-
-  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
-    <div class="crayons-box">box, level 0</div>
-    <div class="crayons-box crayons-box--level-1">box, level 1</div>
-    <div class="crayons-box crayons-box--level-2">box, level 2</div>
-    <div class="crayons-box crayons-box--level-3">box, level 3</div>
-    <div class="crayons-box crayons-box--filled ">filled box, level 0</div>
-    <div class="crayons-box crayons-box--filled crayons-box--level-1">filled box, level 1</div>
-    <div class="crayons-box crayons-box--filled crayons-box--level-2">filled box, level 2</div>
-    <div class="crayons-box crayons-box--filled crayons-box--level-3">filled box, level 3</div>
-
-    <div class="crayons-box crayons-box--danger">box, level 0</div>
-    <div class="crayons-box crayons-box--danger crayons-box--level-1">box, level 1</div>
-    <div class="crayons-box crayons-box--danger crayons-box--level-2">box, level 2</div>
-    <div class="crayons-box crayons-box--danger crayons-box--level-3">box, level 3</div>
-    <div class="crayons-box crayons-box--danger crayons-box--filled ">filled box, level 0</div>
-    <div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-1">filled box, level 1</div>
-    <div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-2">filled box, level 2</div>
-    <div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-3">filled box, level 3</div>
-
-    <div class="crayons-box crayons-box--warning">box, level 0</div>
-    <div class="crayons-box crayons-box--warning crayons-box--level-1">box, level 1</div>
-    <div class="crayons-box crayons-box--warning crayons-box--level-2">box, level 2</div>
-    <div class="crayons-box crayons-box--warning crayons-box--level-3">box, level 3</div>
-    <div class="crayons-box crayons-box--warning crayons-box--filled ">filled box, level 0</div>
-    <div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-1">filled box, level 1</div>
-    <div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-2">filled box, level 2</div>
-    <div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-3">filled box, level 3</div>
-
-    <div class="crayons-box crayons-box--success">box, level 0</div>
-    <div class="crayons-box crayons-box--success crayons-box--level-1">box, level 1</div>
-    <div class="crayons-box crayons-box--success crayons-box--level-2">box, level 2</div>
-    <div class="crayons-box crayons-box--success crayons-box--level-3">box, level 3</div>
-    <div class="crayons-box crayons-box--success crayons-box--filled ">filled box, level 0</div>
-    <div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-1">filled box, level 1</div>
-    <div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-2">filled box, level 2</div>
-    <div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-3">filled box, level 3</div>
-
-    <div class="crayons-box crayons-box--info">box, level 0</div>
-    <div class="crayons-box crayons-box--info crayons-box--level-1">box, level 1</div>
-    <div class="crayons-box crayons-box--info crayons-box--level-2">box, level 2</div>
-    <div class="crayons-box crayons-box--info crayons-box--level-3">box, level 3</div>
-    <div class="crayons-box crayons-box--info crayons-box--filled ">filled box, level 0</div>
-    <div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-1">filled box, level 1</div>
-    <div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-2">filled box, level 2</div>
-    <div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-3">filled box, level 3</div>
-  </div>
-
-  <pre><%='
-  <!-- default: outlined, black -->
-  <div class="crayons-box">box, level 0</div>
-
-  <-- levels 0-3 -->
-  <div class="... crayons-box--level-1">box, level 1</div>
-  <div class="... crayons-box--level-2">box, level 2</div>
-  <div class="... crayons-box--level-3">box, level 3</div>
-
-  <-- filled variation -->
-  <div class="... crayons-box--filled">filled box, level 0</div>
-
-  <-- styles: danger, success, warning, info -->
-  <div class="... crayons-box--danger">
-  <div class="... crayons-box--success">
-  <div class="... crayons-box--warning">
-  <div class="... crayons-box--info">
-  '.rstrip %></pre>
-</div>
-
 <div class="container">
   <div class="body">
     <h2>Dropdowns</h2>
     <p>Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...</p>
     <p>Dropdowns should not be bigger than 320px (unless it's smallest breakpoint, then dropdowns become full width).</p>
     <p>Dropdown default padding is set to 16px.</p>
-    <p>FYI: Dropdowns use “Box” component as background, with Level 3 elevation.</p>
     <p>By default dropdowns are hidden with <code>display: none;</code> so keep that in mind if you ever use dropdowns and can't see them :D.</p>
   </div>
 
@@ -722,7 +659,6 @@
     </ul>
     <p>Use your best judgements when choosing the right size.</p>
     <p>If you need to utilize entire modal area and you have to get rid of default padding, please use modifier class <code>crayons-modal--padding-0</code>.</p>
-    <p>FYI: Modals use “Box” component as background, with Level 3 elevation.</p>
   </div>
 
   <div>
@@ -905,34 +841,80 @@
 
 <div class="container">
   <div class="body">
-    <h2>Navigation: Main nav</h2>
-    <p>Used as main nav in left sidebar or dropdowns...</p>
-    <p>This comoponent is being responsive: for resolutions smaller than <code>$breakpoint-s</code> they have some extra padding to make it easier to tap.</p>
-    <p>Can contain icons.</p>
+    <h2>Navigation: Link</h2>
+    <p>Crayons comes with bunch of navigation compontents - each being a variation of <code>.crayons-link</code> which itself is a simple text link.</p>
+    <p>By defualt <code>.crayons-link</code> has similar color to contnet. But we have a variation to make it stand out if needed.</p>
+
   </div>
 
-  <div class="p-6 bg-base-10">
-    <a href="#" class="crayons-nav-block crayons-nav-block--current"><span class="crayons-icon">🏡</span>Home</a>
-    <a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>Podcasts</a>
-    <a href="#" class="crayons-nav-block"><span class="crayons-icon">🏷</span>Tags</a>
-    <a href="#" class="crayons-nav-block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
-    <a href="#" class="crayons-nav-block"><span class="crayons-icon">👍</span>Code of Conduct</a>
-    <a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
+  <div class="p-6">
+    <a href="#" class="crayons-link">Hello, I am default link.</a><br><br>
+    <a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
   </div>
 
   <pre><%='
-  <a href="#" class="crayons-nav-block">...</a>
-  <a href="#" class="crayons-nav-block crayons-nav-block--current">...</a>
+  <a href="#" class="crayons-link">Hello, I am default link.</a>
+  <a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
+  '.rstrip %></pre>
+</div>
 
-  <!-- icon inside -->
-  <a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>...</a>
-  <a href="#" class="crayons-nav-block"><svg class="crayons-icon" ...>...</svg>...</a>
-  
-  <!-- indicator inside -->
-  <a href="#" class="crayons-nav-block">...<span class="crayons-indicator">3</span></a>
-  
-  <!-- indented -->
-  <a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
+<div class="container">
+  <div class="body">
+    <h2>Navigation: Link: Block</h2>
+    <p>This component is extension for classic <code>.crayons-link</code> and it comes with more visual hover and current states.</p>
+    <p>It can be used for example for nav, where links are rather short and stacked one under another. Think of main navigation or contextual navigation in dropdowns.</p>
+    <p>It's responsive: for resolutions smaller than <code>$breakpoint-s</code> it has extra padding to make it easier to tap.</p>
+    <p>It can contain extras, like icon or indicator. Or actually anything else - everything will be in the same line since this component has <code>display: flex</code> applied by default.</p>
+    <p>These links cna also be indented for scenarios like below (see last link "More...").</p>
+  </div>
+
+  <div class="p-6 bg-base-10">
+    <a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
+    <a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📻</span>Podcasts</a>
+    <a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">🏷</span>Tags</a>
+    <a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
+    <a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">👍</span>Code of Conduct</a>
+    <a href="#" class="crayons-link crayons-link--block crayons-link--block--indented">More...</a>
+  </div>
+
+  <pre><%='
+  <a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
+  <a href="#" class="... crayons-link--block">...</a>
+  <a href="#" class="... crayons-link--block">... <span class="crayons-indicator">3</span></a>
+  <a href="#" class="... crayons-link--block crayons-link--block--indented">More...</a>
+  '.rstrip %></pre>
+</div>
+
+<div class="container">
+  <div class="body">
+    <h2>Navigation: Link: Contentful</h2>
+    <p>This component is extension for classic <code>.crayons-link</code> and is meant to be used where we have to display more contnet inside.</p>
+    <p><code>.crayons-link--contentful</code> can be used in sidebar widgets where we list posts or listings. It can have secondary contnet.</p>
+    <p>Contenful Links will be automatically divided by a line.</p>
+  </div>
+
+  <div class="p-6 bg-base-0">
+    <a href="#" class="crayons-link crayons-link--contentful">
+      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
+      <span class="crayons-link__secondary">
+        <span class="crayons-indicator crayons-indicator--accent">NEW</span>
+        Category name
+      </span>
+    </a>
+
+    <a href="#" class="crayons-link crayons-link--contentful">
+      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
+      <span class="crayons-link__secondary">
+        Category name
+      </span>
+    </a>
+  </div>
+
+  <pre><%='
+  <a href="#" class="crayons-link crayons-link--contentful">
+    <div>Lorem ...</div>
+    <span class="crayons-link__secondary">Category ...</span>
+  </a>
   '.rstrip %></pre>
 </div>
 
@@ -940,21 +922,19 @@
   <div class="body">
     <h2>Navigation: Tabs</h2>
     <p>Use tabs as 2nd level navigation or filtering options.</p>
+    <p>Tabs can be created by also using <code>.crayons-link</code> elements but wrapped with extra container <code>.crayons-tabs</code>.</p>
   </div>
-
-  <div>
-    <div class="crayons-tabs">
-      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
-      <a href="#" class="crayons-tabs__item">Popular</a>
-      <a href="#" class="crayons-tabs__item">Latest</a>
-    </div>
+  <div class="crayons-tabs">
+    <a href="#" class="crayons-link crayons-link--current">Feed</a>
+    <a href="#" class="crayons-link">Popular</a>
+    <a href="#" class="crayons-link">Latest</a>
   </div>
 
   <pre><%='
   <div class="crayons-tabs">
-    <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
-    <a href="#" class="crayons-tabs__item">Popular</a>
-    <a href="#" class="crayons-tabs__item">Latest</a>
+    <a href="#" class="crayons-link crayons-link--current">Feed</a>
+    <a href="#" class="crayons-link">Popular</a>
+    <a href="#" class="crayons-link">Latest</a>
   </div>
   '.rstrip %></pre>
 </div>