diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md
index 403120f48..ec4e216d6 100644
--- a/snippets/overflow-scroll-gradient.md
+++ b/snippets/overflow-scroll-gradient.md
@@ -28,7 +28,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
   content: '';
   position: absolute;
   bottom: 0;
-  width: 240px;
+  width: 250px;
   height: 25px;
   background: linear-gradient(
     rgba(255, 255, 255, 0.001),
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
index 30d608232..e108d755b 100644
--- a/src/docs/styles/_button.scss
+++ b/src/docs/styles/_button.scss
@@ -98,5 +98,8 @@
 }
 
 .button.button-view {
-  font-size: 1rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
\ No newline at end of file
diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss
index d4281eba1..2263ed4b4 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;
+  padding: 1rem 1rem 3rem;
   .card-title {
     font-size: 1.5rem;
     line-height: 1.375;
@@ -216,6 +216,5 @@
   width: calc(100% + 2.75rem);
   position: absolute;
   margin-left: 0.75rem;
-  bottom: -3.5rem;
-
+  bottom: -3.375rem;
 }
\ No newline at end of file
diff --git a/src/docs/styles/_colors.scss b/src/docs/styles/_colors.scss
index b2a525688..39008e824 100644
--- a/src/docs/styles/_colors.scss
+++ b/src/docs/styles/_colors.scss
@@ -32,7 +32,7 @@
 
   // Button color palette
   --button-back-color-a: #3B3EFC;
-  --button-back-color-b: #DC325F;
+  --button-back-color-b: #5d79ff;
   --button-fore-color: #FFFFFF;
   --button-shadow-color: rgba(0, 0, 0, 0.25);
   --button-shadow-focus-color: rgba(0, 0, 0, 0.29);
@@ -87,11 +87,11 @@
   // Interface color palette
   --back-color: #2A314C;
   --back-color-dark: #8993BE;
-  --fore-color: #ABAFBF;
-  --fore-color-light: #858CA8;
-  --fore-color-lighter: #707899;
-  --fore-color-dark: #B4BCD9;
-  --fore-color-darker: #FCFCFD;
+  --fore-color: #a4afd4;
+  --fore-color-light: #bfc5de;
+  --fore-color-lighter: #c4cbe2;
+  --fore-color-dark: #d1d6ea;
+  --fore-color-darker: #dee1f1;
 
   // Scrollbar
   --scrollbar-back-color: #434E76;
@@ -100,7 +100,7 @@
   // Menu color palette
   --menu-back-color: #434E76;
   --menu-border-color: #13151B;
-  --menu-fore-color: #959AAC;
+  --menu-fore-color: #e0e3f2;
   --menu-active-fore-color: #CDD4EF;
 
   // Card corner palette remains unchanged for consistency
@@ -115,10 +115,10 @@
   // Button color palette remains unchanged for consistency
 
   // Card color palette
-  --card-back-color: hsl(227, 28%, 36%);
-  --card-fore-color: #F0F0F0;
+  --card-back-color: #424d75;
+  --card-fore-color: #f0f2f8;
   --card-border-color: #13151B;
-  --card-fore-color-light: #D6D6D6; // previously C0C0C0, careful
+  --card-fore-color-light: #e0e3f2; // previously C0C0C0, careful
   --card-shadow-color-b: rgba(1, 8, 30, 0.24);
 
   // Pre & Code color palette remains unchanged for consistency
diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss
index aa11e129a..a3cd2f771 100644
--- a/src/docs/styles/_layout.scss
+++ b/src/docs/styles/_layout.scss
@@ -215,9 +215,10 @@ p.light-sub {
 // Category/tag title
 .tag-title {
   transition: 0.3s ease all;
-  font-size: 1.125rem;
+  font-size: 1.5rem;
   color: var(-fore-color-dark);
   line-height: 1.375;
+  text-align: center;
   a {
     &, &:link, &:visited {
       color: var(--fore-color-dark);