attentiondotnet/open-design/g2-design-system-ui-kit-mqgbmh2w

G2 Design System UI Kit

Use this skill when generating Open Design 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 Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.