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