Interface examples

ExampleToday

Stabilité's Today screen, rebuilt in all three materials.

Category: Interface examplesOpen the preview alone

Live preview

Reference specimen. Example copy comes from the Pelote specs and is in French.

ExempleStabilité · Aujourd'hui, couleur source Feuille #2f5d3a (Material You)

ExpressiveRéférence

Jeudi 20 octobre

Aujourd’hui

Série en cours 1

3jours

LMMJVSD

sur 2 repas

2 / 21 / 20 / 2

Petit-déjeuner · 07:42 · Maison 2

PlazaVariante M3E

Jeudi 20 octobre

Aujourd’hui

Série en cours

3jours

2/21/2!0/2

ChromeVariante M3E

Stabilite · 14:32

Aujourd’hui

SÉRIE EN COURS

03 JOURS

Protéines 2/2Fibres 1/2Gras 0/2

1Le chiffre qui motive est l'élément le plus grand. La semaine se lit sans couleur : plein, contour épais, contour fin.
2Une ligne, une info, durée relative.
3Urgence et action courante : même taille, couleur différente, à portée de pouce.

Reference specimen. Example copy comes from the Pelote specs and is in French.

Stabilité's Today screen, rebuilt in all three styles: Expressive (reference), Plaza and Chrome. Same content, same hierarchy, same UX rules.

The motivating figure (the streak) is the largest element, on pc, with the week as dots.
The last meal is one line with a relative duration.
Two FABs of the same size: emergency in ec, current action in pc, above the navigation bar.