Design Assets

Use this page to align Figma, code, docs, Storybook, MCP, and agent skills.

Source Of Truth

Layer	Source
Product intent	MiHCM product/design specs and Figma files.
Logo source	Temporary Figma logo node: `24:388`.
Code contract	`src/packages/ui`, `src/packages/tokens`, `src/packages/theme`.
Human docs	`docs/`, docs site, Storybook.
Agent facts	Hosted MCP at `https://designsystem.mihcm.com/mcp`.
Agent workflow	Skills in `skills/`.

Brand Assets

Logo usage, clear spacing, background rules, downloadable SVG files, and the machine-readable logo manifest are documented in Logo usage.

AI tools should use /brand/logos/manifest.json when selecting logo assets for generated designs. They should not invent alternate logo shapes, colours, or wordmarks.

Component Mapping

When a Figma component maps to code, use the same PascalCase name whenever possible:

Figma concept	Code package
Button	`@mihcm/ui/Button`
Input	`@mihcm/ui/Input`
Dialog	`@mihcm/ui/Dialog`
Status badge	`@mihcm/ui/StatusBadge`
Page shell	`@mihcm/ui/PageShell`

If a design has no matching primitive:

query MCP with mihcm_search_components;
compose existing primitives if possible;
propose a new primitive only when composition is not enough;
follow Contributing Components.

Token Usage

Use semantic tokens in component code:

bg-background
text-foreground
border-border
bg-primary
text-primary-foreground
text-muted-foreground

Avoid raw hex values in code. Raw palette values belong in token packages and design source material, not component implementations.

Handoff Workflow

Designer links the Figma frame/component.
Developer or agent reads design context.
Agent queries MiHCM MCP for existing components and tokens.
Developer implements with existing primitives first.
Storybook story is added or updated.
Docs and wiki are updated.
Contract check and verification loop run.

Figma Access

For private design files, do not paste screenshots or private token exports into public issues. Use approved Figma access or a sanitized spec.

If a Figma MCP is available, use it only to read design context. Do not use agent tools to mutate source design files unless the designer explicitly asks for that workflow.