Product identity
One family, one hue per product. Every product shares the furniture and differs in three things: its hue, its glyph and the motif in its banner.
MODULE_IDENTITY holds each product’s name, glyph, hue and motif. A shell puts data-module="<id>" on its root and --module follows, so the module tone of every IconTile, Card, Stat, ActionList and banner inside picks up the product’s colour with no prop. ModuleMark is the product’s own badge: the sidebar header of every app, and wherever one product points at another. It is not a decoration for a screen inside that product; there the module tone does the job.
Every product
The mark, the name and the motif glyphs its banner draws.
crminvoiceinventoryshippingpeoplemesanalyticsadminplanvisionMark sizes
Same tile, each product’s hue
One line of code, IconTile with the default module tone, inside each product’s data-module.
Options
Everything you can pass to Product identity.
| Prop | Type | Default | What it does |
|---|---|---|---|
| ModuleMark module | ModuleId | — | crm, invoice, inventory, shipping, people, mes, analytics, admin, plan or vision. |
| ModuleMark size | 'xs' | 'sm' | 'md' | 'sm' | sm is the sidebar header. |
| MODULE_IDENTITY[id] | { name, icon, hue, motif } | — | hue is var(--m-<id>), the same value --module takes inside that product. |
| greetingFor(hour) | (number) => string | — | Good morning / afternoon / evening for a banner. Pass the viewer’s local hour; never read the clock during render. |