@genart-dev/plugin-identity

Identity design plugin for genart.dev — lockups, color variants, WCAG contrast validation, construction grids, scalability testing, and quality scoring. Includes MCP tools for AI-agent control.

Part of genart.dev — a generative art platform with an MCP server, desktop app, and IDE extensions.

Install

npm install @genart-dev/plugin-identity

Usage

import identityPlugin from "@genart-dev/plugin-identity";
import { createDefaultRegistry } from "@genart-dev/core";

// Register the plugin with a renderer registry
const registry = createDefaultRegistry();
registry.registerPlugin(identityPlugin);

// Or access individual exports
import {
  lockupLayerType,
  identityMcpTools,
  checkContrast,
  scoreIdentity,
} from "@genart-dev/plugin-identity";

Layer Types

Lockup (identity:lockup)

Composes a mark (SVG icon) and wordmark (text) into an identity lockup with four layout variants.

Property	Type	Default	Description
variant	select	"horizontal"	"horizontal", "stacked", "icon-only", "wordmark-only"
markSvg	string	""	SVG content for the mark/icon
wordmark	string	""	Wordmark text
wordmarkFont	string	"Inter"	Font family for wordmark
wordmarkWeight	select	"700"	Font weight (100–900)
markSize	number	0.4	Mark proportion (0.1–1.0)
gap	number	0.15	Gap between mark and wordmark (0–0.5)
clearSpaceUnit	number	0.4	Clear space proportion (0.1–1.0)
showClearSpace	boolean	false	Show clear space overlay
primaryColor	color	"#1a1a1a"	Primary brand color
secondaryColor	color	"#666666"	Secondary brand color
accentColor	color	"#cc2222"	Accent brand color
backgroundColor	color	"#ffffff"	Background color
colorMode	select	"full"	"full", "reversed", "grayscale", "mono"

Color Swatch (identity:swatch)

Displays a palette of colors with optional labels and hex values.

Property	Type	Default	Description
colors	string	"#1a1a1a,#666666,#cc2222,#ffffff"	Comma-separated hex colors
labels	string	"Primary,Secondary,Accent,Background"	Comma-separated labels
showValues	boolean	true	Show hex value labels
showLabels	boolean	true	Show color name labels
layout	select	"horizontal"	"horizontal", "vertical", "grid"
swatchSize	number	80	Swatch size in pixels (20–200)
gap	number	8	Gap between swatches (0–40)
labelColor	color	"#1a1a1a"	Label text color
labelSize	number	12	Label font size (8–24)

Scale Test (identity:scale-test)

Renders an SVG at multiple sizes with readability analysis and optional pixel grid.

Property	Type	Default	Description
sourceSvg	string	""	SVG content to test
sizes	string	"16,32,64,128,256"	Comma-separated pixel sizes
showSizeLabels	boolean	true	Show size labels below each
gap	number	24	Gap between sizes (0–80)
backgroundColor	color	"#ffffff"	Background color
showGrid	boolean	true	Show pixel grid for sizes ≤ 32px

Construction Grid (identity:grid)

Overlays a construction grid for mark design alignment.

Property	Type	Default	Description
gridType	select	"golden-ratio"	"golden-ratio", "rule-of-thirds", "diagonal", "circular", "modular"
subdivisions	number	3	Subdivision count (1–12)
showSpiral	boolean	false	Show Fibonacci spiral (golden-ratio only)
circleCount	number	5	Circle count (circular grid only, 1–12)
moduleSize	number	40	Module size (modular grid only, 10–200)
gridColor	color	"rgba(0,150,255,0.3)"	Grid line color
lineWidth	number	0.5	Grid line width (0.25–3)

MCP Tools (10)

Exposed to AI agents through the MCP server when this plugin is registered:

Tool	Description
create_lockup	Create an identity lockup layer with mark SVG and wordmark
set_lockup_variant	Switch lockup between horizontal, stacked, icon-only, or wordmark-only
generate_color_variants	Generate full, reversed, grayscale, and mono variant layers
create_swatch	Create a color swatch layer from a palette
test_at_sizes	Create a scale test layer with readability analysis
create_grid	Add a construction grid overlay (golden ratio, thirds, diagonal, circular, modular)
check_contrast	Check WCAG contrast ratio between two colors
check_palette_contrast	Check all pairwise contrasts in a palette
suggest_accessible_color	Suggest a foreground color meeting WCAG AA/AAA
score_identity	Run quality scoring across 9 identity checks (max 90 points)

API Reference

Contrast & Color

import {
  checkContrast,
  checkPaletteContrast,
  contrastRatio,
  relativeLuminance,
  suggestAccessibleColor,
  toGrayscale,
  rgbToHex,
} from "@genart-dev/plugin-identity";

// Check WCAG contrast between two colors
const result = checkContrast("#1a1a1a", "#ffffff");
// → { ratio: 16.75, meetsAA: true, meetsAAA: true, meetsGraphics: true }

// Validate an entire palette
const palette = checkPaletteContrast(["#1a1a1a", "#cc2222", "#ffffff"], 3.0);
// → { pairs: [...], passing: true }

// Suggest accessible foreground for a background
const color = suggestAccessibleColor("#ffffff", 210, "AA");
// → "#0055aa" (preserves target hue 210°)

Color Variants

import { mapColors, generateAllVariants } from "@genart-dev/plugin-identity";

const palette = {
  primary: "#1a1a1a",
  secondary: "#666666",
  accent: "#cc2222",
  background: "#ffffff",
};

// Generate all 4 color mode variants of an SVG
const variants = generateAllVariants(svgContent, palette);
// → { full: { svg, mappings }, reversed: {...}, grayscale: {...}, mono: {...} }

Clear Space

import {
  calculateClearSpace,
  checkClearSpaceCompliance,
  getBoundsWithClearSpace,
} from "@genart-dev/plugin-identity";

const logoBBox = { x: 100, y: 100, width: 200, height: 80 };

// Calculate clear space margins (unit = 40% of logo height)
const space = calculateClearSpace(logoBBox, 0.4);
// → { unit: 32, margins: { top: 32, right: 32, bottom: 32, left: 32 }, compliance: true }

// Check if a container provides enough clearance
const ok = checkClearSpaceCompliance(logoBBox, containerBBox, 0.4);

Lockup Layout

import { computeLockupLayout } from "@genart-dev/plugin-identity";

const layout = computeLockupLayout(
  { variant: "horizontal", markProportion: 0.4, gap: 0.15, hasWordmark: true, hasMark: true },
  { width: 400, height: 200 },
  0.4,
);
// → { markBounds, wordmarkBounds, totalBounds, clearSpace }

Scalability

import {
  analyzeScalability,
  getPathComplexity,
  estimateMinReadableSize,
} from "@genart-dev/plugin-identity";

const results = analyzeScalability(svgContent, [16, 32, 64, 128, 256]);
// → [{ size: 16, readable: false, detail: "Too complex..." }, ...]

const complexity = getPathComplexity(svgContent);
// → { commandCount: 42, shapeCount: 5, uniqueColors: 3 }

const minSize = estimateMinReadableSize(svgContent);
// → 32

Construction Grids

import {
  goldenRatioGrid,
  ruleOfThirdsGrid,
  diagonalGrid,
  circularGrid,
  modularGrid,
  fibonacciSpiral,
} from "@genart-dev/plugin-identity";

const grid = goldenRatioGrid(400, 400, 3);
// → { lines: [{ x1, y1, x2, y2 }, ...] }

const spiral = fibonacciSpiral(400, 400);
// → "M 247.2 ... A ..." (SVG path d attribute)

Scoring

import { scoreIdentity } from "@genart-dev/plugin-identity";

const report = scoreIdentity({
  palette: ["#1a1a1a", "#666666", "#cc2222", "#ffffff"],
  fontCount: 1,
  hasVariants: {
    full: true, reversed: true, grayscale: true, mono: true,
    horizontal: true, stacked: true, iconOnly: true,
  },
  pathComplexity: 18,
  smallestReadableSize: 16,
});
// → { score: 90, maxScore: 90, checks: [...] }

Scoring checks (max 90 points):

Check	Max	Criteria
Contrast	10	All palette pairs ≥ 3:1
Variants	15	Layout variants × 3 + color modes × 2
Color Count	10	≤ 4 colors ideal
Scalability	10	Readable at ≤ 16px
Clear Space	10	Enforced by lockup layer
Simplicity	15	≤ 20 path commands
Font Count	10	Single typeface
Vector Only	5	No raster elements
Color Independence	15	Grayscale + mono variants

Related Packages

Package	Purpose
@genart-dev/core	Plugin host, layer system (dependency)
@genart-dev/plugin-typography	Typography plugin (optional peer dependency)
@genart-dev/mcp-server	MCP server that surfaces plugin tools to AI agents

Support

Questions, bugs, or feedback — support@genart.dev or open an issue.

License

MIT