How the interface is built

How the glass, the elements and every movement will be coded, and why each choice was made in terms of what a person sees and feels. Companion to FRONTEND.md and DESIGN.md sections 6 and 11. Tap any motion sample to play it.

1. The layers of the interface code

Each layer only uses the one beneath it. A screen never sets a colour, a size or a timing by itself.

2. Glass: four levels, one layout

The same bar at each level, over moving content. Layout, sizes and behaviour never change between levels; only the surface does. (Level 3 here is an approximation: true edge bending needs the real phone.)

3. How a phone gets its level

4. The movement vocabulary

Every movement in the app uses one of these. The curve shows position over time; the dashed line is where it ends. Only settle passes the line, by about 3 %, and only for a completed step. Everything else stops without overshoot.

5. Which technique for which movement

One question at a time, top to bottom. The first that fits decides how it is coded.

6. Small movements, element by element

7. Large movements

8. Sequences: what moves when

Bars show when each part moves, in milliseconds. Amber is the one part that carries the meaning.

9. A movement that follows the finger: the Halo band

10. How timing and shape of movement feel

Where Diamond Stone sits, and what each corner of the map feels like. A designer's map, not a measurement.

11. Why each rule, in terms of the person

12. Budgets and checks

13. What the plan was missing

An audit of this sheet against standards, platform documentation and published studies, 11 November 2026. Ordered by risk to people using the S25 and A55. Each row is now part of the plan; sections 14 to 23 draw the larger ones.

14. Reach: the Halo is at the top, the thumb is at the bottom

On a 6.2 to 6.6 inch phone held in one hand, the top of the screen is outside the thumb's comfortable area. About half of use is one-handed. So the band at the top is for looking, and everything in it can also be reached from below.

15. What sits on top of what

One fixed order, written once. No component chooses its own layer.

16. The shell as a screen reader meets it

TalkBack takes over swipes, so no custom gesture ever reaches the page for these users. Everything must work by moving focus and double-tapping.

17. Arabic: what mirrors and what does not

18. Bright light: a fifth surface level

The A55 is the limit: it reaches about 1,000 nits only in automatic brightness and under 450 when set by hand, against about 2,600 on the S25. Text over a translucent surface will not survive direct sun on it. So there is a Sun level: opaque, maximum contrast, heavier text, no glass anywhere.

19. Text the person has enlarged

Chrome on Android ignores the phone's font-size setting unless the page opts in. The app opts in. Every bar then has a minimum height, never a fixed one, so it grows with the text.

20. What a screen shows while data arrives

21. Starting up

What loads when, so the first screen is usable before everything has arrived. The rules engine runs in a background worker so a tap is never kept waiting by a calculation.

22. What a web app can and cannot do on each phone

23. The test grid

Automatic checks find a little over half of accessibility problems at best. The rest needs a person with the phone, the screen reader on, at a factory or on a site.