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.
1---2name: g2-design-system-ui-kit-mqgbmh2w3description: G2 Design System UI Kit4---5# G2 Design System UI Kit67Use 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.89## Structure1011- `index.html` - Browser-reviewable entry that loads `./colors_and_type.css`, React, ReactDOM, Babel, and the component files.12- `colors_and_type.css` - Source-backed G2 token CSS for dark HUD color, type, spacing, radius, icon, stroke, and compact/regular display modes.13- `components/App.jsx` - App shell that composes the G2 HUD surface.14- `components/Sidebar.jsx` - Compact system rail for mode, call, messages, AI, and device controls.15- `components/AssistantsList.jsx` - AI card and quick status pattern.16- `components/ChatArea.jsx` - Primary message, call, and teleprompter workspace.17- `components/InputBar.jsx` - Bottom command-entry surface.18- `components/MessageBubble.jsx` - Message, note, and assistant response unit.19- `README.md` - Human-readable package guide and validation notes.2021## Usage2223Open `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.2425## Design Notes2627Use G2 as a dark AR glasses control interface, not a generic mobile app, SaaS dashboard, or marketing page. Preserve these source-backed cues:2829- Black optical canvas.30- White, secondary gray, and tertiary gray text.31- `#333333` controls, borders, and disabled surfaces.32- `#0D76FF` selected state.33- `#0D76FFA6` focus and touch feedback.34- Noto Sans Medium/Bold typography.35- `data-g2-mode="regular"` for 640 mode and `data-g2-mode="compact"` for 320 mode.3637Do not invent off-token accent colors, glassmorphism, or landing-page hero compositions.3839## Provenance4041Formalized by OpenDesign from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.
gabrielmoreira