@labmgm/patterns

The signature geometric pattern engine for the MGM Laboratory Design System — deterministic seeded composition with algorithmic adjacency colour-graph enforcement.

Install

pnpm add @labmgm/patterns react

Use

import { Pattern, Logo, Wordmark } from "@labmgm/patterns";

// Corner cluster, default 3×3 at 40 px per cell.
<Pattern variant="corner" seed={42} />

// Vertical auth-page banner.
<Pattern variant="edge-strip" grid="9x2" cellSize={40} seed={1} />

// The 8 px footer dado (brand spec §7.8) — strict colour cycle, no shapes.
<Pattern variant="dado-footer" />

// Tile-driven mode — use one of the curated SVGs in ./patterns as the cell.
<Pattern variant="corner" seed={42} base="p-1" />
<Pattern variant="corner" seed={42} pool={["p-1", "p-2", "p-10"]} />

// Wordmark + signature mark.
<Wordmark size={32} />
<Logo size={24} />
<Logo size={24} monochrome />

What the engine guarantees

• Deterministic by seed. (variant, grid, seed, cellSize, base | pool) → byte-identical SVG every time.
• Adjacency constraint enforced. No two 4-connected cells share a background colour. Implemented with greedy graph-colouring + backtracking over a 5-colour palette (brand-blue / yellow / red / green + white). Verified by a Vitest suite that runs 100 seeds × 5 grid shapes per build.
• Brand-spec colour rules. White-background cells get a coloured shape; coloured-background cells get a white shape (brand spec §5.2). The dado variant cycles strictly through blue → yellow → red → green and uses no shapes.
• Tile catalog. 80 curated SVG tiles live in ./patterns. The build script pnpm gen:tiles parses them into src/tiles-catalog.ts; the generator can render any cell from a named tile (base) or pick from a sub-pool (pool). Tile shapes are recoloured per cell so adjacency still holds.

Variants

| Variant | Default grid | Default cell | Where to use | | --------------- | ------------ | ------------ | -------------------------------------------------- | | corner | 3 × 3 | 40 px | Top-left / top-right corner of a hero (≤ 30% area) | | edge-strip | 9 × 2 | 40 px | Auth-page vertical banner (brand spec §10.2) | | divider-strip | 1 × 12 | 32 px | Section dividers between two major sections | | dado-footer | 1 × 32 | 8 px | Brand-spec §7.8 — 8 px alternating footer band | | full-scene | 5 × 6 | 80 px | 404 / empty-state asymmetric 5/7 illustration |

API

| Export | Description | | ----------------------- | ------------------------------------------------------------------------ | | <Pattern> | React component. Decorative by default (aria-hidden). | | <Logo> / <Wordmark> | The brand mark + wordmark (brand spec §5.5). monochrome for one-tone. | | generatePatternData() | Pure function — returns the structured cell list. Use for custom render. | | generatePatternSvg() | Pure function — returns a paste-ready standalone SVG string. | | colourGrid() | Standalone adjacency solver (returned colours; no shapes). | | SHAPES / PALETTE | The fixed shape vocabulary + 5-colour palette. | | TILES / TILE_BY_ID | Auto-generated catalog of the curated SVG tiles in ./patterns. |

License

MIT © MGM Laboratory.