Add logo icon to components and update branding assets

- Integrated `logo-icon.svg` into headers, footer, and development layout for consistent branding.
- Updated `logo.svg` and `logo-icon.svg` with improved gradient and filter naming for clarity.
- Enhanced `README.md` and branding documentation with logo visuals and descriptions.
- Refined visual identity details in docs to emphasize the branding hierarchy and usage.

frontend/docs/branding/02-visual-identity.md

@@ -2,7 +2,21 @@
 
 ## Logo & Iconography
 
-_Pending logo design._
+## Logo
+
+The **PragmaStack** logo represents the core values of the project: structure, speed, and clarity.
+
+<div align="center">
+  <img src="../../public/logo.svg" alt="PragmaStack Logo" width="300" />
+  <p><em>The Stack: Geometric layers representing the full-stack architecture.</em></p>
+</div>
+
+### Icon
+For smaller contexts (favicons, headers), we use the simplified icon:
+
+<div align="center">
+  <img src="../../public/logo-icon.svg" alt="PragmaStack Icon" width="64" />
+</div>
 
 For now, we use the **Lucide React** icon set for all iconography. Icons should be used sparingly and meaningfully to enhance understanding, not just for decoration.