Enamel

Design a badge or a certificate from a preset, save versions, publish it, and hand it out with claim links that expire

---

Overview

Enamel is the studio half of Sash. You pick one of 60 finished designs, change the words, and you have something worth handing out in about half a minute. Then you publish it and mint a claim link with an expiry and a seat limit, and the people who follow that link hold the badge in their own wallet on sash.neorgon.com.

Everything it makes is a parody credential, and it says so on the artefact itself. The renderer draws a provenance strip into every badge and certificate, in the editor as well as on the export, carrying the origin, the issuing handle and the address a reader can check the credential at. There is no way to switch it off, which is the point.

Live: enamel.neorgon.com

---

Features

• A parametric editor, not a canvas -- fifteen silhouettes, twelve patterns, ring styles, metals, pips, arc text, a ribbon and a centre glyph or image, each one a field in a design document rather than a shape you drag.
• 60 finished presets and a searchable design library -- thirty-two badges, twenty-eight certificates and ten font pairings. Browse futuristic, elegant print, modern minimal and bold digital styles, or search themes such as hacking, chaos engineering and recovery. Presets retain their authored typography; changing the pairing is an explicit choice.
• A local vector library -- visual pickers for fifteen silhouettes and 58 symbols, including five original ornaments and six technology symbols alongside the existing Lucide set. These are shipped locally, with no icon service or runtime dependency.
• Reusable personal presets -- keep up to forty designs on this device without signing in. They survive reloads independently of the working draft. Switching a built-in design can preserve text in matching fields.
• Versions that are frozen once written -- publishing writes a version and every award pins the version it was issued from, so a later edit never changes a badge somebody already holds.
• Claim links with an expiry, a seat limit and an allow list -- minted by the deployment, and an issuer dashboard that answers who claimed which link.
• Two authoring warnings that are measured rather than guessed -- arc text leaving the silhouette (it vanishes on export against a light page) and a provenance strip too pale to read.
• Certificates at a fixed A4 aspect -- both orientations, with an embedded badge as the seal and a QR of the verify address. Long names and titles fit their margins; body copy wraps to two lines. Print / PDF opens the browser's A4 print dialog, where you can choose Save as PDF.
• A public catalogue -- every published Neorgon and community template, readable with no account, each one a link into the studio.
• PNG and SVG downloads of the draft -- through the exporter Sash uses, fonts inlined and the provenance strip drawn, so the file says it is a preview.

---

Running locally

ES modules require an HTTP server (not file://):

make serve            # http://localhost:8885
make test             # Preset, typography and local-library regression checks
make test-browser     # Live studio flows, using the monorepo's Playwright install

There is nothing else to start. Every page names the Convex deployment in a <meta name="neo-convex-url">, and that deployment belongs to projects/sash-site/convex/, so a read of a published template works from the first load.

Browser checks also support BROWSER=firefox or BROWSER=webkit, STUDIO_URL, ARTIFACT_DIR, and a PLAYWRIGHT_MODULE module path when run outside the monorepo. Screenshots, PNG/SVG downloads and a sample PDF are written to /tmp/enamel-studio-checks by default.

Sign-in is the Neorgon Auth Kit, and it does not work on localhost. The site carries the fleet's production Clerk key, and Clerk refuses a production key on any origin that is not neorgon.com. The kit settles signed out, so the editor, the presets, the warnings, the downloads, the public catalogue and every read of a published template work; anything that writes needs the deployed site.

---

Architecture

There is no convex/ folder here. Enamel points a ConvexHttpClient at the deployment projects/sash-site/convex/ owns and calls the same functions. The URL is a <meta name="neo-convex-url"> on every page, so the two sites cannot quietly disagree about it.

enamel-site/
├── index.html          # The studio: editor, preview, presets, downloads, publish
├── templates.html      # The library, the public catalogue, admin open by id
├── links.html          # Claim links and the issuer dashboard
├── 404.html
├── css/
│   ├── style.css       # Site styles. Tokens come from the CDN base.css
│   ├── frame.css       # Takes a framed page out of view
│   └── neorgon-*.css   # Header, footer, beacon, auth and insignia kits, vendored
├── js/
│   ├── app.js          # Entry point, one controller per page
│   ├── state.js        # The working design, one per kind, and the session
│   ├── fields.js       # The editor declared as paths into the design document
│   ├── editor.js       # Those fields as controls, and one delegated listener
│   ├── preview.js      # The kit draws; this appends what it returns
│   ├── warnings.js     # The arc and contrast measurements
│   ├── exporting.js    # The PNG and SVG download controls
│   ├── studio.js       # index.html
│   ├── library.js      # templates.html
│   ├── catalogue.js    # The public catalogue on templates.html
│   ├── links.js        # links.html
│   ├── art.js          # Shrink, upload, attach
│   ├── api.js          # The one place this site talks to Convex
│   ├── auth.js         # Listens to the Auth Kit for the session
│   ├── frame.js        # The notice a framed page shows instead
│   ├── render.js       # Shared DOM pieces
│   ├── events.js       # The modal shell
│   ├── utils.js        # Shared helpers
│   ├── convex.js       # Client and function map, shared with Sash
│   ├── insignia/       # The Insignia Kit, vendored. Never edited here
│   └── neorgon-*.js    # Header, footer, beacon, DOM and Auth kits, vendored
├── docs/
│   ├── architecture.svg
│   └── shape-catalogue-rules.md
├── favicon.ico         # Generated from the hub card, with the rest of the set
├── robots.txt
├── sitemap.xml
├── CNAME
├── Makefile
├── PRODUCT.md
└── README.md

---