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
