Design a VibeFuse styling pack — theme.json, orb.json, and shell effects

What a pack controls

theme.json

Color tokens, terminal ANSI palette, shell particles, border / overlay effects, optional CSS

orb.json

Voice-dock orb colors (style) and motion (animation)

manifest.json

Identity, swatches for the catalog card, default accent

Applies to

Menubar, sidebar, canvas, session tabs, settings, widget chrome, voice dock

Users pick a pack in Settings → Appearance → Styling packs, next to the nine built-in themes. Choosing a built-in theme turns the pack off; choosing the pack turns it back on. Marketplace saves sync into the styling folder on next launch.

Prerequisites

• VibeFuse for Windows signed in with your VF- key.
• A text editor and a color tool you like. Hex and rgba() are all you need.
• A direction in one sentence (“deep navy, ember accents, warm orb”). Packs with a point of view sell; “default but blue” does not.
• To sell (optional): seller profile + Stripe Connect.

Package anatomy

All three files are required at publish time. The folder name becomes the local package slug (the marketplace prefixes it with style-).

Step 1 — manifest.json

{
  "id": "com.yourname.styling.midnight-ember",
  "name": "Midnight Ember",
  "version": "1.0.0",
  "description": "Deep navy workspace with ember-orange accents, drifting embers on the canvas, a soft glow border, and a warm frosted orb.",
  "author": "Your Name",
  "license": "MIT",
  "icon": "palette",
  "category": "styling",
  "kind": "marketplace",
  "entry": "theme.json",
  "tags": ["appearance", "orb", "dark", "warm"],
  "swatches": ["#070a12", "#111827", "#ff7a3d"],
  "defaultAccent": "#ff7a3d",
  "light": false
}

Step 2 — theme.json: tokens

Tokens are CSS custom properties applied to the shell root while the pack is active. Every built-in surface reads from these names, so a consistent set here restyles everything at once. The full example:

{
  "defaultAccent": "#ff7a3d",
  "light": false,
  "tokens": {
    "--bg-0": "#070a12",
    "--bg-1": "#0b1020",
    "--bg-2": "#111827",
    "--surface": "rgba(14, 20, 36, 0.72)",
    "--surface-strong": "rgba(9, 13, 24, 0.94)",
    "--panel": "rgba(14, 20, 36, 0.7)",
    "--panel-strong": "rgba(8, 11, 20, 0.9)",
    "--chrome-bg": "rgba(8, 11, 20, 0.88)",
    "--overlay-bg": "rgba(5, 7, 14, 0.68)",
    "--input-bg": "rgba(255, 122, 61, 0.05)",

    "--accent": "#ff7a3d",
    "--accent-2": "#ffa46b",
    "--accent-deep": "#b8451a",
    "--accent-rgb": "255, 122, 61",
    "--gold": "#f2b866",
    "--gold-rgb": "242, 184, 102",
    "--purple": "#6b7bd6",
    "--violet": "#8b7bd6",

    "--text": "#f4f1ec",
    "--text-dim": "#a8a49c",
    "--text-faint": "#6b6862",

    "--stroke": "rgba(255, 122, 61, 0.14)",
    "--stroke-strong": "rgba(255, 122, 61, 0.32)",
    "--glow": "rgba(255, 122, 61, 0.22)",
    "--shadow": "0 22px 60px rgba(0, 0, 0, 0.6)",

    "--ambient-a": "#2a1a12",
    "--ambient-b": "#070a12",
    "--ambient-opacity": "0.18",
    "--ambient-vignette": "rgba(0, 0, 0, 0.7)",

    "--ok": "#7fe2a2",
    "--warn": "#f2b866",
    "--danger": "#ff6b7a",
    "--danger-rgb": "255, 107, 122",

    "--orb-spin": "1.05",
    "--orb-breathe": "2.6",
    "--orb-ring-ms": "2.6s"
  },
  "terminal": {
    "background": "#0b1020",
    "foreground": "#f4f1ec",
    "cursor": "#ff7a3d",
    "cursorAccent": "#070a12",
    "selectionBackground": "rgba(255, 122, 61, 0.3)",
    "black": "#070a12",
    "red": "#ff6b7a",
    "green": "#7fe2a2",
    "yellow": "#f2b866",
    "blue": "#6b9bd6",
    "magenta": "#c58bd6",
    "cyan": "#7ad0d6",
    "white": "#f4f1ec"
  },
  "shell": {
    "particles": {
      "canvas": { "preset": "embers", "count": 26, "speed": 0.8, "size": 1.3, "opacity": 0.55, "direction": "up", "color": "#ff9a5c" },
      "sidebar": "none",
      "stage": "none"
    },
    "effects": {
      "border": "glow",
      "overlay": "film-grain"
    },
    "customCss": ".widget-window { box-shadow: 0 0 0 1px rgba(255,122,61,0.18), 0 18px 48px rgba(0,0,0,0.55); }"
  }
}

Token reference

Unknown tokens are passed through, so you may add your own (--my-pack-stripe) and reference them from shell.customCss. The marketplace preview reads --bg-*, --surface*, --accent*, --text*, --stroke*, --gold, and --panel to paint its stages.

Step 3 — Terminal palette

The terminal object themes every PTY widget (Terminal, Claude, Codex, Gemini, Cursor, Qwen). Keys follow the xterm.js theme convention.

"terminal": {
  "background": "#0b1020",
  "foreground": "#f4f1ec",
  "cursor": "#ff7a3d",
  "cursorAccent": "#070a12",
  "selectionBackground": "rgba(255, 122, 61, 0.3)",
  "black": "#070a12",   "red": "#ff6b7a",     "green": "#7fe2a2",  "yellow": "#f2b866",
  "blue": "#6b9bd6",    "magenta": "#c58bd6", "cyan": "#7ad0d6",   "white": "#f4f1ec"
}

• Match background to --bg-1 so terminals sit flush with the canvas.
• Keep the eight ANSI colors distinguishable — agents print a lot of green/yellow/red diffs.
• brightBlack … brightWhite are optional; omit them to derive from the base eight.

Step 4 — Shell effects & particles

The shell object adds motion and atmosphere. Everything here is optional — a pack can be tokens only.

"shell": {
  "particles": {
    "canvas":  { "preset": "embers", "count": 26, "speed": 0.8, "size": 1.3, "opacity": 0.55, "direction": "up", "color": "#ff9a5c" },
    "sidebar": "none",
    "stage":   "snow"
  },
  "effects": {
    "border":  "glow",
    "overlay": "film-grain"
  },
  "customCss": ".widget-window { box-shadow: 0 0 0 1px rgba(255,122,61,0.18), 0 18px 48px rgba(0,0,0,0.55); }",
  "customJs": ""
}

Particles

Three regions — canvas (behind widgets), sidebar (left rail), stage (full window). Each takes a preset name string or an object:

Effects

Custom CSS / JS

• customCss is injected while the pack is active. Target shell classes such as .widget-window; prefer adjusting shadows, radii, and borders over layout.
• customJs runs in the shell while active. Keep it tiny and idempotent (it may run more than once). Anything that reaches the network or the file system is grounds for removal.
• Both are listed on the marketplace page as “Custom shell CSS / JS” so buyers know they exist.

Reduce-motion users: VibeFuse's Reduce motion switch slows or stops particles and effects. Your pack should still look complete with them off — that is why tokens do the heavy lifting.

Step 5 — orb.json

The orb is the voice-dock indicator (idle, listening, speaking) and shows in the status bar. style paints it; animation moves it.

{
  "style": {
    "id": "ember-core",
    "label": "Ember Core",
    "preset": "frost",
    "coreTop": "#fff1e6",
    "coreMid": "#ff7a3d",
    "coreDeep": "#5a2410",
    "rim": "#ffa46b",
    "frost": "rgba(255, 200, 160, 0.5)",
    "glyph": "#1a0c06",
    "chrome": "#ffa46b"
  },
  "animation": {
    "id": "ember-drift",
    "label": "Ember Drift",
    "preset": "particles",
    "particleRgb": "255, 154, 92",
    "particleCount": 22,
    "particleSize": 1.4,
    "spin": 1.05,
    "breathe": 2.6,
    "ringMs": 2.6
  }
}

Rendered preview — Midnight Ember, from the JSON above

This block is generated from the three example files on this page by the same code that renders marketplace styling pages. Change a token, republish, and this is what buyers see.

zak@vibefuse:~$ vibe pack apply
ok theme tokens loaded
-> orb animation online

Compare with live packs: Jarvis-Pro (violet, frost orb, particles) · Dark Snow (monochrome, snow particles) · LSU Death Valley (two-color brand pack).

Design guidance

Step 6 — Test locally

1. 01
   Create the folder

   C:\vibefuse\styling\Midnight-Ember\ with manifest.json, theme.json, orb.json. The folder is listed in Settings → Marketplace → Local styling packs (use Reveal folder).

2. 02
   Apply it

   Open Settings → Appearance. The pack appears under Styling packs with your swatches. Click it — the shell recolors immediately.

3. 03
   Load a busy canvas

   Open a Terminal, a Claude or Codex widget, a Browser, and the Vibe Agent. Run a command with colored output. Open Settings and a modal. This is what buyers will stare at for hours.

4. 04
   Check the orb

   Hold to talk or trigger Jarvis — watch idle, listening, and speaking states. Adjust rim / frost if the glyph disappears.

5. 05
   Iterate

   Edit the JSON, then re-select the pack (or toggle to a built-in theme and back) to reload tokens. Fix contrast before you touch particles.

6. 06
   Test Reduce motion

   Toggle it in Appearance. Tokens alone should still read as a finished theme.

Step 7 — Publish from Settings → Marketplace

1. 01
   Confirm your license is linked

   The tab header shows your seller profile with an active VF- key. Otherwise copy one from Account → Product Keys.

2. 02
   Find the pack under Local styling packs

   Each folder in C:\vibefuse\styling shows as a card with Not on marketplace, Uploaded · unpublished, or Live on marketplace.

3. 03
   List on marketplace

   VibeFuse validates id + name, requires theme.json and orb.json, checks file types and sizes, then uploads. Your profile name is stamped as author and the package slug gets a style- prefix.

4. 04
   Publish

   Click Publish on the card (or Publish all). The listing goes live at /marketplace/styling/style-<slug> and appears under Styling on the marketplace.

Step 8 — The listing page

Your pack page is generated from the JSON, so most of the work is already done. It shows:

• Hero — name, description, version, saves, swatches, orb preview, and a widget window painted with your tokens
• Pack breakdown — token count, particle regions, effects, orb style / motion, custom CSS / JS flags
• Workspace preview — menubar, sidebar, canvas with your particles, two widgets, status bar with the mini orb
• Showcase stages — terminal palette, orb, particles, border effect, overlay, background ladder
• About + creator card — your description, avatar, follower count

Add a card image and banner in Account → Marketplace if you want a photo-real screenshot on the catalog card; otherwise the swatches carry it.

Step 9 — Ship an update

• Edit tokens, bump version in manifest.json, then Update listing on the card. Same id → same listing; saves carry over.
• Users pick up the new files on their next launch sync and see them the next time the pack is applied.
• Unpublish hides the page; installed copies keep working.

Pre-publish checklist

• manifest.json has a unique com.yourname.styling.* id, name, description, 3–5 swatches, defaultAccent
• theme.json defines the full bg / surface / panel ladder, accent set with --accent-rgb, text trio, strokes, status colors
• terminal.background matches --bg-1; ANSI colors distinguishable
• orb.json has both style and animation; glyph visible on the core
• Particles ≤ 30 count, opacity ≤ 0.6; at most one overlay
• Contrast checked on a busy canvas and with Reduce motion on
• customJs empty or reviewed line by line; no network, no storage
• All three files are valid JSON (no trailing commas, no comments)

Troubleshooting

FAQ

Next guides

Related: Settings → Appearance · Styling catalog · Styling pack creator overview