# ModigenceVision — Design System **ModigenceVision Co., Ltd. (모디전스비전)** builds **perception infrastructure for Physical AI**. Its flagship platform **MARU™** is an *integrated 3D perception platform* — ToF 3D (VCSEL 940nm) + RGB/IR camera modules, on-device Edge AI (NVIDIA Jetson Orin / Qualcomm), an AI Vision SDK, and a continuous Data Engine — sold as modular hardware that scales into Perception-as-a-Service. The core thesis (straight from the IR deck): in Physical AI, the **brain (AI) is over-invested** and the **body (hardware) is affordable**, but **perception is the missing link** — the unsolved prerequisite for autonomous operation. ModigenceVision positions itself not as an "optician" selling the best module off a spec sheet, but as an **"ophthalmologist" / AI Perception Co-Architect** that diagnoses the real-world problem and delivers an outcome. Brand voice: *"HW opens the door, Engineering builds trust, Edge AI drives profit."* / *"From Sensors to Sense-Making."* The brand reads as a **clear, credible, deep-tech engineering company**: precise, calm, data-dense, evidence-first — built to earn investor and Tier-1 OEM trust (Samsung, PRETTL 🇩🇪, Kohler 🇺🇸, Hanwha Vision). > Built from the brand logo set **and** the company's existing IR decks (see Source materials). Colors are taken from the **official logo SVG gradient**; tone & structure are grounded in the decks. --- ## Surfaces and Registers One brand, three visual registers. Read the shared rules, then the register you are designing for. **Never mix registers on one surface.** | Register | Where | Look | Source of truth | |---|---|---|---| | **Deck** | IR & company-intro slides, PowerPoint | Black + white + gray, hairline cards, one small slide-specific blue accent | `slides/deck.css` — locked to the Selectio pitch (정본) | | **Web** | modigencevision.com | Pure neutrals, radius 0, no shadows, weight ≤ 600, two logo blues as the only accents | Site repository `ModigenceVision/modigencevision-web` (`public/styles.css`, `src/pages/**`) — the DS holds extracted tokens, pattern cards, a page index; never page copies | | **Product UI** | Dashboards, consoles, React components | Blue-tinted neutrals on `#f3f5f8`, 10–24px radii, cool shadows, filled-blue primary buttons | `tokens/colors.css` · `spacing.css` · `components/` | Shared across all three: the logo set, the MARU™ mark, IBM Plex Sans + Noto Sans KR + IBM Plex Mono, Material Symbols icons, the content rules, and the imagery library. --- ## Source Materials Provided by the user (originals live in `uploads/`): - **`모디전스비전_Logo_SVG.svg`** / **`…_아이콘포함.svg`** — official **vector** logos. The gradient is defined here: **`#009fe8` → `#00459b`** (the authoritative brand blues). - `mdv-logo-1.png` / `mdv-logo-2.png` — full stacked color logo (1080×700, transparent). `mdv-logo.png`, `mdv-logo-horizontal.png` — small raster lockups; `mdv-logo-v1-legacy.jpg` (legacy). - **`MDV_Infineon_Selectio Pitch_0617.pdf`** — the layout / color / type reference for the deck register (정본). - **`MDV_IR Deck 5.8.1_full_resized.pdf`** (17pp) and **`MDV_IR Deck 5.8.2_GITEX.pdf`** (11pp) — the general-purpose IR decks; sample-slide *content* follows these. - `Maru logo design/` — the MARU™ product-mark package. Processed assets live in `assets/` (see Index). --- ## The Mark The logo is a horizontal **infinity (∞)** formed by two interlocking lenses: a **concentric "eye" / target** on the left and a **camera aperture (iris)** on the right — reading as *"continuous, precise perception."* It is filled with a left-to-right gradient of the **official brand blues `#009fe8` (bright sky) → `#00459b` (deep blue)**. The wordmark sets **MODI** in light blue (the "O" is the aperture), **GENCE** in deep blue, and **VISION** in neutral gray. - **Assets:** `assets/logo/modigence-vision.svg` (color), `modigence-vision-white.svg` (knockout), `modigence-icon.svg` (gradient symbol) — *canonical vectors, prefer these*; PNG fallbacks `logo-stacked*.png`, `symbol*.png`, `wordmark*.png`. - **Clearspace** = height of the "V" in VISION on all sides. **Minimum width** 96px digital. Never recolor, rotate, stretch, or add effects. - The symbol doubles as app icon / favicon and as a low-opacity watermark. Do not redraw it. Cards: `brand-01-logo` · `brand-02-logo-dark` · `brand-03-symbol`. ### Product Mark — MARU™ A rounded **module housing (ㅁ)** frame holding two unlike eyes — the **ToF emitter dot (ㅎ)** and the **RGB aperture ring**. Where the parent ∞ mark is the *endorser*, MARU is the *product*: the two can sit on one page, each keeping its own clearspace, but MARU is **one flat ink only** (`#06243F` navy or white) — **never the parent gradient**. - **Geometry:** ratio **5:3** · frame stroke = **10%** of height · corner R = **27%** of height · emitter dot r = 8.5% · aperture ring r = 25%, stroke 9.7%. - **Wordmark:** IBM Plex Sans **700**, tracking **+0.10em**, ™ at **0.44×** the wordmark size, top-aligned. No ™ on the standalone symbol. (On the website, no `™` in HTML text anywhere — images untouched.) - **Lockups:** *horizontal* (default — deck labels, doc headers, web): cap height and gap both = 50% of frame height. *Vertical* (four corner placements): wordmark width = 50% of symbol width, flush to the frame edge, one stroke of clearance; the four positions mirror the layout, never the letterforms. - **Clearspace** = 50% of frame height on all sides. **Minimum** symbol height **20px** (14px absolute floor). - **Assets:** `assets/logo/maru-symbol{,-white,-currentcolor}.svg` (vector masters), `maru-symbol{,-white}.png` (favicon / app icon), `maru-wordmark{,-white}.png`, `maru-lockup-horizontal{,-white}.{png,webp}`, `maru-lockup-vertical{,-white}.png`. - **Never:** rotate, shear, or distort the ratio; recolor into a gradient or multiple colors; swap or move the dot and ring; add elements inside the frame; substitute the wordmark typeface. Cards: `brand-04-maru-symbol` · `brand-05-maru-lockups` · `brand-06-maru-usage`. --- ## Content Fundamentals How ModigenceVision writes — all registers. - **Language: English is the default.** The **website is English-only** — no Korean secondary lines on any page. In the **deck**, Korean may appear as a secondary line when a Korean audience is in the room. Never Korean-first. The brand name is always **ModigenceVision** (one word, camel) or the logo. - **Tone:** confident, plain, deep-tech but human. Never hypey. Every claim is backed by a number or a named customer. Signature cadence: a crisp declarative + a **pull-quote in quotation marks** ("Brain and body are ready. The remaining challenge is the ability to see."). - **Voice:** speaks as **"we"**; frames the company as an **AI Perception Co-Architect** — the *ophthalmologist, not optician* metaphor. - **Casing:** English sentence case in body; **UPPERCASE wide-tracked (0.16em)** section eyebrows/labels (PROBLEM, SOLUTION, TECHNOLOGY, MARKET, FINANCE…). No Title Case on buttons. - **Numbers:** concrete, tabular, sourced, always in IBM Plex Mono with a short label: `$560K cumulative revenue`, `4,000+ modules shipped`, `63% gross profit`, `$8.2B → $27.5B by 2034`, `177% CAGR`. Web figures in use: `4,000+` modules shipped · `$560K` cumulative revenue · `0.2–20 m · ±0.5%` depth · `10–20 ms` on-device. Track-record lines keep their per-project unit counts (3,000 / 1,000). - **Vocabulary:** perception, 3D sensing, ToF, RGB/IR fusion, Edge AI (this spelling), sim-to-real, calibration, module, deployment, Physical AI, robotics, OEM, Tier-1, recurring/PaaS. Korean equivalents (퍼셉션, 3D 센싱, 엣지 AI, 모듈, 양산, 배포) only as the deck's secondary line. Avoid "revolutionary," "magic," "AI-powered everything." - **Emoji:** none in UI. The one exception: country flags (🇰🇷 🇩🇪 🇺🇸) tagging customer geography in IR traction tables. - **Examples:** Hero *"Perception Infrastructure for Physical AI"* → sub *"Bring-up your machine vision."* · Taglines *"From Sensors to Sense-Making."* / *"HW opens the door. Engineering builds trust. Edge AI drives profit."* · CTA *"Request a demo"* (deck Korean secondary: *데모 신청*). ### Web-only Content Rules - **Naming, three tiers.** Category: **Camera EVK Board**. Product: **MARU Development Kit — Type Q / N / A**. Host platform named in each kit's eyebrow and `Host` spec row (Qualcomm QCS610 · NVIDIA Jetson Orin Nano / NX · NextChip Apache6). Sensor and interface pairings elsewhere are "confirmed per project". Component *suppliers* (image-sensor / VCSEL vendors) are not named in copy. - **Verticals — five, always in this order:** Robotics · Smart Factory · Agriculture · Logistics · Healthcare. Robotics has a detail page; the other four link to `/applications/`. Automotive / Mobility is no longer a vertical (the award name "Mobility & Smart Cities" is the one exception). - **Page metadata:** `` ≤ 60 characters, `description` ≤ 155. Pattern `Page — short claim | ModigenceVision`. Internal links directory-style (`/products/maru-link/`), never `.html`. --- ## Visual Foundations — Shared - **Type: English-first, collaboration-safe.** **IBM Plex Sans** carries Latin (free, on Google Fonts / Google Slides / PowerPoint; shares a family with the mono); **Noto Sans KR** carries Korean via per-glyph fallback (`--font-sans` / `--font-display` lead with Plex Sans; `--font-kr` only for Korean-led blocks). **IBM Plex Mono** for figures (tabular-nums) and code. Scale is a 1.25 major third, 11 → 76px (`--text-2xs … --text-5xl`); tracking −0.022em on display, 0.16em on uppercase eyebrows. - **Icons:** Google **Material Symbols Outlined** only — even, geometric line icons that match the mark. No emoji, no filled or multicolor packs. See Iconography for per-register loading. - **Motion:** subtle and quick — fades and 1–8px translateY, no bounces or spins. Respect `prefers-reduced-motion`. - **Imagery:** cool, technical, crisp. Partner logos in unified grayscale on white; team portraits B&W. See Imagery. ## Visual Foundations — Deck Register The deck is **black + white + gray** with small, slide-specific blue accents. It is not navy or blue-heavy. Layout is **locked to the Selectio pitch (정본)** and encoded in `slides/deck.css`; every content slide follows one rhythm on a 1280×720 frame: 1. **Section eyebrow** — UPPERCASE, 0.18em, **top-right** (PROBLEM · SOLUTION · TECHNOLOGY · MARKET VALIDATION · APPLICATIONS · TEAM · FUTURE HORIZON …). 2. **Title** — top-left, 30pt / 700, tracking −0.025em. 3. **Subtitle** — one line, directly under, gray `#929292`. 4. **Body** — dense and structured: 3-column comparisons, pillar cards, KPI strips, HW/SW stack tables, phase timelines, vertical case grids. 5. **Pull-quote** — centered, in quotation marks, near the bottom. 6. **Footer** — `Copyright © …` centered + **page number** far-right (mono). Cover and closing are full-bleed **ink** slides (left-aligned title, lower third); content slides are white. - **Palette:** ink `#0a0d10` (titles, dark bands) · mid gray `#929292` (subtitles, captions) · hairlines `#e5e5e5` / `#ededed` · washes `#eef3f8` (blue, emphasis: chips, icon tiles, KPI strips) and `#f6f7f8` (gray, support) · dark panel `#1f2732` · accent blue `#0070c0` · sky `#009fe8` on dark · status green `#1e9e6a` / amber `#d9920a` / red `#d8443c` for state only · partner accent (e.g. NVIDIA `#76b900`) on that partner's slide only. - **Cards:** 1px hairline, 10px radius, **no shadow**, **no colored top-accent bar**. Border semantic: **solid = shipping today, dashed = pilot / roadmap** (`.card-now` / `.card-next`). - **Shared classes** (`deck.css`): `.slide .eyebrow .title .subtitle .body .pquote .foot .pageno`; compact scale `.panel-h .panel-s .body-s .cap-s`; `.klabel` mono kicker; `.kpi-v` mono KPI figure; `.chip` status chips (`ship` green · `next` amber · `form` blue · `miss` red · `solid` ribbon over photos); `.mono-lead` for cover/closing. Slide-specific layout lives in each file's scoped `<style>`. - **Imagery:** use the library generously — product renders, exploded stack, depth maps, point clouds, scene photos, grayscale partner logos. Don't leave slides text-only. - **PowerPoint hand-off:** the three `ppt-*` cards give every value in PowerPoint's own units (pt, cm, 배수, 투명도 %) — cm = px × 0.02646, pt = px × 0.75. Cards: `slides/00-deck-patterns` + sample slides `01–08` · `ppt-01-layout` · `ppt-02-type` · `ppt-03-shadows`. ## Visual Foundations — Web Register Extracted from the live site; **change rules in the site first, then re-extract** (`tokens/web.css`). - **Color:** pure neutrals — ink `#111111`, hairline `#e5e5e5`, muted `#6b6b6b`, band `#fafafa`, page white; dark blocks `#111111` with `#2e2e2e` lines. The two logo blues `#009fe8` / `#00459b` are the only accents (eyebrow bars, links, badges). The 2px `.gradient-rule` opening the closing CTA is the only gradient on the site. - **Type:** display / hero **400** at 76px (−0.022em); all other headings cap at **600 — 700 is not used on the web**. Body 16/1.55, measure 68ch. Eyebrows uppercase 14px / 0.16em; buttons uppercase 0.18em. Figures in Plex Mono. - **Surfaces:** **radius 0** everywhere; fully flat — 1px hairlines, `border-bottom: 1px solid ink` section heads, **no shadows**. Emphasis via a 2px blue eyebrow bar or a 2px ink button border, never elevation. Buttons are ink-bordered only; **no filled-blue buttons**. - **Section grammar:** after the hero, sections alternate white `.section--page` and `#fafafa .section--band` (H-B-P-B-P…); closing CTA is white. Section head = `.eyebrow` (40×2px blue bar + label) over `.h2`, action link on the same baseline (`.head-row`). One `.pull` quotation per section at most. - **Media:** product renders in 4:3 boxes with `object-fit: contain` — never cover-cropped; scene photography 4:3 cover; film in `.video__frame` (16:9, ink) with a mono caption "title · duration". - **Layout & motion:** 1440px container, 64px gutter, 112px section padding (breakpoints 1024 / 768 / 480); 160ms `cubic-bezier(0.22,0.61,0.36,1)`. Cards: `web-01-section-grammar` · `web-02-content-blocks` · `web-03-controls-form-icons`. Living sheet: `ui_kits/website/foundations.html`. ## Visual Foundations — Product UI Register For dashboards, consoles, and the React components in `components/`. - **Color:** a disciplined **monochrome-blue** palette from the mark — sky `#54b4e8` → primary `#0072c6` → navy `#0a2a52` → ink `#06243f` — over **cool blue-tinted grays**; page `--surface-page #f3f5f8` with white cards. Status colors for state only. One brand gradient (`--mdv-gradient-brand`) for hero panels and the rare `brand` CTA. - **Type:** headlines 600–700, tight tracking; body 400–500 at 1.55–1.62. - **Surfaces:** 4px grid; radii `10px` controls/cards · `16px` panels · `24px` hero · pill badges. Hairlines `--border-subtle/-default`; **no colored top-accent bars**. Shadows cool and blue-tinted (`rgba(10,42,82,…)`): cards on `sm`, popovers on `lg/xl`, `--shadow-brand` glow under primary CTAs only — flat first, shadow only to convey layering. - **States:** hover — solid buttons darken (blue-600→700) + 1px lift, ghost → blue-50 tint, links → blue-700; press — blue-800, lift removed; focus — 3px sky ring (`--shadow-focus`). Durations 130–380ms, standard easing `cubic-bezier(0.22,0.61,0.36,1)`, emphasized `cubic-bezier(0.16,1,0.3,1)`. - **Transparency:** sparing — a subtle white blur on a solid nav, ink overlays at 70–90% over imagery. No glassmorphism. Cards: `color-01…04` · `type-01…04` · `spacing-01…03` · `Components`. --- ## Imagery The brand ships its own photography and renders — **use these instead of repeating the logo.** All in `assets/`. **Web set (2026-09, WebP)** - **Application scenes** `scenes/{robotics,smart-factory,agriculture,logistics,healthcare}.webp` (4:3): cobot arm with MARU head picking parts · overhead MARU on a conveyor · greenhouse robot with tomatoes detected · AMR with pallet, box detected on rack · arm-guided ultrasound probe. - `scenes/humanoid-perception.webp` (alpha) — Home Problem figure. `scenes/hero-identity-perception.webp` — hero. `scenes-official/*.webp` — MARU lineup and stage shots. - `product/maru-exploded.webp` (panoramic, dark) — the platform pulled apart: *ToF+RGB module → interface board → edge-vision AP board*. Technology hero; also the deck MARU slide. - `products/maru-{link,tower,one}{,-45deg}.webp`, `maru-tower-{sensor,interface,edge-ai}-front.webp`, `kit-{qcs610,orin,apache6}.webp` — product renders, always `object-fit: contain`. **Deck set (PNG)** - `product-maru.png` — the module on transparent; on dark, sit it behind a sky-blue radial glow. - `module-1…4.png` — real hardware (module, carrier board, bare sensors) for spec credibility on white. - `product/camera-module-*.png`, `pcb-*.png`, `sensor-module-1.png`, `depth-map-*.png`, `human-pointcloud.png` — technology visuals. - `scene-warehouse-hud.png` (dark 16:9) — closing / CTA full-bleed, headline room on the left. `robot-cutout.png`, `bg-humanoid-light.png`, `icon-cycle.png` — hero foreground / background / evolution mark. `scenes/*.png` — legacy deck scenes. **Treatment:** for text over imagery use an ink gradient (`rgba(4,32,63,…)`), never a full wash. No warm filters or grain. **Partner logos** (`partners/`) in unified grayscale (`filter:grayscale(1)`, ~0.6 opacity) on white; full-color only on a dedicated validation slide. **Team portraits** (`team/`) B&W full-body on white, role + name + one credential; never tint. Card: `brand-07-imagery`. --- ## Iconography - **Set:** [Google Material Symbols](https://fonts.google.com/icons) Outlined. `currentColor`, `FILL 0, wght 400, opsz 24`; `wght 500` at small sizes; `FILL 1` only for selected states. Pair with a text label where space allows; icon-only controls need an accessible label. - **Deck / product UI — icon font:** `<span class="material-symbols-outlined">photo_camera</span>` at 18–26px, loaded once from `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0`. Names in use: `frame_inspect` `shield` `monitoring` `memory` `photo_camera` `layers` `lock` `arrow_forward` `check`. - **Web — inline sprite, two tiers:** an inline `<svg class="icon-defs">` sprite of `<symbol>`s (Material paths, no `stroke-width`), placed with `<svg class="ico"><use href="#i-name"></use></svg>`. **Tier 1 · 40px** (`.ico--40`) heads a block; **Tier 2 · 18px** (`.ico`) in spec-table and label rows, deep blue; 48px only on neutral tiles. Mapping: `memory` edge/host · `visibility_off` perception gap · `precision_manufacturing` robotics · `factory` · `agriculture` · `local_shipping` · `medical_services` · `view_in_ar` 3D · `straighten` depth · `crop_free` 2D · `bolt` edge AI · `lan` interface · `cable` power/SerDes · `adjust` calibration · `join_inner` data engine · `search` consulting · `download` updates. `directions_car` is retired. --- ## Index **Root** — `styles.css` (import-only entry point; consumers link this) · `readme.md` (this guide) · `SKILL.md` (agent wrapper) · `github.md` (site repo link + sync receipt) · `CLAUDE.md` (project notes) · `thumbnail.html`. **`tokens/`** — all `@import`ed by `styles.css`, in this order: - `web.css` — web-register `:root` extracted verbatim from the site (`--ink`, `--line`, `--muted`, `--blue`, `--w-*`, `--gutter`, `--radius: 0`, `--dur`). Imported **first** so the files below win on shared names (`--font-sans`, `--text-*`). - `typography.css` — Plex Sans + Noto KR + Plex Mono, scale, weights, tracking. - `colors.css` — brand blue scale, cool neutrals, status, gradients, semantic aliases (product UI). - `spacing.css` — grid, radii, borders, shadows, motion, containers (product UI). - `base.css` — light element defaults. **`assets/`** — `logo/` (ModigenceVision SVG + MARU™ set) · `partners/` (Samsung, Qualcomm, NVIDIA, Sony, onsemi, SK hynix, Hanwha Vision, Kohler, PRETTL, ISU, Beyeonics, VoxelSensors, sens2act, Everybot, Eckerle, Mountain) · `product/` · `products/` · `scenes/` · `scenes-official/` · `team/` · root PNGs — see Imagery. **`guidelines/cards/`** — specimen cards for the Design System tab, numbered in display order: `brand-01…07` · `color-01…04` · `type-01…04` · `spacing-01…03` · `ppt-01…03` (PowerPoint sheets, Korean) · `web-01…03`. **`slides/`** — deck register: `deck.css`, `00-deck-patterns.html`, sample slides `01-cover … 08-closing`, `index.html` (grid preview), `deck-print.html` (PPTX/PDF export source). Exports in `exports/`. **`components/`** — React primitives via `window.<Namespace>`: `core/` **Button · Badge · Input**, `data/` **Card · Stat**. **`ui_kits/website/`** — `INDEX.md` (15 pages with repo paths and staging URLs) + `foundations.html`. No page copies. --- ## Notes - **Fonts** load from Google Fonts (no binaries vendored). To self-host, drop `.woff2` in `tokens/fonts/` and add `@font-face`. - **Website sync:** sync the site project first; then re-extract `tokens/web.css`, update the `web-*` cards and `INDEX.md`, and record the commit in `github.md`. Never change web rules here first.