---
name: modigencevision-design
description: Use this skill to generate well-branded interfaces and assets for ModigenceVision (모디전스비전) — IR decks and PowerPoint, website pages that match the live site, and product UI. Contains the design guide, tokens, brand + MARU™ marks, imagery, reusable components, deck slide templates, and web pattern cards.
user-invocable: true
---

# ModigenceVision Design System

ModigenceVision builds perception infrastructure for Physical AI (MARU™ 3D perception platform). The brand is a clear, credible, deep-tech engineering company: precise, calm, data-dense, English-first.

One brand, **three registers** — pick the one for your surface and never mix them:

- **Deck** (IR slides, PowerPoint): black + white + gray, hairline cards, one small slide-specific blue accent. Layout locked to `slides/deck.css`.
- **Web** (modigencevision.com): pure neutrals, radius 0, no shadows, headings ≤ 600, ink-bordered buttons, the two logo blues as the only accents. The site repository is the source of truth; this system holds the extracted tokens and pattern cards.
- **Product UI** (dashboards, React components): blue-tinted neutrals, 10–24px radii, cool shadows, filled-blue primary buttons.

## How to use this skill

1. **Read `readme.md` first** — brand context, the registers, content rules, visual foundations per register, imagery, iconography, file index.
2. **Style with tokens:** link `styles.css`; use the custom properties in `tokens/`. Web work uses the site's own names (`--ink`, `--line`, `--blue`…); deck and product UI use `--mdv-*`, `--text-*`, `--radius-*`, `--shadow-*`.
3. **Reuse, don't reinvent:**
   - Logos and the MARU™ mark are in `assets/logo/` — copy, never redraw. Imagery (scenes, product renders, partner logos, portraits) in `assets/`.
   - Deck: start from `slides/01…08-*.html` and `slides/00-deck-patterns.html`; export values for PowerPoint are on the `ppt-*` cards.
   - Web: follow the `web-*` cards and `ui_kits/website/foundations.html`; page list and repo paths in `ui_kits/website/INDEX.md`.
   - Product UI: React components in `components/` (Button, Badge, Input, Card, Stat).
4. **Specimen cards** in `guidelines/cards/` show every foundation visually, numbered in display order.

### Output mode
- **Visual artifacts** (slides, mocks, prototypes): copy the assets you need and produce self-contained static HTML.
- **Production code:** adopt the token CSS and component patterns; for the website, change rules in the site repository first.

If invoked without guidance, ask which register (deck / web / product UI), audience, and fidelity, then act as an expert designer.

### Brand guardrails
- Blue accents only — no purple, no rainbow. One brand gradient (sky → deep blue), used sparingly; on the web only as the 2px closing rule.
- English-first. IBM Plex Sans (Latin) + Noto Sans KR (Korean fallback); IBM Plex Mono for every figure, tabular.
- No emoji. Material Symbols Outlined line icons only.
- No colored top-accent bars on cards. Flat first; shadows only in the product UI register, never on the web or the deck.
- Copy is calm and evidence-driven: every claim carries a number or a named customer. Speak as "we".