add images to design guidelines and color palette section

Author: ericbrown99

docs/mini-apps/get-distribution/design-guidelines.mdx

@@ -14,10 +14,43 @@ description: "Build a mini app that is intuitive and delightful to use."
 ### Navigation
 
 * Most mini apps should include a **bottom navigation bar**.  
+
+<img 
+    src="/images/design-guidelines/navigation-tab.png" 
+    alt="Bottom navigation bar example" 
+    className="rounded-lg"
+/>
+
+* A side menu can also be an intuitive place to put settings and user profile information.
+    <img 
+        src="/images/design-guidelines/navigation-sidebar.png"
+        alt="Side navigation menu example"
+        className="rounded-lg"
+    />
+
 * Always include **labels under icons** so users understand each tab.  
 * Test on multiple device sizes to ensure buttons are not cut off.
 
 
+### Colors
+
+Use color to communicate clearly, express your brand, and create cohesive mini app experiences.
+
+### **Color Palette**
+
+* **Primary:** Brand color for CTAs and key interactions.  
+* **Secondary:** Complements primary; use for accents or secondary actions.  
+* **Neutral:** For text, backgrounds, and structure with strong contrast.
+
+### **Themes**
+
+* Support **light and dark modes**:  
+* Maintain contrast and brand consistency.  
+* Respect system preference but allow manual toggle.  
+* Use smooth transitions between themes.  
+* **💡Tip:** Use **semantic color tokens** (e.g., `--color-primary`, `--color-background`) with **light/dark theme overrides** for maintainability and flexibility.  
+
+
 ### Typography
 
 * Ensure the fonts you use are easy to read. Our team recommends **Inter.**   
@@ -30,10 +63,10 @@ description: "Build a mini app that is intuitive and delightful to use."
 * Consistent spacing: Creates visual rhythm and predictability with consistent spacing.  
 * Give content room to breathe with white space.  
 * Avoid cramped layouts.  
-* Base Unit: Start with a base spacing unit (typically **4px** or **8px**):  
+* Base Unit: Start with a base spacing unit (typically **4px** or **8px**) and maintain consistency throughout:  
   * 4px base: More granular control, better for mobile.  
   * 8px base: Easier mental math, good for desktop.  
-  * Choose one: Maintain consistency throughout.
+
 
 ### Touch Interactions