78 lines
4.5 KiB
Markdown
78 lines
4.5 KiB
Markdown
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 |