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.

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: <title> ≤ 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 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 @imported 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.

Part 2 — Specimen Cards

1. Brand — 7 cards
2. Colors — 4 cards
3. Type — 4 cards
4. Spacing — 3 cards
5. Components — 2 cards
6. PowerPoint — 3 cards
7. Web — 3 cards
8. Slides — 9 cards

Part 3 — Appendix: Token Source

Verbatim contents of the stylesheets consumers link. styles.css is the single entry point; it imports the others in order.

styles.css

/* ============================================================
   ModigenceVision Design System — global entry point.
   Consumers link THIS file. Import-only by design.
   ============================================================ */

@import url('tokens/web.css');
@import url('tokens/typography.css');
@import url('tokens/colors.css');
@import url('tokens/spacing.css');
@import url('tokens/base.css');

tokens/web.css

/* ============================================================
   ModigenceVision — Web register tokens
   SOURCE OF TRUTH: modigencevision-web / public/styles.css  :root
   Extracted verbatim at sync 2026-09-02 (staging). Re-extract on every
   site sync; do not hand-edit values here.
   Variables keep the site's own names (--ink, --line, --text-*, …) so a
   page copied from the site renders unchanged. Deck/product tokens live
   in colors.css / typography.css / spacing.css and are not affected.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --ink: #111111;
  --ink-soft: #1d1d1d;
  --page: #ffffff;
  --band: #fafafa;
  --line: #e5e5e5;
  --muted: #6b6b6b;
  --blue: #009fe8;
  --blue-deep: #00459b;

  --dark-ink: #111111;
  --dark-fg: #ffffff;
  --dark-line: #2e2e2e;
  --dark-muted: #9a9a9a;

  /* ---- type ---- */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-5xl: 76px;   /* display / hero */
  --text-4xl: 60px;   /* display, secondary */
  --text-3xl: 46px;   /* h1 */
  --text-2xl: 36px;   /* h2, section title */
  --text-xl: 28px;    /* h3 */
  --text-lg: 22px;    /* h3, card title */
  --text-md: 18px;    /* lead */
  --text-base: 16px;  /* body */
  --text-sm: 14px;    /* label, nav, button */
  --text-xs: 12px;    /* eyebrow, meta */

  --leading-tight: 1.12;
  --leading-normal: 1.55;

  --tracking-tighter: -0.022em; /* display */
  --tracking-tight: -0.012em;   /* heading */
  --tracking-eyebrow: 0.16em;   /* uppercase label */
  --tracking-button: 0.18em;

  --w-display: 400; /* @kind font */
  --w-body: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */

  --measure: 68ch;

  /* ---- layout ---- */
  --max-w: 1440px;
  --gutter: 64px;
  --pad-y: 112px;      /* section vertical padding, 96–128 range */
  --radius: 0;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur: 160ms; /* @kind other */
}

/* ---- breakpoints: 1440 / 1024 / 768 / 480 ---- */
@media (max-width: 1024px) { :root { --gutter: 40px; --pad-y: 88px; --text-5xl: 60px; --text-3xl: 38px; --text-2xl: 30px; } }
@media (max-width: 768px)  { :root { --gutter: 28px; --pad-y: 72px; --text-5xl: 46px; --text-xl: 24px; } }
@media (max-width: 480px)  { :root { --gutter: 20px; --pad-y: 56px; --text-5xl: 36px; --text-3xl: 30px; --text-2xl: 26px; --text-md: 17px; } }

tokens/typography.css

/* ============================================================
   ModigenceVision — Typography
   ENGLISH-FIRST, collaboration-safe. IBM Plex Sans carries Latin
   — a widely-available, free, professional grotesk (Google Fonts,
   Google Slides, PowerPoint) that shares a family with IBM Plex
   Mono for system coherence. Noto Sans KR carries Korean via
   per-glyph fallback. IBM Plex Mono for figures/data (tabular).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Families ----
     IBM Plex Sans (EN, primary) · Noto Sans KR (KR) · IBM Plex Mono (data).
     --font-sans / --font-display lead with the English (Latin) set;
     browsers fall back to Noto Sans KR per-glyph for Hangul, so a
     bilingual line renders Latin in IBM Plex Sans + Korean in Noto.
     Use --font-kr only when a Korean-only block must lead with Noto. */
  --font-en:   'IBM Plex Sans', system-ui, sans-serif;
  --font-kr:   'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo',
               'Malgun Gothic', sans-serif;
  --font-sans: 'IBM Plex Sans', 'Noto Sans KR', -apple-system,
               'Apple SD Gothic Neo', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans', 'Noto Sans KR', -apple-system,
                  'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;

  /* ---- Weights (IBM Plex Sans tops out at 700) ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   700;

  /* ---- Type scale (1.250 major-third, 16px base) ---- */
  --text-2xs: 0.6875rem;  /* 11px — labels, legal */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px — body */
  --text-md:  1.125rem;   /* 18px — lead body */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px — H2 */
  --text-3xl: 2.875rem;   /* 46px — H1 */
  --text-4xl: 3.75rem;    /* 60px — hero */
  --text-5xl: 4.75rem;    /* 76px — display */

  /* ---- Line heights ---- */
  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.55;
  --leading-relaxed:1.72;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.022em;  /* display headings */
  --tracking-tight:   -0.012em;  /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;    /* uppercase eyebrows / labels */
}

tokens/colors.css

/* ============================================================
   ModigenceVision — Color System
   Anchored on the OFFICIAL logo gradient (vector source):
   bright sky #009fe8 → deep blue #00459b, spanning the infinity
   symbol (lens aperture + concentric eye).
   ============================================================ */

:root {
  /* ---- Brand blues (primitive scale; 400 & 700 are the
     official logo gradient stops) ---- */
  --mdv-blue-50:  #e6f5fd;
  --mdv-blue-100: #c3e8fb;
  --mdv-blue-200: #8fd5f4;
  --mdv-blue-300: #4fbcef;   /* light sky */
  --mdv-blue-400: #009fe8;   /* OFFICIAL bright — gradient start */
  --mdv-blue-500: #0083cf;
  --mdv-blue-600: #0072c6;   /* PRIMARY brand blue (accessible on white) */
  --mdv-blue-700: #00459b;   /* OFFICIAL deep — gradient end / wordmark */
  --mdv-blue-800: #013a82;
  --mdv-blue-900: #042c63;   /* deep navy */
  --mdv-blue-950: #04203f;   /* ink navy — deepest */

  /* ---- Cool neutrals (blue-tinted grays) ---- */
  --mdv-gray-0:   #ffffff;
  --mdv-gray-25:  #fafbfc;
  --mdv-gray-50:  #f3f5f8;
  --mdv-gray-100: #e8ebf0;
  --mdv-gray-200: #d6dbe3;
  --mdv-gray-300: #b9c1cd;
  --mdv-gray-400: #8d97a6;
  --mdv-gray-500: #6b7480;   /* "VISION" gray */
  --mdv-gray-600: #515a66;
  --mdv-gray-700: #3b424c;
  --mdv-gray-800: #272d35;
  --mdv-gray-900: #161b21;

  /* ---- Semantic status ---- */
  --mdv-success: #1e9e6a;
  --mdv-success-soft: #e3f5ec;
  --mdv-warning: #d9920a;
  --mdv-warning-soft: #fbf0d6;
  --mdv-danger:  #d8443c;
  --mdv-danger-soft: #fbe6e5;
  --mdv-info:    var(--mdv-blue-600);
  --mdv-info-soft: var(--mdv-blue-50);

  /* ---- Brand gradients ---- */
  --mdv-gradient-brand: linear-gradient(100deg, #009fe8 0%, #00459b 100%); /* @kind color */ /* OFFICIAL logo gradient */
  --mdv-gradient-sky:   linear-gradient(135deg, #009fe8 0%, #0072c6 100%); /* @kind color */
  --mdv-gradient-ink:   linear-gradient(160deg, #00459b 0%, #042c63 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — reference these in components & layouts
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--mdv-gray-50);
  --surface-card:    var(--mdv-gray-0);
  --surface-sunken:  var(--mdv-gray-100);
  --surface-inverse: var(--mdv-blue-950);
  --surface-brand:   var(--mdv-blue-600);
  --surface-brand-soft: var(--mdv-blue-50);

  /* Text */
  --text-strong:  var(--mdv-blue-950);
  --text-body:    var(--mdv-gray-700);
  --text-muted:   var(--mdv-gray-500);
  --text-faint:   var(--mdv-gray-400);
  --text-on-brand: var(--mdv-gray-0);
  --text-on-inverse: var(--mdv-gray-100);
  --text-link:    var(--mdv-blue-600);

  /* Borders */
  --border-subtle: var(--mdv-gray-200);
  --border-default: var(--mdv-gray-300);
  --border-strong: var(--mdv-gray-400);
  --border-brand: var(--mdv-blue-600);

  /* Interactive accents */
  --accent:        var(--mdv-blue-600);
  --accent-hover:  var(--mdv-blue-700);
  --accent-active: var(--mdv-blue-800);
  --focus-ring:    var(--mdv-blue-400);
}

tokens/spacing.css

/* ============================================================
   ModigenceVision — Spacing, Radii, Shadows, Borders, Motion
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-12: 7rem;      /* 112 */
  --space-16: 10rem;     /* 160 */

  /* ---- Radii ---- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;    /* default control/card */
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---- Shadows (cool, blue-tinted, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 42, 82, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 42, 82, 0.08), 0 1px 2px rgba(10, 42, 82, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 42, 82, 0.10), 0 2px 4px rgba(10, 42, 82, 0.06);
  --shadow-lg: 0 12px 28px rgba(10, 42, 82, 0.12), 0 6px 10px rgba(10, 42, 82, 0.06);
  --shadow-xl: 0 24px 56px rgba(6, 36, 63, 0.18);
  --shadow-brand: 0 10px 28px rgba(0, 114, 198, 0.28);
  --shadow-focus: 0 0 0 3px rgba(26, 163, 232, 0.35);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1140px;
  --container-xl: 1320px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
}

tokens/base.css

/* ============================================================
   ModigenceVision — Base element defaults
   Lightweight, opt-in foundations applied to bare HTML so
   specimen cards and kits inherit brand type/color out of the box.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--accent-hover); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--mdv-blue-200); color: var(--mdv-blue-950); }

slides/deck.css

/* ============================================================
   ModigenceVision — Canonical Deck Layout System
   Metrics & palette extracted VERBATIM from the Selectio pitch
   (정본, 960×540) and scaled ×1.333 to 1280×720.
   Palette is black / white / gray with small per-slide blue
   accents — exactly as in the source deck.
   TEXT SIZES ARE IN pt (1pt = 4/3px @96dpi): identical rendering
   on the 1280×720 canvas, and 1:1 into PowerPoint's 16:9
   (33.87×19.05cm) slide — no fractional font sizes in PPT.
   ============================================================ */

.slide{
  /* --- exact reference palette --- */
  --ref-black:#000000;       /* insight/validation dark bands, closing */
  --ref-ink:#0a0d10;         /* cover band / titles */
  --ref-gray:#d9d9d9;        /* connector tiles */
  --ref-gray2:#d1d1d1;       /* placeholder cards / team photos */
  --ref-gray3:#929292;       /* muted badge */
  --ref-blue:#085096;        /* journey nodes, team bar */
  --ref-blue-office:#0070c0; /* validation accent bars */
  --ref-navy-hw:#0f2740;     /* demo HW column */
  --ref-blue-sw:#0463aa;     /* demo SW column */
  --ref-navy-bar:#11304e;    /* roadmap timeline bar */
  --ref-node:#0072c6;        /* roadmap small nodes */
  --ref-sky:#009fe8;         /* roadmap big nodes (logo blue) */
  --ref-green:#22c55e;       /* ✓ status */
  --ref-red:#e30613;         /* ✗ status */

  /* --- additions promoted from the NVIDIA IGC application deck (2026-06) --- */
  --ref-line:#e5e5e5;        /* card hairline (outer borders) */
  --ref-line-soft:#ededed;   /* inner dividers */
  --ref-wash-blue:#eef3f8;   /* emphasis wash — chips, icon tiles, highlight panels, KPI strips */
  --ref-wash-gray:#f6f7f8;   /* support wash — summary bands & cards (recedes) */
  --ref-panel:#1f2732;       /* dark hero/feature panel on light slides */
  --ref-nvidia:#76b900;      /* partner accent (NVIDIA) — dark partner/console slides only */

  position:relative; width:1280px; height:720px; box-sizing:border-box;
  font-family:var(--font-sans); overflow:hidden;
  background:#ffffff; color:var(--ref-ink);
}
.slide.ink{ background:var(--ref-black); color:#fff; }
.slide.ink .glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(820px 460px at 14% 10%, rgba(0,159,232,0.16), transparent 68%); }

/* content frame — 73px L/R margin (55/960 ×1.333) */
.frame{ position:absolute; inset:0; padding:54px 73px 58px; box-sizing:border-box;
  display:flex; flex-direction:column; }

/* eyebrow — TOP-RIGHT, wide-tracked uppercase, mono-minimal */
.eyebrow{ position:absolute; top:48px; right:73px; z-index:3;
  font-size:10pt; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ref-ink); }
.slide.ink .eyebrow{ color:rgba(255,255,255,0.92); }

/* title + subtitle — TOP-LEFT */
.title{ position:relative; font-size:30pt; line-height:1.08; letter-spacing:-0.022em;
  font-weight:700; margin:0; max-width:960px; color:inherit; }
.title .tm{ font-size:0.6em; vertical-align:0.45em; font-weight:600; }
.subtitle{ position:relative; font-size:18pt; line-height:1.34; margin:11px 0 0;
  color:var(--ref-gray3); max-width:900px; font-weight:400; }
.slide.ink .subtitle{ color:rgba(255,255,255,0.74); }

/* the body region grows to fill between subtitle and footer */
.body{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }

/* centered pull-quote */
.pquote{ position:relative; text-align:center; font-size:18pt; line-height:1.38;
  font-style:italic; font-weight:500; letter-spacing:-0.012em; color:var(--ref-ink); }
.slide.ink .pquote{ color:#fff; }

/* footer — copyright centered, page number far right (13px / mono) */
.foot{ position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-family:var(--font-mono); font-size:10pt; letter-spacing:0.01em; color:var(--ref-gray3); }
.slide.ink .foot{ color:rgba(255,255,255,0.5); }
.pageno{ position:absolute; right:73px; bottom:22px;
  font-family:var(--font-mono); font-size:10pt; color:var(--ref-gray3); }
.slide.ink .pageno{ color:rgba(255,255,255,0.5); }

/* shared small pieces */
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================
   Deck patterns — promoted from the NVIDIA IGC deck (additive)
   ============================================================ */

/* mono kicker label above panels/blocks ("SENSOR BLOCKS", "PROOF ON FILE") */
.klabel{ font-family:var(--font-mono); font-size:8pt; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ref-blue-office); }
.klabel.dim{ color:var(--ref-gray3); }

/* compact content scale used across dense slides */
.panel-h{ font-size:11pt; font-weight:700; letter-spacing:-0.01em; color:var(--ref-ink); }
.panel-s{ font-size:9pt; color:var(--ref-gray3); }
.body-s{ font-size:10pt; line-height:1.5; color:var(--ref-ink); }
.cap-s{ font-size:9pt; line-height:1.4; color:var(--ref-gray3); }

/* KPI figure (mono, tabular) */
.kpi-v{ font-family:var(--font-mono); font-size:26pt; font-weight:600;
  letter-spacing:-0.03em; line-height:1; color:var(--ref-ink); font-variant-numeric:tabular-nums; }

/* status chips — semantic colors come from tokens/colors.css */
.chip{ display:inline-block; font-family:var(--font-mono); font-size:8pt; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.chip.ship{ background:var(--mdv-success-soft); color:var(--mdv-success); }  /* shipping / signed */
.chip.next{ background:var(--mdv-warning-soft); color:var(--mdv-warning); }  /* pilot / roadmap / in discussion */
.chip.form{ background:var(--ref-wash-blue); color:var(--ref-blue-office); } /* agreement type: MoU / Channel / LIVE */
.chip.miss{ background:var(--mdv-danger-soft); color:var(--mdv-danger); }    /* missing / gap */
.chip.solid{ background:var(--mdv-success); color:#fff; }                    /* ribbon over case photos */

/* border semantic: SOLID = shipping today · DASHED = pilot / roadmap */
.card-now{ background:#fff; border:1px solid var(--ref-line); border-radius:10px; }
.card-next{ background:#fff; border:1px dashed var(--ref-gray3); border-radius:10px; }

/* mono lead paragraph — cover/closing voice */
.mono-lead{ font-family:var(--font-mono); font-size:12pt; line-height:1.7; letter-spacing:0.01em; }