feat: adopt GitHub visual language system in image generation guidelines

[Copilot]

Diagrams generated by the workshop image workflows lacked a shared visual vocabulary for GitHub concepts — no consistent icon shapes, no semantic state colors. This adds an authoritative spec and wires it into both image-generation workflows.

guidelines.md — new section: GitHub visual language system

• Octicon-inspired shape table for inline SVG primitives: issues (open circle-with-dot / closed solid circle), PRs (branch-merge path), discussions (speech bubble), commits (dot on branch line), workflow runs (play triangle), schedule triggers (clock face)

• Primer semantic state color table — hex values for both themes:

  State	Light	Dark
  Open	#1a7f37	#3fb950
  Closed	#cf222e	#f85149
  Merged	#8250df	#a371f7
  Draft	#57606a	#8b949e
  In progress	#9a6700	#e3b341

• Usage rules: GitHub icons required for entity nodes; state must match color; accent blue reserved for non-entity flows; no mixing icon vocabularies

workshop-explanatory-diagrams.md

• Replaces vague "adapt semantic colors" bullet with a cross-reference to the new guidelines section
• Adds a "GitHub icon usage in diagrams" subsection listing required shapes and the label+icon pairing rule
• Adds GitHub icon requirement to diagram content rules

workshop-ui-screenshots.md

• Replaces plain-text ✓ / - status indicators with Octicon-inspired shapes and Primer state colors
• Specifies icon shape for Issues/PRs rows, Discussions, Actions status, and schedule/clock badges
• Adds explicit cross-reference to the guidelines visual language section

[pelikhan]

@copilot Apply visual language to existing .svg images - consider writing a script to enforce it or detect violations.

[pelikhan]

@copilot update guidlines.md to follow https://brand.github.com/ guidance.

[Copilot]

@copilot Apply visual language to existing .svg images - consider writing a script to enforce it or detect violations.

Done in commit feat: add SVG visual language violation detection script and CI workflow.

scripts/check-svg-visual-language.js is a zero-dependency Node.js static checker that scans SVG files in workshop/images/ for four categories of visual language violations:

• Accessibility — missing role="img" or accessible label (aria-label/aria-labelledby) on root <svg>
• Unicode icon characters — ✓, ✗, ⚡, 🕐, ▶ etc. in short text nodes that should be Octicon-inspired inline SVG paths
• State-color parity — state badge labels ("Open", "Closed", "Merged", "Draft") using fill colors that don't match the Primer semantic palette
• Non-standard canvas width — themed variants using a width other than 1200 or 960 (the two approved widths)

Run locally:

node scripts/check-svg-visual-language.js
# or for specific files:
SVG_FILES="workshop/images/foo-light.svg workshop/images/foo-dark.svg" node scripts/check-svg-visual-language.js

.github/workflows/svg-visual-language-check.yml wires it into CI: fails PRs that introduce violations in changed SVGs, and creates/updates a tracked issue for violations pushed to main.

The checker found 79 existing violations across 37 files (all icon-character issues in older SVGs). These are tracked — the workshop-ui-screenshots and workshop-explanatory-diagrams workflows will regenerate those files using the new Octicon-shape spec going forward.