How every component is put together, what it can switch on, and how it moves. Companion to COMPONENTS.md and MOTION.md; the earlier live curves and springs are in ui-build.html. The samples here are sketches of structure, not the final look.
1. How a component is put together
Named parts, a few kinds, switchable features, a full set of states, and one row of movement. The Row is the example because the mockup drew it nine different ways.
Lead
TitleAl Noor ContractingDetailDesert Rose · 86.4 m²
MetaTueTrailPaid 50 %
Parts are optional places with a fixed kind of content. Kinds: plain, record, setting, message. Features: pressable, selectable, swipe actions, reveal, sensitive amount, suggested, queued, long-press preview, customer view. A sixth kind would mean it is two components.
2. One Row, nine uses
The same component with different parts and features switched on. Each of these was a separate function in the mockup.
3. Features, written once and shared
An ability is never rebuilt inside a component. It is switched on. A filled cell means the family uses it.
4. All 96 components, and 16 more for the Money desk
5. States every component has
All of these are built before a component is used on any screen.
6. Motion: what the evaluation found
The feel was right; the decisions a developer needs were missing. A before any component, B before screens, C while building.
7. Three of the fixes, live
Never wait for an exit
The earlier plan closed the Halo card, then opened the record. Overlapped, the record arrives 200 ms sooner.
Halo card
Record
Stagger: small, capped, only when new
24 ms between rows, first six only. Never on Back or refresh.
A drag with numbers
Drag the sheet. It follows the finger, resists past the end, and rests where a throw would land (position + speed × 150 ms), on a spring that starts at your speed.
Page behind
full
half
Drag me
at rest: half
8. The motion ladder, and what shows while waiting
FullShared elements between screens, springs, stagger, the small overshoot on a finished step. When the phone holds its frame rate.
SimpleSlides and fades only. Springs after a drag stay. When frames drop in screen changes, or power saving is on.
Minimal120 ms fades. Drags still follow the finger. When less motion is asked for, in the phone or in the app.
Waiting. What appears, by how long the person has waited:
<100 ms: nothingto 300 ms: stays pressedto 1 s: still placeholdersto 10 s: one slow pulse, a word for what is happeningover 10 s: may leave; the Halo tells them