diff --git a/docs/docs/palettes/app/custom.css b/docs/docs/palettes/app/custom.css
index f01c2d0fe..2ed0431f0 100644
--- a/docs/docs/palettes/app/custom.css
+++ b/docs/docs/palettes/app/custom.css
@@ -152,12 +152,10 @@ wa-icon-button.delete-button {
   }
 
   .suggestions {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
-    gap: var(--wa-space-s);
-
     wa-button {
       /* --background-color-hover: var(--background-color); */
+      height: var(--wa-form-control-height);
+      width: var(--wa-form-control-height);
 
       wa-icon {
         transition: var(--wa-transition-normal);
diff --git a/docs/docs/palettes/custom.njk b/docs/docs/palettes/custom.njk
index 3c566fc55..3d472335a 100644
--- a/docs/docs/palettes/custom.njk
+++ b/docs/docs/palettes/custom.njk
@@ -8,7 +8,7 @@ status: experimental
 ---
 <link href="{{ page.url }}../app/custom.css" rel="stylesheet">
 
-<h2 v-if="step > 0" v-cloak>My colors</h2>
+<h2 v-if="step > 0" v-cloak>My Colors</h2>
 
 <p v-if="step > 0" v-cloak>
   Just add your colors, in any order. We’ll sort them out for you, generate tints, and suggest additional colors.
@@ -37,7 +37,7 @@ status: experimental
       See a color you like? Grab it before it’s gone!
     </p>
   </header>
-  <div class="suggestions">
+  <div class="suggestions wa-cluster wa-align-items-start wa-gap-s">
     <template v-for="color, hue in suggestedColors">
       <info-tip>
         <wa-button :style="{'--background-color': color}" @click="addColor({hue})">