Secondary colors

addon/styles/global.css

@@ -26,6 +26,19 @@
   --color-brand-hc-dark: #cf2d20;
   --color-brand-40: rgba(224, 78, 57, 0.4);
 
+  --color-blue-dark: #0076D6;
+  --color-blue: #10AAFF;
+  --color-blue-light: #DFFDFF;
+
+  --color-green: #8BE998;
+  --color-green-light: #C7F9DE;
+
+  --color-yellow: #FFEC64;
+  --color-yellow-light: #FFFAD6;
+
+  --color-lilac: #7650F1;
+  --color-lilac-light: #D5CBFF;
+
   --color-gray: #a2a3a8;
   --color-success: #d9f9e3;
   --color-danger: #ffd8e1;

docs/concepts/colors.md

@@ -44,8 +44,90 @@ The primary palette is applied across every page of the website and contains the
   {{/each}}
 </div>
 
-## Secondary Colors
+## Illustration Colors
 
-The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
+These colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.
 
-The secondary palette is yet to be defined.
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#0076D6"
+    @name="Dark Blue"
+    @variable="--color-blue-dark"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#10AAFF"
+    @name="Blue"
+    @variable="--color-blue"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#DFFDFF"
+    @name="Light Blue"
+    @variable="--color-blue-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#8BE998"
+    @name="Green"
+    @variable="--color-green"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#C7F9DE"
+    @name="Light Green"
+    @variable="--color-green-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#FFEC64"
+    @name="Yellow"
+    @variable="--color-yellow"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#FFFAD6"
+    @name="Light Yellow"
+    @variable="--color-yellow-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>
+
+<div class="layout">
+  <ColorPallet
+    class="lg:col-2"
+    @color="#7650F1"
+    @name="Lilac"
+    @variable="--color-lilac"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+  <ColorPallet
+    class="lg:col-2"
+    @color="#D5CBFF"
+    @name="Light Lilac"
+    @variable="--color-lilac-light"
+    @textClasses={{array 'text-sm' 'text-base' 'text-md' 'text-lg' 'text-xl'}}
+    @textColorClasses={{array '' 'text-light'}}
+  />
+</div>