diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js
index 19c23a41b..94663e9a8 100644
--- a/src/docs/components/SnippetCard.js
+++ b/src/docs/components/SnippetCard.js
@@ -33,7 +33,7 @@ const CodepenButton = ({ snippetData }) => (
         })
       }
     />
-    <button className='button button-a button-codepen'>Edit on Codepen</button>
+    <button className='button button-b button-codepen'>Edit on Codepen</button>
   </form>
 )
 
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
index e108d755b..2eb80d6fa 100644
--- a/src/docs/styles/_button.scss
+++ b/src/docs/styles/_button.scss
@@ -88,13 +88,14 @@
 .button.button-codepen {
   display: block;
   margin: 0.25rem calc(50% - 3rem);
-  min-width: 180px;
-  font-size: 1rem;
+  min-width: 176px;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-codepen'%3E%3Cpolygon points='12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2'%3E%3C/polygon%3E%3Cline x1='12' y1='22' x2='12' y2='15.5'%3E%3C/line%3E%3Cpolyline points='22 8.5 12 15.5 2 8.5'%3E%3C/polyline%3E%3Cpolyline points='2 15.5 12 8.5 22 15.5'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='8.5'%3E%3C/line%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position-y: center;
   background-position-x: 0.5rem;
-  padding-left: 2.5rem
+  padding-left: 2.25rem
 }
 
 .button.button-view {
diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss
index 2263ed4b4..9641671d5 100644
--- a/src/docs/styles/_card.scss
+++ b/src/docs/styles/_card.scss
@@ -11,7 +11,7 @@
   color: var(--card-fore-color);
   box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
   border-radius: 0.125rem;
-  padding: 1rem 1rem 3rem;
+  padding: 1rem 1rem 3.25rem;
   .card-title {
     font-size: 1.5rem;
     line-height: 1.375;
@@ -48,7 +48,7 @@
     width: 100%;
     border-radius: 0.25rem;
     line-height: 1.15;
-    padding: 2.25rem 1.125rem 2.25rem;
+    padding: 1rem;
   }
   .card-examples {
     transition: all 0.3s ease;
@@ -87,12 +87,15 @@
   margin: 1.25rem 1rem 0.125rem 1rem;
   font-weight: 700;
   &.card-section-html {
+    color: white;
     background-image: linear-gradient(135deg,#ff4c9f,#ff7b74);
   }
   &.card-section-css {
+    color: white;
     background-image: linear-gradient(135deg,#7983ff,#5f9de9);
   }
   &.card-section-js {
+    color: white;
     background-image: linear-gradient(135deg,#ffb000,#f58818);
   }
 }
diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss
index 9707f6616..79ee7aedb 100644
--- a/src/docs/styles/_layout.scss
+++ b/src/docs/styles/_layout.scss
@@ -105,7 +105,7 @@ img.website-logo {
   }
   &::after {
     transition: 0.3s ease all;
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f2f3f8'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f5f6fa'/%3E%3C/svg%3E");
     background-size: 24px 24px;
     width: 100%;
     height: 24px;