Layout Language
Glance layouts are JSON trees rendered natively on iOS. This guide covers the design system every layout and Glance AI follow.
Design principles
- Glanceable — one clear takeaway in under two seconds
- Native — SF typography, semantic colors, calm density like Apple system widgets
- One hero — every size has a single focal point (hero stat, headline, or image)
- Intentional spacing — pick 8 / 12 / 16 pt rhythm and stick to it
Canvas sizes
| Size | Canvas (pt) | Safe zone inset |
|---|---|---|
| small | 170 × 170 | 22 pt from each edge |
| medium | 364 × 170 | 22 pt from each edge |
| large | 364 × 382 | 22 pt from each edge |
Root container padding is typically 12 pt (16 pt on airy large layouts). Use spacer with flex: 1 to push footers to the bottom on large widgets.
Bindings
| Syntax | Meaning |
|---|---|
| {{field_name}} | Dynamic — appears in upload form & automations |
| Plain string | Static label — fixed in the layout |
| https://… | Static image URL on image components |
| bag.fill | SF Symbol name on icon components |
Typography
Use sf-pro (or omit fontFamily). At most 3 font sizes and 2 weights per widget. Set maxLines: 1 on titles and hero lines in small/medium widgets.
Color
- iOS renderer accepts 6-digit hex only (
#RRGGBB) — 8-digit alpha hex is ignored - Primary text:
#000000or omit for system primary - Secondary labels:
#8E8E93 - One accent hue per widget unless the user requests a branded look