Skip to main content

​
Campaign Brief: Oompa Command Graph Visual Refresh

​
Overview

The command relationship graph on oompa.tools/commands has been redesigned with full visual consistency to the Choco factory aesthetic. Instead of bright, disconnected colors and circular nodes with truncated 2-letter labels, the graph now uses a cohesive chocolate/gold palette and displays full /command names on pill-shaped nodes. What changed:
  • 31 slash commands across 6 categories → visualized as chocolate/gold pill nodes
  • New color system: factory-gold (flows, containers, annotations) + factory-chocolate (tools, intelligence, pipeline)
  • Improved interactive feedback: unified gold hover glow instead of per-category neon
  • Better mobile experience: responsive layout with command relationships list fallback
Why it matters: Oompa is a verifiable, CRDT-native documentation platform. The commands are the user’s primary interface. Showing them in a unified design language signals professional, production-ready infrastructure.

​
Campaign Assets

​
1. Social Media Teaser (Twitter/LinkedIn)

Visual: Screenshot of the new graph with chocolate and gold colors, 31 nodes arranged in a force-directed layout Copy:
Explore all 31 Oompa slash commands in our redesigned command relationship graph. Full names, zero truncation, unified chocolate factory aesthetic. See how commands relate, what they do, and where they fit in your workflow.
CTA: “Dive in at oompa.tools/commands” Hashtags: #oompa #slashcommands #devtools #open-source

​
2. Dev Blog Post (500–800 words)

Title: “Why We Redesigned the Command Graph (And What We Learned About SVG + Design Systems)” Angle: Technical deep-dive on design system integration with SVG, lessons learned, and how teams can apply this pattern. Sections:
  1. The Problem: Previous graph used bright Tailwind colors (reds, purples, blues) that clashed with the chocolate factory brand. Circular nodes forced 2-letter command labels, causing collisions and confusion (“BA” for both badge and badnut).
  2. The Solution:
    • Swapped to chocolate/gold HSL palette
    • Replaced circles with fully-rounded pills (28px height, dynamic width)
    • Display full /command names in monospace
    • Unified gold hover glow across all categories
  3. What We Learned: SVG doesn’t consume Tailwind utilities. Teams need to extract raw HSL values. Documented this as a reusable doctrine for future data viz work.
  4. Try It Out: Link to live graph + “related commands” feature description.
Author: Engineering team Publish date: 2026-04-21

​
3. Product Update Email (Substack / Newsletter)

Subject: “31 Commands, One Unified Design: Oompa’s Command Graph Gets a Refresh” Preview: “We redesigned oompa.tools/commands to match the factory aesthetic. See how all 31 commands connect.” Body (3 short paragraphs):
We just redesigned the command relationship graph on oompa.tools/commands. It now displays all 31 Oompa slash commands using the full chocolate factory color palette — no more clashing neons. What’s new:
  • Full /command names displayed (no truncation)
  • Pill-shaped nodes with dynamic sizing
  • Unified gold hover effects for better interactive feedback
  • Responsive design that works great on mobile
This is part of a larger effort to make sure every surface of Oompa feels intentional, cohesive, and production-ready. We also documented how to integrate design systems with SVG — a common gotcha we’ll be sharing in our dev blog next week. Try it: oompa.tools/commands
CTA: “See the redesigned graph” (link)

​
4. Loom Demo Video (2 minutes)

Narration:
“We just redesigned the Oompa command graph with a fresh look. Here’s what changed. [Show before/after side-by-side] The old graph used scattered bright colors that didn’t match our brand. Commands were truncated to two-letter labels, which got confusing fast. [Scroll through new graph] The new graph uses our chocolate factory design language — warm browns, golds, and clean lines. All 31 commands are now displayed in full. Hover over any command to see what it connects to. [Show hover interaction] When you hover, the connected commands light up in gold. Much easier to understand relationships at a glance. [Show mobile view] Works great on mobile too, with an expanded list of command relationships. This design consistency helps us communicate that Oompa is a production-ready, intentional platform. Check it out at oompa.tools/commands.”
Duration: 2 min Format: MP4 (1280×720 min, 60fps preferred) Platform: Twitter, LinkedIn, Slack

​
Audience

  • Primary: Early adopters using Oompa (developers, doc engineers, knowledge workers)
  • Secondary: Design/dev tool enthusiasts (on HN, Product Hunt, Twitter)
  • Tertiary: Brand-conscious startups (design systems + cargo-cult followage)

​
Distribution Plan

ChannelAssetTimingOwner
TwitterScreenshot + teaser copy2026-04-21 9am PTSocial
LinkedInSame as Twitter, longer copy2026-04-21 10am PTSocial
Dev blogLong-form post with technical depth2026-04-21 12pm PTContent
Newsletter (Substack)3-paragraph update + CTA2026-04-21 5pm PTContent
Loom video2-min demoPublish to YouTube, share on socialsVideo
Product HuntFull launch post (if applicable)2026-04-22 (pending PH rules)Growth
Slack (community)Pinned message with link2026-04-21Community

​
Success Metrics

  • Page views to oompa.tools/commands: Baseline this week, target 2x by end of month
  • Social engagement: Target 50+ likes/retweets across platforms
  • Newsletter CTR: Benchmark against previous updates, target 15%+
  • Developer feedback: Monitor Slack, Twitter mentions for “design consistency” positive sentiment

​
Key Messages

  1. Brand Consistency: Every surface of Oompa speaks the same visual language (chocolate + gold).
  2. Intentional Design: The 31 slash commands aren’t just utilities; they’re a curated, well-organized toolkit.
  3. Technical Rigor: Behind this visual polish is solid engineering (d3-force, SVG integration, accessibility).
  4. Developer Experience: Full command names, instant hover feedback, responsive design — everything is built for how developers actually work.

​
Notes

  • The command graph is a permanent fixture on oompa.tools/commands (not a temporary campaign). This messaging should position it as a core feature upgrade, not a time-limited promotion.
  • Link to the developer-facing doctrines (SVG + design systems) in the blog post, but keep marketing copy focused on end-user benefits, not implementation details.
  • Monitor Hacker News and Product Hunt comments for technical questions about the SVG implementation — have the dev blog and doctrines ready to share.
  • Doctrine (for developers): SVG-FORCE-GRAPH-CHOCOLATE-THEMING.doctrine.md
  • Technical finding: D3-FORCE-SVG-MUTATION-GUARD.doctrine.md
  • Learning (for the team): Four-stream-verification-catches-five-svg-bugs.md