Style Sets
Style sets are SVG templates with per-canvas rendering - the visual design layer for smart products.
A style set is a visual template that defines how a smart product's instances are rendered as SVGs. Each smart product is linked to exactly one style set at creation. A style set belongs to one domain - PAGE, EVENT, PREDICTION or GAME.
Canvas IDs
A canvas id names a slot and declares an orientation. It never declares a size - the SVG declares its own, and Style.width / Style.height carry it once ingested. The protocol owns the slot list and authors pick from it - the vocabulary is closed on purpose.
| Canvas ID | Orientation |
|---|---|
letter-l | landscape |
letter-p | portrait |
5x7-l | landscape |
5x7-p | portrait |
postcard-l | landscape |
postcard-p | portrait |
tabloid-l | landscape |
Two consequences worth knowing when you consume this:
SlotSpecCanvasis{ canvasId, orientation }.templates.getSlotSpecs()is a create-time surface: no artifact exists when an author picks a slot, so nothing at that moment can state a shape without inventing one.- A real size comes from the
Stylerow.rtClient.styleSets.getAuthoredCanvases(styleSetId)returns every authored canvas withwidth,heightandaspectread off the file.
square is no longer registered - no template was ever authored on one.
Data bindings
A text element in a template's SVG names the value it renders with a data-slot attribute, and the renderer fills it at render time. The slots a PAGE template reads come from the product and its content:
title,subtitle,author- the product's title, subtitle and author nametimestamp- the render dateeditionNumber- the instance serial number; empty on the original, which is not an editionline1,line2, ... - the lines of a haiku, tanka or sonnetcontent- the body of a basic page or open letter, set in a region whose type size and leading are solved togetherrecipient- an open letter's salutation, in full
An edition render also carries what a reader left behind: stampSignerName, stampSentiment, stampNote and stampNote2. Other slots (qrCodeSvg, stickerLayer, bracketGrid, boardGrid) are filled by dedicated passes rather than as text.
Royalty percentage
Each style set has royaltyPercentage (default 20%). This drives the auto-derived TEMPLATE_ARTIST contribution. A per-type binding (StyleSetProductType.royaltyPercentage) can override it for a specific product type.
API endpoints
{id} is the style set id. Page renders live under /api/styles/pages/*:
| Method | Path | Description |
|---|---|---|
GET | /api/styles/pages | List style sets (filter by product type) |
GET | /api/styles/pages/{id} | Get one |
GET | /api/styles/{id}/canvases | The authored canvases, with real width / height |
GET | /api/styles/pages/preview/{id}?format=&productType= | Sample preview with placeholder content |
POST | /api/styles/pages/preview/{id} | Live preview from content you supply |
POST | /api/styles/pages/generate/{id} | Final-quality SVG for a smart product |
Tickets render through the parallel /api/styles/tickets/* and /api/styles/ticket-sets/* trees. There is no /api/style-sets/{id}/render endpoint.
The rendered SVG is deterministic for a given style and content, so it is safe to cache.
Live updates
Style set SVG content can be updated without redeploying the contract. Changes apply immediately to all future renders.
Sample style sets
Three different StyleSets applied to the same haiku product type. Same data flow, different visual layer - the on-chain contract is identical:
A tanka rendered through the same set (portrait orientation):
