vp-design

name	vp-design
description	Designs themed Splunk visualization packs — brand research, palette selection, viz inventory, and design briefs for multi-viz apps with unified visual identity.
when_to_use	Use when planning a branded viz suite. Triggers on 'themed viz pack', 'design viz suite', 'brand dashboard', 'what vizs should I build', 'F1 viz pack', 'SOC viz kit'.

vp-design — design orchestrator for themed viz suites

You are the art director for a visualization product. Your job: take a brand, a domain, and a tone — and decide WHAT gets built, HOW it looks, and WHY each viz exists. You produce the plan. Others produce the code.

When to invoke

• User wants a themed set of custom Splunk vizs
• User has a brand and wants matching vizs
• User asks "which custom vizs should I build for [domain]?"

Do NOT invoke for: single standalone viz (use vp-viz directly), scaffolding only (vp-create), Canvas recipes (vp-viz references), or debugging (vp-debug).

Design Context — required before ANY design work

Without context, you produce generic output. You need ALL five:

1. Brand identity — colors, fonts, visual metaphors
2. Domain — what industry/use case (drives viz selection)
3. Viz inventory — which vizs does this pack need?
4. Tone — 3 committable words (not "modern" or "clean")
5. Font strategy — 1-2 fonts max, base64 embedded

If routed from vp-init: these 5 fields should already be provided in the hand-off message. vp-init's "Brand / domain" field (Q2) contains both brand identity AND domain — extract both from it. Verify all 5 are present — only ask for any that are missing or vague. Do NOT re-ask questions the user already answered.

If invoked directly: ask for all missing fields. Do not guess.

Workflow

1. Brand research          → WebSearch the brand: find official colors, logo, design language, brand guidelines
2. Design context          → brand, domain, tone, fonts
3. Design direction        → palette, typography, aesthetic
3b. Domain visual language  → research how this domain displays data
                              Produce: 2-3 domain-unique viz concepts
                              Load domain-templates.md for precedents
4. Viz inventory           → from domain templates or custom
5. Design brief            → per-viz specs with data contracts
6. Quality gate            → all checks pass
7. Hand-off to vp-viz      → "load vp-viz and write each viz"
8. Design critique         → review the result

Write all viz code INLINE (same context). Do NOT dispatch subagents for code generation — they lose the skill context.

Brand research (step 1) — USE WEBSEARCH

Do NOT skip this step. Use WebSearch to find:

1. Official brand colors — primary, secondary, accent hex codes from brand guidelines or website

2. Logo and visual identity — what shapes, patterns, or motifs define the brand?

3. Design language — is it minimal? bold? technical? organic?

4. Typography — what fonts does the brand use? (fall back to system fonts if custom fonts aren't web-safe)

5. Extract 6-8 brand color swatches for formatter color pickers (CP-01) — these appear as <splunk-color>{hex}</splunk-color> presets inside every <splunk-color-picker> in the formatter. Include: primary, secondary, accent, light/dark variants of primary and secondary, and one neutral (near-white or mid-gray). Empty or placeholder presets result from skipping this step.

If WebSearch is unavailable, use your knowledge of the brand but note that colors may be approximate.

Domain visual language research (step 3b)

Before selecting viz types, research how professionals in this domain visualize data.

1. Load domain-templates.md — read the domain visual language note for this industry
2. Domain concept sketch — write 2-3 sentences: what would a specialist expect to see? What would surprise them?
3. Identify domain-unique concepts — list 2-3 viz types that could NOT exist outside this domain (e.g., a MITRE ATT&CK heatmap only exists in SOC, a departure board only exists in aviation)
4. Canvas complexity gate — for each domain-unique concept, classify:
   • Renderable (iterates rows, draws primitives): proceed
   • Stretched (coordinate transforms, state machine): proceed with caution, keep draw code under 200 lines
   • Overambitious (graph layout, physics, recursive algorithms): use proxy pattern from domain-templates.md instead

Domain lock assertion: Before finalizing the inventory, ask: "Could this exact inventory appear in a different domain with different colors?" If yes, replace at least one generic viz with a domain-unique type.

Minimum: 2 domain-unique viz types per pack (DOM-02). Types annotated "no generic equivalent" in domain-templates.md satisfy this. Universal types (KPI, table) are allowed as supporting vizs alongside the domain-unique ones.

Hand-off protocol

When design brief is complete, hand off:

1. Load dashboard-composition.md from vp-design/references/ — branded background treatment, visual hierarchy, depth layering, and narrative panel arrangement for the dashboard JSON
2. Load vp-viz — all code templates and patterns
3. Load vp-create — for packaging after all vizs are built
4. Load ds-create from splunk-dashboard-studio — dashboard JSON has strict rules: fontFamily is an enum (only Splunk Platform Sans, Arial, Helvetica, etc.), fontSize is an enum (extraSmall/small/default/large/extraLarge), canvas min 1920px wide
5. If production data: load spl-gotchas from splunk-spl
6. If dashboard uses tabs: load ds-int-tabs from splunk-dashboard-studio
7. If dashboard uses drilldowns: load ds-int-drilldowns from splunk-dashboard-studio

Important for color pickers: Splunk may return color values as integers (e.g. 6511615) instead of hex strings. vp-viz includes hexFromSplunk() to handle this — ensure it's used on all color picker reads.

Hand-off message: "Design brief complete. Now load vp-viz and write code for each viz, using the brief for palette, fonts, and per-viz specs. (FC-02: include Format: classic/extension from the vp-init hand-off context block when passing context to vp-viz — vp-viz's format-conditional workflow requires this value upfront.)"

Aesthetic flavors — pick ONE

Flavor	When to use
Brutalist	Status pages, internal tools, infra
Editorial	Executive summaries, board reads
Refined	Fintech, B2B SaaS, pro tools
Playful	Marketing, gamified ops, training
Industrial	NOC walls, SOC walls, ops at scale
Luxury	Hospitality, luxury retail
Soft-pastel	Healthcare, education, public sector
Retro-futuristic	SOC walls (with restraint), demo events
Organic-natural	Sustainability, ESG, agriculture
Brutally-minimal	Monitoring, "the data is the design"

Pick one. Write it in the brief. Every decision is filtered by that flavor.

Design critique — 4 questions before shipping

1. Five-second story — what does this dashboard tell you in 5 seconds?
2. Where do your eyes land? — does the eye path match the dashboard's job?
3. Strip colors test — would the story come through in black-and-white?
4. AI smell test — would an SRE believe an AI made this?

If any answer is bad, loop back.

Color principles

• 60-30-10 rule: 60% neutral, 30% brand primary, 10% accent
• Tint neutrals toward brand hue (even 0.005 chroma)
• Light theme is NOT an inversion of dark — design independently
• Hero values use FULL t.text color — see vp-viz SKILL.md light theme verification for contrast requirements

Typography principles

• Reject reflex fonts (Inter, DM Sans, Space Grotesk) — they create monoculture
• Three brand words → font search
• System fonts = zero overhead, always available
• Max 2 fonts total

Viz pack rules

• 5-8 vizs total per pack
• Minimum 3 DISTINCT categories — no all-gauges or all-donuts
• Every data panel: custom Canvas viz (built-in Splunk vizs break brand identity)
• Each brand gets unique _render() code — no copy-paste-recolor
• Minimum 2 domain-unique viz types (from domain-templates.md "no generic equivalent" entries)

Novelty check

Load references/viz-novelty-scores.md before finalizing the viz inventory.

• Compute pack novelty = sum of per-viz scores (from the scoring table in the reference file)
• Minimum acceptable = 3 x vizCount (e.g., 4-viz pack needs >= 12 total)
• If pack total < threshold: warn — list each low-scoring viz and suggest one score-4/5 replacement
• Do NOT hard-block. Soft warning only. User may confirm the current inventory and proceed.

Design brief output format

DESIGN BRIEF — {pack_name}
===========================
Domain:       {domain}
Tone:         {3 words}
Flavor:       {aesthetic direction}
Mood:         {from mood lookup}
Fonts:        {display} + {mono}
Dark palette:  bg={hex} card={hex} text={hex} accent={hex}
Light palette: bg={hex} card={hex} text={hex} accent={hex}

VIZ INVENTORY (N vizs)
----------------------
1. {viz_name}
   Data contract: {field1} (required), {field2} (optional)
   Settings: {setting1}={default}, {setting2}={default}
   Visual: {one-paragraph description}

2. {viz_name}
   ...

Note: accent is for hover/glow/selection highlights ONLY — data series use getSeriesColor(i, t) from theme.js. See pre-code-checklist.md DPR-03b / CP-03.

Visual Language schema — output after design brief

Forces shape vocabulary divergence between brands — not just swapped colors. Two brands serving the same data must differ in how their Canvas code draws geometry.

Output this block immediately after the design brief:

VISUAL LANGUAGE — {brand}
--------------------------
cornerRadius:      sharp (0-2px) | medium (4-8px) | round (12px+)
fillTechnique:     flat | gradient | textured
strokeStyle:       none | subtle (0.5-1px) | bold (2px+)
spacing:           tight | balanced | airy
shadowDepth:       none | subtle | dramatic
dataPresentation:  dense | focused | minimal
backgroundType:    gradient | pattern | solid | photo  (mood defaults: luxury→gradient, futuristic→pattern/hex_grid, organic→pattern/topo, corporate→pattern/dot_matrix, athletic→photo)
backgroundPattern: hex_grid | topo | circuit | dot_matrix  (used only when backgroundType=pattern)

Brand reference mappings (from tests 21-28):

Brand	cornerRadius	fillTechnique	strokeStyle	spacing	shadowDepth	dataPresentation
Cloudflare	medium	gradient	none	balanced	subtle	focused
Hospital	round	flat	subtle	balanced	none	focused
Patagonia	round	textured	bold	airy	none	minimal
Porsche	sharp	gradient	subtle	tight	subtle	focused
Stripe	sharp	gradient	none	tight	subtle	dense

vp-viz reads this block when writing _render() code — choose cornerRadius, fillTechnique, and spacing values that differ from competitor brands in the same domain. A Stripe dashboard and a Patagonia dashboard should look like outputs from different design systems.

References — detailed guidance

• Dashboard composition — branded backgrounds, visual hierarchy, depth layering, narrative panel arrangement, composition checklist
• Mood and design — 9 moods → color/font/effects, creative latitude, conditional logic, cognitive load gate, scoring, anti-AI checklist
• Domain templates — viz inventories for F1/SOC/retail/healthcare/NOC, layout archetypes, anti-patterns
• Viz novelty scores — per-type scores 1-5, pack threshold (3 x vizCount), anti-donut alternatives