Identity

Brand identity — lockups, color swatches, scale testing, construction grids, and accessibility checks.

Brand identity design tools for composing lockups, generating color variants, testing scalability, and checking WCAG accessibility contrast.

Installation

npm install @genart-dev/plugin-identity

Layer Types

Type ID	Display Name	Description
`identity:lockup`	Lockup	Mark + wordmark composition with 4 variants and 4 color modes
`identity:swatch`	Color Swatch	Palette display strip with labels in horizontal, vertical, or grid layout
`identity:scale-test`	Scale Test	SVG rendered at multiple sizes for legibility testing
`identity:grid`	Construction Grid	Design grid overlays (golden-ratio, thirds, diagonal, circular, modular)

Properties

identity:lockup

Property	Type	Default	Description
`variant`	`select`	`"horizontal"`	horizontal, stacked, icon-only, wordmark-only
`markSvg`	`string`	`""`	SVG content for the mark
`wordmark`	`string`	`""`	Wordmark text
`wordmarkFont`	`string`	`""`	Font family
`wordmarkWeight`	`select`	—	Font weight (100–900)
`markSize`	`number`	—	Mark size (0.1–1.0)
`gap`	`number`	—	Gap between mark and wordmark (0–0.5)
`showClearSpace`	`boolean`	`false`	Show clear space zone
`primaryColor`	`color`	—	Primary color
`secondaryColor`	`color`	—	Secondary color
`accentColor`	`color`	—	Accent color
`colorMode`	`select`	`"full"`	full, reversed, grayscale, mono
`backgroundColor`	`color`	—	Background color

identity:swatch

Property	Type	Default	Description
`colors`	`string`	—	Comma-separated hex values
`labels`	`string`	—	Comma-separated labels
`showValues`	`boolean`	`true`	Show hex values
`showLabels`	`boolean`	`true`	Show color labels
`layout`	`select`	`"horizontal"`	horizontal, vertical, grid
`swatchSize`	`number`	—	Swatch size (20–200px)
`gap`	`number`	—	Gap between swatches (0–40px)

identity:scale-test

Property	Type	Default	Description
`sourceSvg`	`string`	—	SVG content to test
`sizes`	`string`	—	Comma-separated pixel sizes
`showSizeLabels`	`boolean`	`true`	Show size labels
`gap`	`number`	—	Gap between renders (0–80px)
`showGrid`	`boolean`	`false`	Show pixel grid overlay

identity:grid

Property	Type	Default	Description
`gridType`	`select`	`"golden-ratio"`	golden-ratio, rule-of-thirds, diagonal, circular, modular
`subdivisions`	`number`	—	Grid subdivisions (1–12)
`showSpiral`	`boolean`	`false`	Show golden spiral overlay
`circleCount`	`number`	—	Circular grid circles (1–12)
`moduleSize`	`number`	—	Modular grid cell size (10–200px)
`gridColor`	`color`	—	Grid line color
`lineWidth`	`number`	—	Grid line width (0.25–3)

MCP Tools

Tool	Description
`create_lockup`	Create identity lockup (mark + wordmark) with color customization
`set_lockup_variant`	Switch between horizontal, stacked, icon-only, wordmark-only
`generate_color_variants`	Generate full/reversed/grayscale/mono variants as 4 layers
`create_swatch`	Create color palette swatch with labels
`test_at_sizes`	Render SVG at multiple sizes with legibility observations
`create_grid`	Add construction grid overlay
`check_contrast`	Check WCAG contrast ratio between two colors
`check_palette_contrast`	Check all pairwise contrasts in a palette
`score_identity`	Quality scoring: contrast, variants, scalability, simplicity
`suggest_accessible_color`	Suggest WCAG-compliant color preserving target hue

Example

{
  "tool": "create_lockup",
  "arguments": {
    "markSvg": "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='currentColor'/></svg>",
    "wordmark": "Acme",
    "wordmarkFont": "Inter",
    "primaryColor": "#1a1a2e",
    "secondaryColor": "#e94560"
  }
}

Identity

On this page