@haposoft/cafekit 0.7.22 → 0.7.24

package/src/claude/skills/generate-graph/references/style-2-dark-terminal.md

@@ -0,0 +1,107 @@
+# Style 2: Dark Terminal
+
+Neon-on-dark hacker aesthetic. Matches CLAUDE.md standard tech diagram style.
+
+## Colors
+
+```
+Background:     #0f0f1a  (near-black)
+Panel fill:     #0f172a  (slate-950)
+Panel stroke:   #334155  (slate-700)
+Box radius:     6px
+
+Text primary:   #e2e8f0  (slate-200)
+Text secondary: #94a3b8  (slate-400)
+Text muted:     #475569  (slate-600)
+
+Accent palette (use per theme/layer):
+  Purple:   #7c3aed / #a855f7
+  Orange:   #ea580c / #f97316
+  Blue:     #1d4ed8 / #3b82f6
+  Green:    #059669 / #10b981
+  Gold:     #eab308
+  Red:      #dc2626 / #ef4444
+
+Arrow colors: match accent of the source node's theme
+```
+
+## Background Gradient
+
+```xml
+<defs>
+  <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+    <stop offset="0%" stop-color="#0f0f1a"/>
+    <stop offset="100%" stop-color="#1a1a2e"/>
+  </linearGradient>
+</defs>
+<rect width="960" height="600" fill="url(#bg-grad)"/>
+```
+
+## Typography
+
+```
+font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace
+font-size:   13px labels, 11px sub-labels, 15px titles
+font-weight: 400 normal, 700 bold for section headers
+letter-spacing: 0.02em for labels
+```
+
+## Box Styles
+
+```xml
+<!-- Standard panel -->
+<rect rx="6" ry="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+
+<!-- Colored accent box (themed by function) -->
+<rect rx="6" ry="6" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
+<!-- Purple for AI/ML nodes -->
+<!-- #1c1917 / #ea580c for compute/API nodes -->
+<!-- #052e16 / #059669 for storage/DB nodes -->
+<!-- #1e3a5f / #3b82f6 for network/gateway nodes -->
+```
+
+## Glow Effect (optional, for key nodes)
+
+```xml
+<defs>
+  <filter id="glow-purple">
+    <feGaussianBlur stdDeviation="3" result="blur"/>
+    <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+  </filter>
+</defs>
+<rect filter="url(#glow-purple)" stroke="#a855f7" .../>
+```
+
+## Arrows
+
+```xml
+<defs>
+  <marker id="arrow-purple" markerWidth="8" markerHeight="6"
+          refX="7" refY="3" orient="auto">
+    <polygon points="0 0, 8 3, 0 6" fill="#a855f7"/>
+  </marker>
+</defs>
+<path stroke="#a855f7" stroke-width="1.5" stroke-dasharray="none"
+      fill="none" marker-end="url(#arrow-purple)"/>
+```
+
+## SVG Template
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
+     width="960" height="600">
+  <style>
+    text { font-family: 'SF Mono', 'Fira Code', monospace; fill: #e2e8f0; }
+  </style>
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f0f1a"/>
+      <stop offset="100%" stop-color="#1a1a2e"/>
+    </linearGradient>
+    <!-- arrow markers -->
+    <!-- glow filters -->
+  </defs>
+  <rect width="960" height="600" fill="url(#bg-grad)"/>
+  <!-- nodes, edges, legend -->
+</svg>
+```

package/src/claude/skills/generate-graph/references/style-3-blueprint.md

@@ -0,0 +1,113 @@
+# Style 3: Blueprint
+
+Engineering blueprint aesthetic with grid background and technical annotation style.
+
+## Colors
+
+```
+Background:     #0a1628
+Grid color:     #112240  (subtle grid lines)
+Panel fill:     #0d1f3c
+Panel stroke:   #00b4d8  (cyan/teal)
+Box radius:     2px  (sharp corners for technical feel)
+
+Text primary:   #caf0f8  (light cyan)
+Text secondary: #90e0ef
+Text label:     #00b4d8
+Text muted:     #48cae4 at 60% opacity
+
+Accent colors:
+  Cyan:    #00b4d8 / #48cae4
+  White:   #ffffff (key labels)
+  Orange:  #f77f00 (warnings/alerts)
+  Green:   #06d6a0 (success/active)
+```
+
+## Background with Grid
+
+```xml
+<defs>
+  <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
+    <path d="M 30 0 L 0 0 0 30" fill="none" 
+          stroke="#112240" stroke-width="0.5"/>
+  </pattern>
+</defs>
+<rect width="960" height="600" fill="#0a1628"/>
+<rect width="960" height="600" fill="url(#grid)" opacity="0.6"/>
+```
+
+## Typography
+
+```
+font-family: 'Courier New', 'Lucida Console', monospace
+font-size:   13px labels, 10px annotations, 16px title
+font-weight: 400; titles use 700
+text-transform: uppercase for section headers
+letter-spacing: 0.05em
+```
+
+## Box Styles
+
+```xml
+<!-- Technical node box -->
+<rect rx="2" ry="2" fill="#0d1f3c" stroke="#00b4d8" stroke-width="1"/>
+
+<!-- Corner brackets instead of full border (engineering style) -->
+<!-- Draw 4 L-shapes at corners instead of full rect -->
+
+<!-- Dashed box (external/optional component) -->
+<rect rx="2" fill="none" stroke="#00b4d8" stroke-width="1" 
+      stroke-dasharray="6,3"/>
+```
+
+## Arrows & Annotations
+
+```xml
+<defs>
+  <marker id="arrow-cyan" markerWidth="8" markerHeight="6"
+          refX="7" refY="3" orient="auto">
+    <polygon points="0 0, 8 3, 0 6" fill="#00b4d8"/>
+  </marker>
+</defs>
+<!-- Lines are sharp, orthogonal routing preferred -->
+<polyline points="x1,y1 x2,y1 x2,y2" 
+          stroke="#00b4d8" stroke-width="1" fill="none"
+          marker-end="url(#arrow-cyan)"/>
+
+<!-- Annotation label on line -->
+<text fill="#48cae4" font-size="10" text-anchor="middle">HTTP/REST</text>
+```
+
+## Title Block (bottom-right)
+
+```xml
+<!-- Blueprint title block -->
+<rect x="700" y="530" width="240" height="60" 
+      fill="#0d1f3c" stroke="#00b4d8" stroke-width="1"/>
+<line x1="700" y1="545" x2="940" y2="545" 
+      stroke="#00b4d8" stroke-width="0.5"/>
+<text x="820" y="542" text-anchor="middle" 
+      fill="#caf0f8" font-size="10">SYSTEM ARCHITECTURE</text>
+<text x="820" y="578" text-anchor="middle" 
+      fill="#00b4d8" font-size="13" font-weight="700">DIAGRAM TITLE</text>
+```
+
+## SVG Template
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
+     width="960" height="600">
+  <style>
+    text { font-family: 'Courier New', monospace; fill: #caf0f8; }
+  </style>
+  <defs>
+    <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
+      <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#112240" stroke-width="0.5"/>
+    </pattern>
+    <!-- arrow markers -->
+  </defs>
+  <rect width="960" height="600" fill="#0a1628"/>
+  <rect width="960" height="600" fill="url(#grid)" opacity="0.6"/>
+  <!-- nodes, edges, title block -->
+</svg>
+```

package/src/claude/skills/generate-graph/references/style-4-notion-clean.md

@@ -0,0 +1,94 @@
+# Style 4: Notion Clean
+
+Minimal, documentation-friendly. Designed to embed in Notion, Confluence, or GitHub wikis.
+
+## Colors
+
+```
+Background:     #ffffff
+Box fill:       #f9fafb  (gray-50) or #ffffff
+Box stroke:     #e5e7eb  (gray-200)
+Box radius:     4px
+
+Text primary:   #111827  (gray-900)
+Text secondary: #374151  (gray-700)
+Text muted:     #9ca3af  (gray-400)
+Text label:     #6b7280  (gray-500), uppercase, 11px
+
+Accent (subtle, used sparingly):
+  Blue:   #3b82f6 (arrows only)
+  Gray:   #d1d5db (dividers)
+```
+
+## Design Principles
+
+- **No decorative icons** — use geometric shapes only (rect, circle, diamond)
+- **Generous whitespace** — 24px+ padding between elements  
+- **Single arrow color** — blue (#3b82f6) for all connections
+- **Labels in ALL CAPS** — section headers and node type labels
+- **No drop shadows** — flat only
+
+## Typography
+
+```
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
+             'Helvetica Neue', Arial, sans-serif
+font-size:   14px labels, 11px uppercase type labels, 18px title
+font-weight: 400 normal, 500 medium for node labels
+```
+
+## Box Styles
+
+```xml
+<!-- Standard node -->
+<rect rx="4" fill="#f9fafb" stroke="#e5e7eb" stroke-width="1"/>
+<text fill="#111827" font-size="14" font-weight="500"/>
+
+<!-- Type label (inside or above box) -->
+<text fill="#9ca3af" font-size="11" 
+      font-weight="500" letter-spacing="0.08em">DATABASE</text>
+
+<!-- Section grouping (dashed container) -->
+<rect rx="4" fill="none" stroke="#e5e7eb" stroke-width="1" 
+      stroke-dasharray="4,3"/>
+```
+
+## Arrows
+
+```xml
+<defs>
+  <marker id="arrow-blue" markerWidth="8" markerHeight="6"
+          refX="7" refY="3" orient="auto">
+    <polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/>
+  </marker>
+</defs>
+<line stroke="#3b82f6" stroke-width="1.5" 
+      marker-end="url(#arrow-blue)"/>
+<!-- Optional: gray arrow for secondary flows -->
+<line stroke="#d1d5db" stroke-width="1" 
+      stroke-dasharray="4,3" marker-end="url(#arrow-gray)"/>
+```
+
+## SVG Template
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560"
+     width="960" height="560">
+  <style>
+    text { font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
+  </style>
+  <defs>
+    <!-- arrow markers (blue only) -->
+  </defs>
+  <rect width="960" height="560" fill="#ffffff"/>
+  <!-- nodes (no icons, geometry only) -->
+  <!-- edges (single color) -->
+  <!-- legend (minimal, only if 2+ flows) -->
+</svg>
+```
+
+## Sizing Guide
+
+- Node box: min 120×40px, prefer 160×48px for readability
+- Title: top-left, 18px, gray-900, margin 32px from edges
+- Spacing: 80px minimum between nodes horizontally, 60px vertically

package/src/claude/skills/generate-graph/references/style-5-glassmorphism.md

@@ -0,0 +1,125 @@
+# Style 5: Glassmorphism
+
+Frosted glass cards on dark gradient. Designed for product sites, keynotes, and hero sections.
+
+## Colors
+
+```
+Background gradient: #0d1117 → #161b22 → #0d1117 (diagonal)
+
+Glass card:
+  fill:           rgba(255,255,255,0.05)
+  stroke:         rgba(255,255,255,0.15)
+  backdrop-filter: blur(12px)  [SVG: use feGaussianBlur]
+  box-radius:     12px
+
+Text primary:   #f0f6fc  (near-white)
+Text secondary: #8b949e  (muted)
+Text gradient:  use linearGradient on text fill for hero labels
+
+Accent glows (one per layer):
+  Blue glow:    #58a6ff  / rgba(88,166,255,0.3)
+  Purple glow:  #bc8cff  / rgba(188,140,255,0.3)
+  Green glow:   #3fb950  / rgba(63,185,80,0.3)
+  Orange glow:  #f78166  / rgba(247,129,102,0.3)
+```
+
+## Background
+
+```xml
+<defs>
+  <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+    <stop offset="0%"   stop-color="#0d1117"/>
+    <stop offset="50%"  stop-color="#161b22"/>
+    <stop offset="100%" stop-color="#0d1117"/>
+  </linearGradient>
+  <!-- Ambient glow spots -->
+  <radialGradient id="glow-blue" cx="30%" cy="40%" r="40%">
+    <stop offset="0%" stop-color="rgba(88,166,255,0.15)"/>
+    <stop offset="100%" stop-color="rgba(88,166,255,0)"/>
+  </radialGradient>
+  <radialGradient id="glow-purple" cx="70%" cy="60%" r="35%">
+    <stop offset="0%" stop-color="rgba(188,140,255,0.12)"/>
+    <stop offset="100%" stop-color="rgba(188,140,255,0)"/>
+  </radialGradient>
+</defs>
+<rect width="960" height="600" fill="url(#bg)"/>
+<rect width="960" height="600" fill="url(#glow-blue)"/>
+<rect width="960" height="600" fill="url(#glow-purple)"/>
+```
+
+## Glass Card Effect
+
+SVG cannot do real backdrop-filter, so simulate with:
+
+```xml
+<defs>
+  <filter id="glass-blur">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
+  </filter>
+</defs>
+
+<!-- Glass card: layered rects -->
+<!-- 1. Subtle inner shadow -->
+<rect rx="12" fill="rgba(255,255,255,0.03)" stroke="none"/>
+<!-- 2. Glass body -->
+<rect rx="12" fill="rgba(255,255,255,0.06)" 
+      stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+<!-- 3. Top highlight line -->
+<line stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+```
+
+## Typography
+
+```
+font-family: 'Inter', -apple-system, 'SF Pro Display', sans-serif
+font-size:   14px labels, 12px sublabels, 20px hero title
+font-weight: 400 normal, 600 semi-bold, 700 bold titles
+```
+
+## Gradient Text (for hero labels)
+
+```xml
+<defs>
+  <linearGradient id="text-grad-blue" x1="0%" y1="0%" x2="100%" y2="0%">
+    <stop offset="0%"   stop-color="#58a6ff"/>
+    <stop offset="100%" stop-color="#bc8cff"/>
+  </linearGradient>
+</defs>
+<text fill="url(#text-grad-blue)" font-weight="700" font-size="20">
+  AI Pipeline
+</text>
+```
+
+## Arrows
+
+```xml
+<defs>
+  <marker id="arrow-blue" markerWidth="8" markerHeight="6"
+          refX="7" refY="3" orient="auto">
+    <polygon points="0 0, 8 3, 0 6" fill="#58a6ff"/>
+  </marker>
+</defs>
+<!-- Slightly glowing line -->
+<path stroke="#58a6ff" stroke-width="1.5" fill="none"
+      opacity="0.8" marker-end="url(#arrow-blue)"/>
+```
+
+## SVG Template
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
+     width="960" height="600">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+    text { font-family: 'Inter', -apple-system, sans-serif; fill: #f0f6fc; }
+  </style>
+  <defs>
+    <!-- bg gradients, glow gradients, glass filter, arrow markers -->
+  </defs>
+  <!-- background layers -->
+  <!-- glass cards (nodes) -->
+  <!-- glowing edges -->
+  <!-- labels with gradient text for heroes -->
+</svg>
+```

package/src/claude/skills/generate-graph/references/style-6-claude-official.md

@@ -0,0 +1,209 @@
+# Style 6: Claude Official
+
+Inspired by Anthropic's Claude blog technical diagrams — warm, approachable, professional.
+s
+
+```
+Background:     #f8f6f3  (warm cream)
+Box fill:       
+  - Blue tint:   #a8c5e6  (alert/input nodes)
+  - Green tint:  #9dd4c7  (agent nodes)
+  - Beige:       #f4e4c1  (infrastructure/bus)
+  - Gray tint:   #e8e6e3  (storage/state)
+Box stroke:     #4a4a4a  (dark gray)
+Box radius:     12px
+Text primary:   #1a1a1a  (near black)
+Text secondary: #6a6a6a  (medium gray)
+Text labels:    #5a5a5a  (arrow labels)
+
+Semanode colors:
+  Input/Source:    #a8c5e6  (soft blue)
+  Agent/Process:   #9dd4c7  (soft teal-green)
+  Infrastructure:  #f4e4c1  (warm beige)
+  Storage/State:   #e8e6e3  (light gray)
+  
+Arrow color:     #5a5a5a  (consistent dark gray)
+`ypography
+
+```
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 
+             Arial, sans-serif
+font-size:   16px node labels, 14px descriptions, 13px arrow labels
+font-weight: 600 for node labels, 400 for descriptions, 700 for titles
+```
+
+## Box Shapes
+
+```xml
+<!-- Agent node (teal-green) -->
+<rect rx="12" ry="12" fill="#9dd4c7" stroke="#4a4a4a" stroke-width="2.5"/>
+
+<!-- Input/Source node (soft blue) -->
+<rect rx="12" ry="12" fill="#a8c5e6" stroke="#4a4a4a" stroke-width="2.5"/>
+
+<!-- Infrastructure node (warm beige) -->
+<rect rx="12" ry="12" fill="#f4e4c1" stroke="#4a4a4a" stroke-width="2.5"/>
+
+<!-- Storage/State node (light gray) -->
+<rect rx="12" ry="12" fill="#e8e6e3" stroke="#4a4a4a" stroke-width="2.5"/>
+```
+
+## Arrows
+
+```xml
+<defs>
+  <marker id="arrow-claude" markerWidth="8" markerHeight="8"
+          refX="7" refY="4" orient="auto">
+    <polygon points="0 0, 8 4, 0 8" fill="#5a5a5a"/>
+  </marker>
+</defs>
+
+<!-- Arrow line -->
+<line stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
+
+<!-- Or use simple line without arrowhead for cleaner look -->
+<line stroke="#5a5a5a" stroke-width="2"/>
+```
+
+## Arrow Semantics
+
+Use different arrow styles to convey meaning:
+
+| Flow Type | Color | Stroke | Dash | Usage |
+|-----------|-------|--------|------|-------|
+| Primary data flow | #5a5a5a | 2px solid | none | Main request/response path |
+| Memory write | #5a5a5a | 2px | `5,3` | Write/store operations |
+| Memory read | #5a5a5a | 2px solid | none | Retrieval from store |
+| Control/trigger | #5a5a5a | 1.5px | `3,2` | Event triggers |
+
+```xml
+<!-- Solid arrow for reads -->
+<line stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
+
+<!-- Dashed arrow for writes -->
+<line stroke="#5a5a5a" stroke-width="2" stroke-dasharray="5,3" marker-end="url(#arrow-claude)"/>
+```
+
+## Arrow Labels
+
+Arrow labels should be **technical and specific**, positioned mid-arrow:
+
+```xml
+<text x="..." y="..." fill="#5a5a5a" font-size="13" text-anchor="middle">
+  store(embedding)
+</text>
+```
+
+Good lls: `query(text)`, `retrieve(top_k=5)`, `embed(768d)`, `POST /api/search`
+Avoid vague labels: "Process", "Send", "Get"
+
+## Node Content Guidelines
+
+Node content should include **technical details**, not just concepts:
+
+**Good examples:**
+- "Vector Store" → "Vector Sne)" + "• 768-dim embeddings" + "• Cosine s"
+- "LLM" → "GPT-4" + "• 8K context" + "• Temperature: 0.7"
+- "Memory" → "Redis Cache" + "• TTL: 5min" + "• Max: 4K tokens"
+
+**Avoid vague descriptions:**
+- "Process data" → specify what processing
+- "Store information" → specify storage type and format
+- "Handle requests" → specify request type and method
+
+Use 2-3 lines per node:
+1. Component name (bold, 16px)
+2. Technical detail or implementation (14px)
+3. Key parameter or constraint (14px, optional)
+
+## Layer Labels
+
+For multi-layer architectures, add layer labels on the left side:
+
+```xml
+<text x="30" y="130" fill="#6a6a6a" font-size="14" font-weight="600">Input</text>
+<text x="30" y="290" fill="#6a6a6a" font-size="14" font-weight="600">Processing</text>
+<text x="30" y="490" fill="#6a6a6a" font-size="14" font-weight="600">Storage</text>
+```
+
+Position at the vertical center of each layer.
+
+## Legend Requirement
+
+When using 2+ arrow types or colors, include a legend in the bottom-right corner:
+
+```Legend box -->="720" y="520" width="220" height="8" ry="8" 
+      fill="#ffffff" stroke="#4a4a4a" stroke-width="1.5"/>
+<text x="735" y="540" fill="#1a1a1a" font-size="13" font-weight="600">Legend</text>
+
+<!-- Legend items -->
+<line x1="735" y1="555" x2="765" y2="555" stroke="#5a5a5a" stroke-width="2"/>
+<text x="775" y="560" fill="#6a6a6a" font-size="12">Read operation</text>
+
+<line x1="735" y1="570" x2="765" y2="570" stroke="#5a5a5a" stroke-width="2" stroke-dasharray="5,3"/>
+<text x="775" y="575" fill="#6a6a6a" font-size="12">Write operation</text>
+```
+
+Position: bottom-right, 20px margin from edges.
+
+## Layout Principles
+
+- **Generous spacing**: Minimum 80px between node edges
+- **Horizontal alignment same layer align perfectly
+- **Vertical flow**: Top-to-bottom preferred
+- **Symmetry**: Balaight composition
+- **Clean lines**: Orthogonal rotical then horizontal, or vice# SVG Template
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" 
+     width="960" height="600">
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
+                   'Helvetica Neue', Arial, sans-serif; 
+    }
+  </style>
+  <defs>
+    <marker id="arrow-claude" markerWidth="8" markerHeight="8"
+            refX="7" refY="4" orient="auto">
+      <polygon points="0 0, 8 4, 0 8" fill="#5a5a5a"/>
+    </marker>
+    <filter id="shadow-soft">
+      <feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#00000008"/>
+    </filter>
+  </defs>
+  
+  <!-- Warm cream background -->
+  <rect width="960" height="600" fill="#f8f6f3"/>
+  
+  <!-- Title (optional) -->
+  <text x="480" y="40" text-anchor="middle" fill="#1a1a1a" 
+        font-size="20" font-weight="700">Diagram Title</text>
+  
+  <!-- Nodes -->
+  <!-- Agent node example -->
+  <rect x="100" y=" width="180" height="80" rx="12" ry="12"
+        fill="#9dd4c7" stroke="#4a4a4a" stroke-width="2.5" 
+        filter="url(#shadow-soft)"/>
+  <text x="190" y="145" text-anchor="middle" fill="#1a1a1a" 
+        16" font-weight="600">Agent name</text>
+  
+  <!-- Edges -->
+  <line x1="190" y1="180" x2="190" y2="240" 
+        stroke="#5a5a5a" stroke-width="2" marker-end="url(#arrow-claude)"/>
+  <text x="210" y="215" fill="#5a5a5a" font-size="13">Publish</text>
+</svg>
+```
+
+## Design Philosophy
+
+Claude's official style emphasizes:
+- **Warmth**: Cream background, ls
+- ty**: High contrast text, generous spacing
+- **Professionalism**: Consistent stroke weights, aligned elements
+- **Approachability**: Rounded corners, friendly colors
+
+Avoid:
+- Harsh shadows or gradients
+- Overly saturated colors
+- Thin stroke weights (< 2px)
+- Cluttered layouts