Even G2 dev workspace: docs snapshot (28 pages), README, toolchain notes
This commit is contained in:
drjones
78
docs/pages/build_design-guidelines.md
Normal file
78
docs/pages/build_design-guidelines.md
Normal file
@@ -0,0 +1,78 @@
|
||||
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
|
||||
Reference in New Issue
Block a user