# G2 Design System Ui Kit Mqgbmh2W

> Design system UI kit for HiCatcat G2 AR glasses HUD: a dark black-canvas React and HTML kit with loc

Design system UI kit for HiCatcat G2 AR glasses HUD: a dark black-canvas React and HTML kit with local token CSS (colors_and_type.css), an index.html review page, and modular JSX components for app shell, sidebar, chat area, input bar and message bubbles, with regular 640 and compact 320 display modes. Use when generating OpenDesign artifacts or React prototypes that must follow the G2 AR glasses HUD token contract, not a generic mobile app, dashboard or landing page.

- Page: https://ss33.ai/skills/nexu-io/g2-design-system-ui-kit-mqgbmh2w-73380133415
- Publisher: nexu-io
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: Apache-2.0
- Source: https://github.com/nexu-io/open-design/blob/78d5637cb49da07e81314d1544b5fc6d37c95084/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/nexu-io/g2-design-system-ui-kit-mqgbmh2w-73380133415

# G2 Design System UI Kit

Use this skill when generating OpenDesign artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.

## Structure

- `index.html` - Browser-reviewable entry that loads `./colors_and_type.css`, React, ReactDOM, Babel, and the component files.
- `colors_and_type.css` - Source-backed G2 token CSS for dark HUD color, type, spacing, radius, icon, stroke, and compact/regular display modes.
- `components/App.jsx` - App shell that composes the G2 HUD surface.
- `components/Sidebar.jsx` - Compact system rail for mode, call, messages, AI, and device controls.
- `components/AssistantsList.jsx` - AI card and quick status pattern.
- `components/ChatArea.jsx` - Primary message, call, and teleprompter workspace.
- `components/InputBar.jsx` - Bottom command-entry surface.
- `components/MessageBubble.jsx` - Message, note, and assistant response unit.
- `README.md` - Human-readable package guide and validation notes.

## Usage

Open `index.html` directly for visual review. Copy component files into a React prototype when building product-like artifacts. Keep `colors_and_type.css` loaded before the components so color, type, spacing, radius, stroke, and mode variables resolve through the G2 token contract.

## Design Notes

Use G2 as a dark AR glasses control interface, not a generic mobile app, SaaS dashboard, or marketing page. Preserve these source-backed cues:

- Black optical canvas.
- White, secondary gray, and tertiary gray text.
- `#333333` controls, borders, and disabled surfaces.
- `#0D76FF` selected state.
- `#0D76FFA6` focus and touch feedback.
- Noto Sans Medium/Bold typography.
- `data-g2-mode="regular"` for 640 mode and `data-g2-mode="compact"` for 320 mode.

Do not invent off-token accent colors, glassmorphism, or landing-page hero compositions.

## Provenance

Formalized by OpenDesign from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.