add claude-obsidian

2026-05-28 10:57:16 +09:00
parent 1b07531a45
commit 72dad72703
205 changed files with 41703 additions and 80 deletions
@@ -0,0 +1,159 @@
+---
+type: concept
+title: "SVG Diagram Style Guide"
+created: 2026-04-14
+updated: 2026-04-14
+tags:
+  - design
+  - svg
+  - brand
+  - diagrams
+status: evergreen
+related:
+  - "[[index]]"
+sources:
+  - "claude-ads/assets/diagrams/ (17 SVGs, v1.5.0)"
+---
+
+# SVG Diagram Style Guide
+
+The canonical visual style for all diagrams across agricidaniel's Claude Code skill repos. Extracted from the 17 production SVGs in claude-ads. Use this as the reference when creating or updating diagrams for any skill repo.
+
+## Font
+
+```
+font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif
+```
+
+Space Grotesk is the only typeface. No fallback to serif or monospace.
+
+## Color Palette
+
+### Core (use these in every diagram)
+
+| Token | Hex | Role |
+|-------|-----|------|
+| bg | #0A0A0A | Canvas background (near-black) |
+| card | #111111 | Card/container fill |
+| card-inner | #1A1A1A | Nested element fill |
+| border | #2D2D2D | Card borders, dividers |
+| text-primary | #F5F5F0 | Headings, labels (off-white) |
+| text-secondary | #888888 | Descriptions, captions |
+| text-tertiary | #6a6a6a | De-emphasized metadata |
+| accent | #E07850 | Primary accent, arrows, highlights (warm rust-orange) |
+| accent-bright | #FF6B35 | Secondary accent, hover states (brighter orange) |
+
+### Platform/Category Colors (use for variety within a diagram)
+
+| Token | Hex | Typical use |
+|-------|-----|-------------|
+| blue | #60A5FA | Google, data, information |
+| purple | #8b5cf6 | Meta, strategy, creative |
+| cyan | #06b6d4 | LinkedIn, networking |
+| green | #4ADE80 | Success, validation, TikTok |
+| rose | #F43F5E | YouTube, alerts |
+| orange | #FF6B35 | Microsoft, secondary accent |
+| gray | #888888 | Neutral, generic platforms |
+
+### Status Colors (for pass/warn/fail indicators)
+
+| Token | Hex | Role |
+|-------|-----|------|
+| pass | #16a34a | Pass, success |
+| warn | #f59e0b | Warning, attention |
+| fail | #dc2626 | Fail, critical |
+
+## Typography Scale
+
+| Element | Size | Weight | Color | Extra |
+|---------|------|--------|-------|-------|
+| Diagram title | 16-17px | 700 | #F5F5F0 | text-anchor: middle |
+| Subtitle | 11px | 400 | #888888 | text-anchor: middle |
+| Section label | 13px | 700 | accent color | letter-spacing: 2 |
+| Card heading | 12-15px | 600-700 | #F5F5F0 | text-anchor: middle |
+| Card subtext | 9-11px | 400 | accent color | Skill/agent name |
+| Body text | 10px | 400 | #888888 | Descriptions |
+| Tiny label | 9px | 400 | #6a6a6a | Metadata, counts |
+
+## Layout Primitives
+
+### Outer Container
+```xml
+<rect width="800" height="500" fill="#0A0A0A"/>
+```
+Standard canvas is 800x500. Some diagrams use 900x250 or 900x350 depending on content.
+
+### Card
+```xml
+<rect x="40" y="20" width="720" height="120" rx="16" fill="#111111" stroke="#2D2D2D" stroke-width="1.5"/>
+```
+- Corner radius: `rx="16"` for outer containers
+- Border: `#2D2D2D`, `stroke-width="1.5"`
+
+### Colored Top Bar (card accent)
+```xml
+<rect x="40" y="20" width="720" height="4" rx="2" fill="#E07850"/>
+```
+4px height, sits at the top edge of the card. Color indicates category.
+
+### Inner Card (nested element)
+```xml
+<rect x="60" y="230" width="105" height="60" rx="6" fill="#1A1A1A" stroke="#2D2D2D" stroke-width="1"/>
+```
+- Corner radius: `rx="6"` for small inner cards, `rx="9"` for medium
+- Fill: `#1A1A1A` (slightly lighter than parent card)
+
+### Numbered Circle (for sequences)
+```xml
+<circle cx="138" cy="60" r="14" fill="#0A0A0A" stroke="#60A5FA" stroke-width="1.5"/>
+<text x="138" y="60" font-size="12" fill="#60A5FA" text-anchor="middle" font-weight="bold" dominant-baseline="central">1</text>
+```
+Circle stroke color matches the step's category color.
+
+### Arrow Connector
+```xml
+<line x1="400" y1="140" x2="400" y2="170" stroke="#E07850" stroke-width="1.5"/>
+<polygon points="394,167 400,177 406,167" fill="#E07850"/>
+```
+Always `#E07850`. Vertical for flow-down, horizontal for left-to-right pipelines.
+
+### Horizontal Divider (title underline)
+```xml
+<line x1="380" y1="36" x2="520" y2="36" stroke="#E07850" stroke-width="2.5" stroke-linecap="round"/>
+```
+Short centered line under diagram title. Always accent color.
+
+## Diagram Types (from claude-ads)
+
+| # | Name | Layout | Size |
+|---|------|--------|------|
+| 01 | Architecture | 3-layer vertical stack | 800x500 |
+| 02 | Parallel Audit | Agent grid with flow | 800x500 |
+| 04 | Platform Checks | Checklist columns | 800x500 |
+| 05 | Quality Gates | Rule cards | 800x500 |
+| 06 | How It Works | Step sequence | 900x250 |
+| 07 | Data Flow | Horizontal pipeline | 900x250 |
+| 08 | Industry Templates | Card grid | 900x350 |
+| 10 | MCP Integration | Connection diagram | 800x500 |
+| 12 | Privacy Flow | Vertical flow | 800x500 |
+| 13 | Scoring Algorithm | Formula breakdown | 800x500 |
+| 14 | Creative Pipeline | 5-step horizontal | 900x250 |
+| 15 | Platform Grid | 2-row card grid | 900x350 |
+| 16 | PDF Pipeline | Process flow | 900x250 |
+| 17 | A/B Testing | Split comparison | 800x500 |
+| 18 | PPC Calculators | Tool cards | 900x350 |
+| 19 | Audit Lifecycle | Circular flow | 800x500 |
+| 20 | Install Methods | Option cards | 900x250 |
+
+## Rules
+
+1. Always dark theme. Never white or light backgrounds.
+2. Space Grotesk only. No other fonts.
+3. #E07850 is the signature accent. Use it for arrows, highlights, and the primary visual element.
+4. Cards always have #2D2D2D borders. Never borderless cards.
+5. Colored top bars (4px) identify categories. One color per category, consistent across the diagram.
+6. Text is always left-aligned or center-aligned. Never right-aligned.
+7. No gradients, shadows, or blur filters. Flat design only.
+8. Numbered circles for sequential steps. Color matches category.
+9. Arrow connectors are always #E07850 with triangle tips.
+10. File naming: zero-padded number prefix (01-, 02-, etc.) + kebab-case description.