1

branding/visual-spec

Leo Miranda edited this page 2026-01-28 20:10:59 +00:00

Table of Contents

• Visual Branding Specification
• Design Principles
• Box Drawing Characters
• Double-Line (Projman Only)
• Single-Line (All Other Plugins)
• Width Specification
• Progress Bar Characters
• Header Refresh Triggers
• Projman
• Other Plugins
• Trigger Source Labels
• Nested Call Indentation
• Phase Transition Indicator
• Related Pages

Visual Branding Specification

Central specification for plugin visual output in leo-claude-mktplace.

Version: 1.0.0 Created: 2026-01-28

---

Design Principles

1. Immediate Recognition - Users should instantly know which plugin is running
2. Phase Awareness - For projman, users should see which sprint phase they're in
3. Progress Visibility - Sprint execution shows real-time progress
4. Hierarchy Clarity - Nested plugin calls are visually distinct from primary calls
5. Professional Appearance - Consistent, clean visual output

---

Box Drawing Characters

Double-Line (Projman Only)

╔══════════════════════════════════════════════════════════════════╗
║  Content here                                                     ║
╚══════════════════════════════════════════════════════════════════╝

Characters:

• Top-left: ╔ (U+2554)
• Top-right: ╗ (U+2557)
• Bottom-left: ╚ (U+255A)
• Bottom-right: ╝ (U+255D)
• Horizontal: ═ (U+2550)
• Vertical: ║ (U+2551)

Single-Line (All Other Plugins)

┌──────────────────────────────────────────────────────────────────┐
│  Content here                                                     │
└──────────────────────────────────────────────────────────────────┘

Characters:

• Top-left: ┌ (U+250C)
• Top-right: ┐ (U+2510)
• Bottom-left: └ (U+2514)
• Bottom-right: ┘ (U+2518)
• Horizontal: ─ (U+2500)
• Vertical: │ (U+2502)

---

Width Specification

Element	Width
Outer box	70 characters
Inner content	66 characters (after ║ and ║)
Indented nested box	66 characters outer (2-space indent)
Progress bar	30 characters

---

Progress Bar Characters

• Filled: █ (U+2588 - Full Block)
• Empty: ░ (U+2591 - Light Shade)

Calculation:

filled_chars = round(percentage * 30 / 100)
empty_chars = 30 - filled_chars
bar = '█' * filled_chars + '░' * empty_chars

---

Header Refresh Triggers

Headers should refresh (be re-displayed) when:

Projman

• At start of command execution
• Phase transitions (planning → execution → closing)
• Batch completion during parallel execution
• Before generating execution prompts
• In final summary output

Other Plugins

• At start of command execution
• After significant operations (scan complete, analysis done)
• In final summary output

---

Trigger Source Labels

When a plugin is invoked by something other than direct user command:

Source	Display Format
User direct	(no parenthetical - clean header)
Hook	(triggered by: hook)
Another plugin	(triggered by: projman)
CLAUDE.md instruction	(triggered by: claude.md)
Agent delegation	(triggered by: orchestrator)

Example:

  ┌────────────────────────────────────────────────────────────────┐
  │  🔒 CODE-SENTINEL · Security Scan (triggered by: hook)          │
  └────────────────────────────────────────────────────────────────┘

---

Nested Call Indentation

When one plugin calls another, the secondary plugin's header is:

• Indented by 2 spaces
• Uses single-line box (even if called by projman)
• Includes trigger source

╔══════════════════════════════════════════════════════════════════╗
║  📋 PROJMAN                                                       ║
║  ⚡ SPRINT EXECUTION                                              ║
║  Sprint 6: Visual Branding                                        ║
╚══════════════════════════════════════════════════════════════════╝

  ┌────────────────────────────────────────────────────────────────┐
  │  🔒 CODE-SENTINEL · Security Scan (triggered by: projman)       │
  └────────────────────────────────────────────────────────────────┘
  
  [security scan output here]
  
  ┌────────────────────────────────────────────────────────────────┐
  │  ✓ CODE-SENTINEL · Complete                                     │
  └────────────────────────────────────────────────────────────────┘

---

Phase Transition Indicator

When projman transitions between phases:

═══════════════════════════════════════════════════════════════════
  🎯 PLANNING ──────▶ ⚡ EXECUTION
═══════════════════════════════════════════════════════════════════

---

Related Pages

• branding/plugin-registry - Plugin icons and display names
• branding/header-templates - Copy-paste header templates
• branding/progress-templates - Sprint progress block templates