type
title
created
updated
tags
status
related
sources
concept
SVG Diagram Style Guide
2026-04-14
2026-04-14
design
svg
brand
diagrams
evergreen
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
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
Standard canvas is 800x500. Some diagrams use 900x250 or 900x350 depending on content.
Card
Corner radius: rx="16" for outer containers
Border: #2D2D2D, stroke-width="1.5"
Colored Top Bar (card accent)
4px height, sits at the top edge of the card. Color indicates category.
Inner Card (nested element)
Corner radius: rx="6" for small inner cards, rx="9" for medium
Fill: #1A1A1A (slightly lighter than parent card)
Numbered Circle (for sequences)
Circle stroke color matches the step's category color.
Arrow Connector
Always #E07850. Vertical for flow-down, horizontal for left-to-right pipelines.
Horizontal Divider (title underline)
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
Always dark theme. Never white or light backgrounds.
Space Grotesk only. No other fonts.
#E07850 is the signature accent. Use it for arrows, highlights, and the primary visual element.
Cards always have #2D2D2D borders. Never borderless cards.
Colored top bars (4px) identify categories. One color per category, consistent across the diagram.
Text is always left-aligned or center-aligned. Never right-aligned.
No gradients, shadows, or blur filters. Flat design only.
Numbered circles for sequential steps. Color matches category.
Arrow connectors are always #E07850 with triangle tips.
File naming: zero-padded number prefix (01-, 02-, etc.) + kebab-case description.
김경종