4.5 KiB
UI/UX Design Guidelines | Documentation
Skip to contentDocumentationSearch⌘CtrlK Main Navigation PortalThemeMenuReturn to top Sidebar Navigation
Get Started
Overview
Quickstart
Sign inHardwareInstall Node.js & npmInstall Even Hub toolingYour First AppTemplatesArchitecture
Build
Page LifecycleDisplay & UI SystemUI/UX Design GuidelinesDevice APIsContextual MenuNetworkingBackground & Lifecycle
Test
SimulatorLocal TestingPrivate TestingBeta Testing
Ship
Packaging & DeploymentApp Submission & QA Guidelines
Reference
GlossaryCLIVersioning PolicyChangelogFAQ
AI Tooling
Claude CodeOn this pageLast updated: 2026-07-10Even Realities publishes the canonical software design guidelines - layout, components, interaction patterns, and visual standards - for both the glasses display and the companion app.Open the Design Guidelines in Figma →
Display constraints
Designing for the Even G2 display:
- 576 x 288 px canvas. The whole canvas is renderable. Coordinate origin is top-left; X increases rightward, Y downward.
- 4-bit greyscale. Design in shades of grey; the hardware renders them as shades of green.
- No background fill. Borders and text or image content are the only structure available.
- Max 4 image containers, 8 other containers. Plan the layout inside that ceiling.
- One event-capturing container. Design around a single active input target.
Designing icons
Icons on the Even G2 are pixel art. You don't have to draw them pixel by pixel — design at full size in whatever tool you like, then bring the artwork down to the pixel grid deliberately.
The workflow
- Draw big, in any tool. Figma, Illustrator, Inkscape, an AI image generator — anything that exports SVG or a high-resolution PNG.
- Fill the canvas border to border. No padding, no margins. At 24 x 24 there are no pixels to spare; empty space in the source becomes wasted pixels on the glasses.
- Downscale to native resolution, then clean up by hand. Scale to the actual render size (24 x 24 is the norm), threshold to pure on/off pixels — no anti-aliasing — and nudge strokes onto the grid. The last 10% is always manual.
What survives 24 x 24 — and what doesn't
| | | Do | Don't | | One solid color on a plain background | Gradients, shadows, textures | | Flat filled shapes | Hairline strokes, outline-style icons | | A single subject, edge to edge | Busy scenes, multiple elements, decorative borders | | Strokes at least 2 px wide at final size | Thinner lines — they vanish or clump when downscaled | | A silhouette recognizable from shape alone | Detail that only reads large: faces, text, fine patternsIf you use an AI generator for source art, prompt for flat solid-black icon, white background, thick strokes, no gradients, no shading, centered, fills the frame — then downscale and clean up as above.
The store icon
The icon on your store listing is stricter than in-app artwork. It is drawn in the Developer Portal's 24 x 24 pixel editor and validated on upload:
- 1-bit monochrome. Every pixel is fully on or fully off. No greys, no anti-aliasing.
- Built from 2 x 2 blocks. Every lit pixel must be part of a 2 x 2 block of lit pixels. Blocks can sit at any position and chain into bars, corners, and irregular shapes, but the thinnest possible stroke is 2 px — single pixels and 1-px lines don't validate. Plan on an effective 12 x 12 detail budget.Reviewers also reject illegible icons outright — see Store listing & visual assets.
Common UI patterns
| | | Pattern | How | | Fake buttons | Prefix text with > as a 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 | Use Unicode block characters: ━ and ─ | | Page flipping | Pre-paginate text at ~400–500 character boundaries, rebuild on scroll events
Useful characters for building UIs
The glasses render a single LVGL font with no monospaced variant and no sizing controls (see Font and Unicode support). The characters below render reliably and stand in for common UI affordances: | | | Use case | Characters | | Progress bars | ━ ─ █▇▆▅▄▃▂▁ | | Navigation | ▲△▶▷▼▽◀◁ | | Selection | ●○ ■□ ★☆ | | Borders | ╭╮╯╰ │─ box-drawing set | | Card suits | ♠♣♥♦Full glyph tables live in the community Even G2 notes.PagerPrevious pageDisplay & UI SystemNext pageDevice APIs