---
name: mihcm-brand
description: >
  Use this skill whenever creating, reviewing, or implementing MiHCM-branded
  materials, brand pages, marketing layouts, documents, presentations, dashboards,
  product mockups, logo usage, or visual outputs for MiHCM, MiHCM Lite, MiA ONE,
  Smart Assist, or Syntra. Trigger when a user mentions MiHCM branding, MiHCM
  logos, brand colours, product marks, marketing typography, downloadable logo
  assets, or brand-safe AI-generated design work.
metadata:
  short-description: Apply MiHCM brand identity, logo rules, and marketing guidance
---

# MiHCM Brand Skill

## Use When

- Creating or reviewing MiHCM branded documents, slides, one-pagers, campaigns, or marketing web pages.
- Choosing a logo variant for MiHCM, MiHCM Lite, MiA ONE, Smart Assist, or Syntra.
- Building UI that uses the `Logo` component or downloadable brand assets.
- Checking whether generated visuals follow brand, accessibility, and token rules.

## Required Context

- Brand logo page: `https://designsystem.mihcm.com/brand/logo`
- Logo manifest: `https://designsystem.mihcm.com/brand/logos/manifest.json`
- Logo asset bundle: `https://designsystem.mihcm.com/brand/logos/mihcm-logo-assets.zip`
- Logo component docs: `https://designsystem.mihcm.com/components/logo/usage`
- Marketing typography: `https://designsystem.mihcm.com/marketing/typography`
- Detailed rules: read `references/brand-guidelines.md` when the task involves logo placement, product-brand selection, documents, slides, or marketing compositions.

## Brand Family

Use the master brand unless a specific product is named.

| Brand id | Name | Use |
|---|---|---|
| `mihcm` | MiHCM | Master brand, company-level and platform-level communication. |
| `mihcm-lite` | MiHCM Lite | MiHCM Lite product surfaces only. |
| `mia-one` | MiA ONE | MiA ONE product surfaces only. |
| `smart-assist` | Smart Assist | Smart Assist product surfaces only. |
| `syntra` | Syntra | Syntra product surfaces only. |

Compact marks:

- `mihcm-favicon` for browser/app icons.
- `smart-assist-icon` for compact Smart Assist placements.
- `syntra-icon` for compact Syntra placements.

## Logo Rules

1. Prefer the design-system `Logo` component in React surfaces.
2. Use SVG assets from the logo manifest for documents, slides, and static exports.
3. Use `primary` on light backgrounds and `white` on dark or strongly coloured backgrounds.
4. Use `black` only for single-colour light-background contexts.
5. Do not recolour, stretch, crop, rotate, outline, shadow, or rebuild a logo from text.
6. Preserve clear space around the mark. Keep nearby text, controls, and borders outside the clear-space zone.
7. Do not use MiHCM Lite, MiA ONE, Smart Assist, or Syntra marks to represent the master MiHCM brand.

## Token Policy

For web and app UI:

- use MiHCM semantic tokens and Tailwind utilities;
- follow the 60/30/10 hierarchy: dominant neutral surfaces, supporting MiHCM brand blue, and restrained orange accent;
- use the `Logo` component variant and size props instead of local width/height hacks;
- do not hardcode hex/rgb/hsl colours in components;
- do not use arbitrary Tailwind visual values or inline style objects for brand styling.

For generated documents and slide decks where package tokens are unavailable, use the exported values from `references/brand-guidelines.md` and clearly state that they are document-export values, not component code.

## Marketing Typography

Marketing and website typography is separate from core product UI:

- headings: Albert Sans;
- body copy: Barlow;
- keep the type scale aligned to Tailwind scale names where possible;
- do not apply marketing typography globally to product application surfaces.

## Workflow

1. Identify the brand family and context: product UI, marketing page, document, slide, dashboard, or static asset.
2. Query or read the current logo manifest before naming asset paths.
3. Select the correct logo brand and variant for the background.
4. Use MiHCM components and token classes for UI work.
5. Use `mihcm_review_frontend_snippet` for JSX/TSX output.
6. Use `mihcm_review_semantics_accessibility` for every branded UI snippet.
7. For AI-generated UI descriptors, validate with `mihcm_validate_descriptor` before render.
8. Check contrast, clear space, minimum size, keyboard focus, icon-only labels, image alt text, and dark-mode compatibility.

## Security Boundary

- Do not embed registry tokens, MCP bearer tokens, PATs, or private Figma credentials.
- Do not fetch or expose private source files through hosted MCP.
- Do not let model output choose arbitrary asset URLs for brand marks. Use the manifest or documented assets only.
- Do not render raw HTML from a model-generated brand layout.

## Verification

- Correct brand selected.
- Correct logo variant selected for the background.
- Logo comes from `Logo` component or the official manifest.
- No local recolouring or distortion.
- UI output uses MiHCM semantic tokens and standard Tailwind utilities.
- Semantics and accessibility review passes for branded JSX/TSX.
- Accessibility checked for contrast, keyboard focus when interactive, and alt text.
- Dark mode checked when the output can appear on dark backgrounds.

## Output

Include:

- selected brand and logo variant;
- asset/component source;
- token and typography choices;
- accessibility checks;
- any caveat where document tooling required exported values instead of live tokens.