Search everything...

Stats

Actions

Available In

Help us improve

Share bugs, ideas, or general feedback.

artificer-design-system | ClaudePluginHub

Plugin

artificer-design-system

Name: artificer-design-system
Author: cameronsjo

By cameronsjo

Cameron's personal design system — Artificer. AuDHD-optimized, dark-first, Jazz Age Deco palette. For tools, dashboards, agent UIs, terminals, settings panels.

npx claudepluginhub cameronsjo/attunements --plugin artificer-design-system

Popularity

Stars

Above avg

Med: 0·Avg: 268

Installs

Top 10%

Med: 0·Avg: 1

What's Inside

Slash Commands1

Palette Preview

/palette-preview

Render markdown constructs + trigger diff styling to preview the active Claude Code theme

Skills3

artificer-design-system

/artificer-design-system

Use when designing UI for Cameron's tools, dashboards, agent UIs, terminals, or settings panels (Artificer design system — AuDHD-friendly, dark-first). NOT for marketing sites, kid-facing UI, hero/landing pages, or e-commerce.

artificer-feedback

/artificer-feedback

Use when a project that consumed the Artificer design system made adaptation or pivot decisions this session and wants to report them back to the design system as a GitHub issue. Triggers on 'artificer feedback', 'report design decisions back', 'we adapted Artificer', 'feed this back to the design system', 'dogfood Artificer', 'file design feedback upstream'.

artificer-upgrade

/artificer-upgrade

Use when a project that consumes the Artificer design system needs to upgrade to a newer version — detect the installed version, diff the vendored copy against the target, and walk the breaking changes safely. Triggers on 'upgrade Artificer', 'bump Artificer', 'migrate Artificer', 'update the design system', 'we're on an old Artificer', 'Artificer keywords are illegible', 'theme stopped persisting after Artificer update'.

Themes8

Schema for Claude Code custom themes (~/.claude/themes/*.json). Requires Claude Code v2.1.118 or later. Token list reverse-engineered from the 2.1.126 binary; ~35 tokens are officially documented at https://code.claude.com/docs/en/terminal-config#color-token-reference and the rest are internal but reachable via overrides. Unknown tokens and invalid color values are silently ignored at runtime, so a typo cannot break rendering — but this schema flags them so you catch typos in your editor.

Artificer

manifest.json

Personal design system ported to Obsidian. Dark by default, burnished gold, JetBrains Mono, paper-cream light mode. Pairs with Style Settings.

Stats

Version0.18.0

ReleasedJun 10, 2026

LanguageHTML

Stars1

Copy clicks1

MaintenanceGood

LicenseApache-2.0

Last CommitJun 10, 2026

AddedJun 3, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge.

Available In

attunements

Help us improve

Share bugs, ideas, or general feedback.

README

Artificer · Design System Handoff

Cameron's personal design system, packaged for use in real codebases. v0.18.0 · 2026 — the re-true: the root is never overridden (html { font-size: 100% }), so every --t-*-size token now renders at its labeled px and the whole system scales with the browser font-size preference (#211, owner-ruled). Token-bound type grows ~14.3% — body copy lands at a true 14px (it had double-applied to 12.25px); the owner optical pass is #214. The px-literal chrome rebinds to exact-match tokens as identity swaps, the lint:tokens font-size watch arms, the .toast ghost leaves print.css, and app-shell lands on canonical .section-title. See CHANGELOG.md for what changed.

What this is

A complete, self-contained design system you can drop into any project. Five files do the heavy lifting:

File	What it gives you
`src/artificer.css`	All tokens (color, type, space, radius, motion, z) + every component class. Just add this stylesheet and you have the system.
`src/artificer-theme.js`	Persistent dark/cream theme toggle, reads `localStorage`, respects `prefers-color-scheme` on first load.
`src/artificer-focus.js`	`ArtificerFocus.trap(el, {onEscape})` — focus-trap helper for modals, dialogs, command palettes.
`src/artificer-icons.js`	Lucide-rooted icon set. Hydrates `<i data-icon="search">` placeholders into inline SVG.
`src/tokens.json`	Machine-readable token export. For Tailwind, Figma, Style Dictionary, anything non-CSS.

Plus src/print.css (paper-mode for PDF/print) and two SVG assets (favicon, OG card).

The optional Whimsy layer (src/artificer-whimsy.css + src/artificer-whimsy.js) is the one sanctioned exception to the no-looping-decoration / no-raw-color rules — a flowing burnished rainbow on text, for user-defined fun elements and whimsical operations only. Opt-in; load it after artificer.css. It also ships Whimsy.greeting() — a seasonal footer line (<span data-whimsy-greeting>) that lights up for Pride every June. Full doctrine in CLAUDE.md § Whimsy; interactive reference + playground at live-spec/whimsy.html.

The full live spec for every component lives at the project URL (the HTML pages — colors.html, typography.html, components.html, etc). This bundle ships the source; visit the live system for the visual reference.

What Artificer is for

Use it for — internal tools, dashboards, IDE-adjacent UI, terminals, dev/devops products, configuration UIs, productivity apps targeting power users.

Don't use it for — marketing sites, hero/landing pages, kid-facing UI, lifestyle/consumer-emotional brands. It's deliberately serious.

If you're not sure: Artificer treats the user as a peer with a job to do. If your audience is closer to "delight me" than "stop wasting my time," reach for a different system.

Install — three integration paths

Path A · Vanilla HTML / static site (zero build)

Copy the src/ folder into your project, then:

<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <link rel="stylesheet" href="/artificer/artificer.css" />
  <link rel="stylesheet" href="/artificer/print.css" media="print" />
  <link rel="icon" type="image/svg+xml" href="/artificer/favicon.svg" />
  <script src="/artificer/artificer-theme.js" defer></script>
  <script src="/artificer/artificer-icons.js" defer></script>
</head>
<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <button class="theme-toggle" data-theme-toggle aria-label="Toggle theme">
    <span class="dot"></span><span data-theme-label>Dark</span>
  </button>
  <main id="main" class="container container--md">…</main>
</body>
</html>

That's it. Use the utility classes (.btn, .card, .stack, .cluster, etc.).

Path B · Modern bundler (Vite / Webpack / Next / Nuxt)

# Drop src/ into your design system folder
cp -r src/ packages/artificer/

// In your app entry (e.g. src/main.ts, app/layout.tsx)
import 'artificer/artificer.css'      // tokens + .tabs .appbar .crumb .sidenav .split-pane …
import 'artificer/artificer-theme.js'
import 'artificer/artificer-focus.js' // only if using modals
import 'artificer/artificer-icons.js' // only if using <i data-icon>
import 'artificer/artificer-tabs.js'  // only if using .tabs (ships the APG keyboard model)
import 'artificer/artificer-options.js' // only if using .menu/.listbox/.palette (option navigation)
import 'artificer/artificer-tree.js'  // only if using .tree (ships the APG tree keyboard)

The CSS uses CSS custom properties (variables) and data-theme attribute — no preprocessing needed.

Nav primitives. .tabs, .appbar, .crumb, .sidenav, and .split-pane ship in artificer.css. The .tabs CSS is style-only — load artificer-tabs.js for the WAI-ARIA keyboard behavior (roving tabindex, arrows, Home/End). Full reference: live-spec/navigation.html.

View full README on GitHub

Help us improve

Find plugins for your project

Help us improve

artificer-design-system

Popularity

What's Inside

Help us improve

Health & Quality

Confidence

README

Artificer · Design System Handoff

What this is

What Artificer is for

Install — three integration paths

Path A · Vanilla HTML / static site (zero build)

Path B · Modern bundler (Vite / Webpack / Next / Nuxt)

Similar Plugins

ecc

claude-md-management

planning-with-files

octo

unity-dev-toolkit

More by cameronsjo

obaass

mouse-mcp

cadence-guardrails

obsidi-backup

cadence-voice

Artificer · Design System Handoff

What this is

What Artificer is for

Install — three integration paths

Path A · Vanilla HTML / static site (zero build)

Path B · Modern bundler (Vite / Webpack / Next / Nuxt)