Bring your own buttons.

The format

A JSON array of 1–50 objects, nothing else around it:

[
  {
    "name": "Neon pulse",
    "section": "neon",
    "html": "<button class=\"btn\">Join DEPO</button>",
    "css": ".btn { padding: 14px 28px; border: 2px solid #53f57e; border-radius: 999px; background: transparent; color: #53f57e; }\n.btn:hover { background: #53f57e; color: #18171a; }",
    "js": ""
  }
]

• name — short name, ≤ 60 characters. section — optional group: lower-case letters, digits, dashes.
• html — one piece only; no <html>, <body>, <style>, <script> tags, no on…= attributes. ≤ 20 KB.
• css — any class and keyframe names (every piece has its own frame); one Google Fonts @import allowed. ≤ 40 KB.
• js — optional; runs in the piece’s own sandbox and can only touch its own markup. No alert(), no network. ≤ 20 KB.
• Shown alone, centred in about 300 × 124 px, transparent, on the dark page (#18171a, color-scheme: dark).
• Imports are always new pieces with the next free number; nothing in the kit is changed. Only buttons the kit does not have yet are added — the same code with other class names, spacing or comments is a duplicate and is listed with the number already there. 50 per import, 300 per visitor and day.
• SVG icons and characters too, and from scripts: the API (action: "add", same uniqueness check).

Also from the command line on dev0: php demo/bin/demo30-kit.php import lab buttons.json (same checks).

API — add from a script

For scripts, bots and other models: POST https://album.dev0.dphub.net/demo30/api.php with JSON {"action": "add", "items": [ … ]} — up to 100 items per call, three types:

• button — {"type": "button", "name", "html", "css", "js", "page", "section"}: the format above; page is lab by default (or buttons, vault, flat, gen25, gen15, gen10).
• svg — {"type": "svg", "name", "svg", "section"}: a whole <svg> or only its shapes; it lands on the SVG page. Only shapes (path, circle, ellipse, rect, line, polyline, polygon, g) with geometry / paint attributes are kept — scripts, links, ids, styles and handlers are dropped.
• utf8 — {"type": "utf8", "ch": "★", "section"}: one character or one emoji sequence (no letters, digits or spaces); it lands on the UTF-8 page.
• type may be left out: an item with svg is an icon, with ch a character, otherwise a button.

Request:

curl -s -X POST https://album.dev0.dphub.net/demo30/api.php \
  -H 'Content-Type: application/json' \
  -d '{
  "action": "add",
  "items": [
    { "type": "button", "name": "Neon pulse", "page": "lab", "section": "neon",
      "html": "<button class=\"btn\">Join DEPO</button>",
      "css": ".btn { padding: 14px 28px; border: 2px solid #53f57e; border-radius: 999px; background: none; color: #53f57e; }" },
    { "type": "svg", "name": "ring", "svg": "<svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>" },
    { "type": "utf8", "ch": "★" },
    { "type": "utf8", "ch": "A" }
  ]
}'

Answer — one result per item, in the same order:

{
  "ok": true, "added": 2, "duplicates": 1, "errors": 1,
  "results": [
    { "status": "added",     "id": 5763, "num": 3075, "page": "lab" },
    { "status": "added",     "id": 5764, "num": 3076, "page": "svg" },
    { "status": "duplicate", "id": 841,  "num": 118,  "page": "utf8", "trashed": false },
    { "status": "error",     "error": "#3: ch: not a symbol" }
  ]
}

Only new pieces — what counts as “the same”

• Button: HTML + CSS + JS without comments, its own class and @keyframes names renumbered in order of appearance (.btn-12 and .btn-400 with the same rules are one button), quotes, spacing and the case of colours normalised.
• SVG: the cleaned shapes with attributes sorted, numbers rounded to 2 decimals, the order of shapes ignored, plus the viewBox — another width / height, ids, comments or spacing is the same icon.
• Character: its Unicode code points (NFC) without variation selectors — ❤ and ❤️ are one.
• A duplicate is not added: the answer names the piece already in the kit (num, page, and trashed: true if it is in the shared trash — a binned piece is not added again). An error says why an item was refused.
• The form above and {"action": "import"} follow the same rule; their answer lists the duplicates.
• Limits: 300 new pieces per visitor (cookie kit30) and day, 20 000 in the kit.

All actions — reading pages, votes, the trash, “Save as new” — are on the API page.

MCP server

For AI assistants the same kit is an open MCP server (no keys): https://album.dev0.dphub.net/demo30/mcp.php — add, list, edit (always a new piece), trash, restore, vote. Claude Code: claude mcp add --transport http depo-ui-kit https://album.dev0.dphub.net/demo30/mcp.php; the tools are described on the API page.