...

--- name: Artificer description: Cameron's personal design system. AuDHD-optimized, Ghostty-rooted, dark-first with a paper-stock light mode and a Jazz Age Deco palette (burnished gold + royal purple). Use for tools, dashboards, agent UIs, terminals, settings panels — anything that must stay calm until something demands action. Do NOT use for marketing sites, kid-facing UI, or anywhere the goal is delight-via-stimulation. --- # Artificer · v0.24.2 A neurodivergent-first design system for Cameron. Every token and rule here exists to reduce cognitive load for an AuDHD brain that **scans instead of reads** and holds **3–4 items** in working memory. --- ## When to use this Use Artificer for: - Internal tools, dashboards, admin panels - Agent UIs, terminal-adjacent surfaces, dev tools - Personal sites where "calm focus" is the brand - Settings, configuration, log/history surfaces Don't use Artificer for: - Marketing/landing pages (it's intentionally not playful) - Anything kid-facing or entertainment-focused - E-commerce purchase flows (gold-as-interactive collides with sale-color conventions) - Surfaces where bright energy is the point --- ## File map | File | Purpose | |---|---| | `artificer.css` | All tokens + utility classes. The only stylesheet you need. | | `artificer-theme.js` | Persistent theme control — dark / light / auto (auto follows the OS live); hydrates the empty canonical `.theme-toggle` button. | | `assets/cameron-logo.jpg` | Personal mark — only used on Cameron-branded surfaces. | | `README.html` | System overview, principles, do/don't. | | `colors.html` · `typography.html` · `spacing.html` | Foundations specs. | | `components.html` · `patterns.html` · `notifications.html` | Live component specs. | | `layout.html` | Layout primitives: `.stack`, `.cluster`, `.grid-auto`, `.container`, `.page-shell`. | | `motion.html` | Duration/easing tokens, the five motion patterns, reduced-motion rules. | | `overlay.html` | Modal, popover, tooltip, scrim. Six-rung z-index scale. Pairs with `artificer-focus.js`. | | `forms-extended.html` | Field anatomy, validation, fieldsets, helper/error text. The twelve non-negotiable rules. | | `data-display.html` | Tables, key-value lists, stat cards, progress. Tabular-nums everywhere. | | `states.html` | Empty, loading, error — by duration. Skeleton sizing rules. | | `a11y.html` | WCAG 2.2 audit, contrast ratios, focus rings, the 12-point shipping checklist. | | `artificer-icons.js` | Lucide-rooted icon set, Lucide-canonical names (legacy names alias; unknown names render a dashed placeholder). Auto-hydrates `` placeholders. | | `artificer-focus.js` | `ArtificerFocus.trap(el, {onEscape})` — focus-trap helper for modals/dialogs. | | `icons.html` | Icon catalog + usage rules (16px viewBox, 1.5 stroke, inherit color). | | `voice-and-tone.html` | Microcopy spec — empty states, errors, success, loading. 7-point checklist. | | `tokens.json` | Machine-readable token export (for Tailwind, Figma, non-CSS consumers). | | `print.css` | Print stylesheet. Forces ivory/navy paper mode, strips chrome. Load `media="print"`. | | `assets/favicon.svg` · `assets/og-image.svg` | Favicon (32px) and Open Graph card (1200×630). SVG, themeable. | --- ## The boilerplate (copy this) ```html ...

``` If you have **no file system** (chat-only artifact), inline the contents of `artificer.css` into a `