ProductMark

$ npx shadcn@latest add https://lacodda.github.io/dowel/r/product-mark.json

See it liveEvery mark of the line at the three levels, and the line's own λ.→

Notes

Every product of the line has one mark — a hexagonal tile with a two-letter code — in three levels that are a rule, not options:

Size	Level	What is drawn
64px and up	L	the tile, the code, and the product’s metaphor under it
28–63px	M	the tile and a larger code, no metaphor
27px and under	S	the tile filled with the product’s colour, a heavy code

<ProductMark product="kilna" size={18} />            {/* a title bar: S */}
<ProductMark product="kilna" size={96} label="kilna" /> {/* an About screen: L */}
<LineMark size={16} />                               {/* λ, the line itself */}

The size is the only input. A product that drew its own mark picked one level and used it everywhere, so the same mark was a smudge in a tab strip and a bare tile on an About screen. Here the level follows the size, and the boundaries are tested on both sides.

The masters are the line’s, not redrawn. They are drawn by the line’s mark generator and ship in the package: as markup in dowel-ui/marks, which this component draws from, and as files in dowel-ui/marks/<product>-<L|M|S>.svg for whatever cannot run React — a favicon step, a window icon. The release gate regenerates the module from the files and compares, and checks each small tile against the accent the theme uses.

The tile is dark in both themes, as the line draws it everywhere. A mark is the product’s signature, not part of the screen’s palette.

Two-colour marks get a gradient of their own. SVG ids are global to the document; the masters name the gradient of a pair, and two such marks on one screen would share the first one’s. The component gives each instance its own id.

A mark beside a name is decoration. It is hidden from a reader, who already has the name. With label it becomes an image with that name, for a mark that stands alone.

Props

Read from the types in ui/product-mark.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.

ProductMark

Prop	Type	Default
productrequired	atlas | austeris | dowel | efema | furca | hilvan | kasl | kasl-server | kilna | lacodda | lyrid | lyrn | midda | nitid | nooma | rhapsod | rigger | scheda | sefy | turnout		Which mark: a product of the line, or lacodda for the line itself.
size	number	24	Its width and height in CSS pixels, which also choose its level.
label	string		Its name, when nothing next to it says which product it is.
className	string

LineMark

The line's own mark - λ on a graphite tile - for the places that say a product belongs to the lacodda line.

Prop	Type	Default
size	number		Its width and height in CSS pixels, which also choose its level.
label	string		Its name, when nothing next to it says which product it is.
className	string

Accessibility

The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 15 rules applied and passed, and none failed. The accessibility report has every item.

Left to a person, where axe could not decide: color-contrast.

History

Each release that changed ui/product-mark.tsx - the file a product copies - newest first.

1. v0.31.0
   • feat the line's marks in the package, at the level their size calls for 192bb5f