even-g2/docs/pages/build_design-guidelines.md at main

Files

drjones a51178e83e Even G2 dev workspace: docs snapshot (28 pages), README, toolchain notes

2026-09-02 19:33:07 -07:00

4.5 KiB

Raw Permalink Blame History

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

Useful characters for building UIs

4.5 KiB Raw Permalink Blame History Unescape Escape

Get Started

Quickstart

Build

Test

Ship

Reference

AI Tooling

Display constraints ​

Designing icons ​

The workflow ​

What survives 24 x 24 — and what doesn't ​

The store icon ​

Common UI patterns ​

Useful characters for building UIs ​