add docs for new colour pallet

Author: mansona

docs/concepts/colours.md

@@ -29,14 +29,23 @@ The primary palette is applied across every page of the website and contains the
 
 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.
 
-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" />
+  <ColorPallet class="lg:col-2" @color="#10AAFF" @name="Blue" @variable="--color-blue" />
+  <ColorPallet class="lg:col-2" @color="#DFFDFF" @name="Light Blue" @variable="--color-blue-light" />
+</div>
 
-### Examples
+<div class="layout">
+  <ColorPallet class="lg:col-2" @color="#8BE998" @name="Green" @variable="--color-green" />
+  <ColorPallet class="lg:col-2" @color="#C7F9DE" @name="Light Green" @variable="--color-green-light" />
+</div>
 
-#### Applying a background color to the card component
+<div class="layout">
+  <ColorPallet class="lg:col-2" @color="#FFEC64" @name="Yellow" @variable="--color-yellow" />
+  <ColorPallet class="lg:col-2" @color="#FFFAD6" @name="Light Yellow" @variable="--color-yellow-light" />
+</div>
 
-<div class="card bg-info">
-  <div class="card-content">
-  Do you have questions? Run into an issue or a bug? Get support from the community. A list of chat rooms, forums, and more are available here.
-  </div>
+<div class="layout">
+  <ColorPallet class="lg:col-2" @color="#7650F1" @name="Lilac" @variable="--color-lilac" />
+  <ColorPallet class="lg:col-2" @color="#D5CBFF" @name="Light Lilac" @variable="--color-lilac-light" />
 </div>