fix(blog): optimize component share logic, typography, and modal layouts

apps/web/docs/STYLEGUIDE.md

@@ -72,3 +72,14 @@ Standardized containers ensure consistency across different screen sizes.
 - **Background Grid**: A subtle, low-opacity grid pattern provides a technical "blueprint" feel to the pages.
 - **Micro-interactions**: Hovering over icons or tags should trigger subtle scales (`105%-110%`) and color shifts.
 
+## 7. Thumbnail & Illustration Style
+
+Blog post thumbnails are generated via AI image generation. They should follow these style rules:
+
+- **Style**: Technical blueprint / architectural illustration — clean lines, monochrome base with one highlighter accent color
+- **No photos**: Abstract, geometric, or diagrammatic illustrations only
+- **Color palette**: Slate grays + one accent from the highlighter palette (yellow, pink, or green)
+- **Feel**: "Engineering notebook sketch" — precise, minimal, professional
+- **No text in images**: Titles and labels are handled by the website layout
+- **Aspect ratio**: 16:9 for blog headers, 1:1 for social media cards
+- **No AI-generated photos of people, products, or realistic scenes** — only abstract/technical visualizations