From everything-evenhub
Provides UI/UX design guidelines for Even Hub G2 smart glasses including display constraints, container limits, layout patterns, icons, Unicode characters, and resources. Use when designing glasses app interfaces or layouts.
npx claudepluginhub even-realities/everything-evenhub --plugin everything-evenhubThis skill is limited to using the following tools:
- **Resolution**: 576 x 288 pixels per eye
Builds UI for Even Hub G2 glasses displays using text containers, lists, images, page lifecycle, and layout patterns on 576x288 greyscale canvas. For creating or updating glasses app content.
Designs UI/UX for AI assistants with glass-morphism, spatial layouts, HUDs, attention management, visual hierarchy, and accessibility. Provides CSS color palettes and typography scales.
Generates UI in Nothing design language—monochrome, typographic, industrial—with Space Grotesk/Mono/Doto fonts, OLED blacks, segmented components, and strict three-layer hierarchy. Outputs HTML/CSS, SwiftUI, React/Tailwind.
Share bugs, ideas, or general feedback.
isEventCapture: 1containerID must be unique per page (integer)containerName must be unique per page (string, max 16 characters)\n for line breaks| Pattern | How |
|---|---|
| Fake buttons | Prefix text with > as cursor indicator |
| Selection highlight | Toggle borderWidth on individual text containers |
| Multi-row layout | Stack multiple text containers vertically (e.g., 3 containers at 96px height) |
| Progress bars | Unicode block characters: ━ (filled) and ─ (empty), or █▇▆▅▄▃▂▁ |
| Page flipping | Pre-paginate text at ~400-500 char boundaries, rebuild on scroll events |
| "Centering" text | Manually pad with spaces (no text alignment support) |
| Use Case | Characters |
|---|---|
| Progress bars | ━ ─ █▇▆▅▄▃▂▁ |
| Navigation | ▲△▶▷▼▽◀◁ |
| Selection | ●○ ■□ ★☆ |
| Borders | ╭╮╯╰ │─ (box drawing set) |
| Card suits | ♠♣♥♦ |
Full supported glyph tables: https://github.com/nickustinov/even-g2-notes
updateImageRawData to display contentThe glasses render monochrome green on black, but the Flutter WebView that hosts your plugin on the phone has its own visual identity. Match the Even app design system when building phone-side config / settings / library screens so your plugin feels native inside Even Hub.
| Token | Light | Dark | Use |
|---|---|---|---|
--color-text | #232323 (TC-1st) | #FFFFFF | Primary text |
--color-text-dim | #7B7B7B (TC-2nd) | #8A8A8A | Secondary text, timestamps, captions |
--color-bg | #FFFFFF (BC-1st) | #111111 | Page background |
--color-surface | #EEEEEE (BC-3rd) | #1A1A1A | Card / row background |
--color-input-bg | rgba(35,35,35,0.08) | rgba(255,255,255,0.08) | Search bar, input fields |
--color-accent | #FEF991 | #FEF991 | Brand accent (sparingly — buttons, highlights) |
--color-text-on-accent | #FFFFFF | #FFFFFF | Text on accent backgrounds |
Brand rules:
#FEF991 is Even brand yellow — use only for accent (buttons, highlights), never as a page background#3CFA44 is glasses-display green — use ONLY on the G2 display, NEVER in phone-side UIPrimary: FK Grotesk Neue (negative letter-spacing for a tight, editorial feel). Fallback: Source Han Sans for CJK, system sans for everything else.
| Style | Size | Weight | Letter-spacing |
|---|---|---|---|
| Display | 34 px | 700 | -0.02em |
| Title | 24 px | 600 | -0.02em |
| Subtitle | 18 px | 500 | -0.01em |
| Body | 16 px | 400 | -0.01em |
| Caption | 13 px | 400 | 0 |
| Label | 11 px | 500 | 0.04em (uppercase) |
Use a 4/8 px grid: 4 8 12 16 24 32 48 64. Card padding: 16. Section spacing: 24–32. Screen edge padding: 20.
Official design guidelines covering layout principles, component patterns, interaction models, and visual standards: https://www.figma.com/design/X82y5uJvqMH95jgOfmV34j/Even-Realities---Software-Design-Guidelines--Public-?node-id=2922-80782
even-toolkit) — 55+ React components, 191 pixel-art icons, design tokens, glasses SDK bridge utilities (useGlasses hook, buildActionBar, mapGlassEvent, canvas renderer, PNG utils, pagination helpers)$ARGUMENTS