diff --git a/styles/patterns/_avatar.scss b/styles/patterns/_avatar.scss
index a4e347c..ccf43a6 100644
--- a/styles/patterns/_avatar.scss
+++ b/styles/patterns/_avatar.scss
@@ -1,6 +1,6 @@
 .avatar {
-    height: 8rem;
-    width: 8rem;
+    height: 4rem;
+    width: 4rem;
 
     background-color: #d1d5db;
     /* Rounded border */
diff --git a/styles/patterns/_color-swatch.scss b/styles/patterns/_color-swatch.scss
index 1c18b38..39074ee 100644
--- a/styles/patterns/_color-swatch.scss
+++ b/styles/patterns/_color-swatch.scss
@@ -1,6 +1,8 @@
 .swatch {
     /* Wrap the items */
+    align-items: center;
     display: flex;
+    justify-content: center;
     flex-wrap: wrap;
 }
 .swatch__item {
diff --git a/styles/patterns/_ribbon.scss b/styles/patterns/_ribbon.scss
index 1aeb216..6312f2e 100644
--- a/styles/patterns/_ribbon.scss
+++ b/styles/patterns/_ribbon.scss
@@ -24,9 +24,6 @@
     bottom: -0.5rem;
     position: absolute;
 
-    /* Displayed under the ribbon */
-    z-index: 1;
-
     /* Background */
     border: 1rem solid #d1d5db;
 }
@@ -49,7 +46,8 @@
 
     border: 0.5rem solid transparent;
     border-bottom-width: 0;
-    border-top-color: #aaa;
+    border-top-color: #6b7280;
+    z-index: 1;
 }
 
 .ribbon__triangle--l {