Fitness

Preview

Dashboard, Library, Analytics, Profile, Progress and Exercise, each in Light and Dark. Five screens carry the tab bar, and Exercise is a full screen player without one.

Fitness, 6 screens393 x 852 each, Light and Dark

Which components build the Fitness screens?

Navigation, Button and Segmented Control carry the structure, Card and Chip carry the Library, and five Photo / Gym slots hold photographs.

A fitness app is a tab bar, a stack of cards and charts, and a few controls that change the period or the exercise. On the light frames 145 instances sit on each row of the Fitness page: 87 are Appetite UI components, 5 are photo slots and 53 are Lucide icons with 26 different names. The dark row holds the same instances, so every number below is per row.

5 Photo / Gym slot instances hold photographs, each one named so it can be found and replaced.

Counted on October 2, 2026 with a Plugin API script over the six light frames of the Fitness page in the Appetite UI Figma file. Nested and hidden instances count, parts such as navigation labels are grouped with their family, and an icon is an instance named in lowercase.

Which parts of the Fitness screens are drawn by hand?

Analytics places a Chart component. The activity rings, the week strip, the Progress bars and the weight rail are drawn on the frame.

Analytics places Chart / Bar - Stacked with its Trend Chip, so a chart restyle there follows the component. The table above lists one bar chart and no ring or slider, so the three activity rings and the week strip on Dashboard, the seven bars on Progress and the weight rail on Analytics are drawn on the frame. They resolve through variables like everything else, and they are where a chart or progress component would plug in.

How do the Fitness screens switch between light and dark?

Each frame pins Color Tokens to Light or Dark and Platform to ios-md, so the dark row is the light layout with one mode changed.

Nothing is left to inherit: a frame dropped into another file arrives in the theme it was drawn in. A frame set to Dark resolves every token against the Dark mode of Color Tokens, so the dark row is the same layout with the other values.

The six light frames hold 422 solid fills and strokes bound to 47 different variables, and none is unbound. The activity rings, the week strip and the bars resolve through the same variables, among them the three chart/series colors on Analytics. Nine fills are pictures: two avatars, the Up next card, the featured program, four exercise thumbnails and the Exercise photograph. Seven more are gradients: the tab bar fade on five screens and a shade over each of the Up next and Exercise photographs.

Paints are every visible solid fill and stroke on the light frames, inside instances included, counted by bound variable name on October 2, 2026. Where a token appears as both a fill and a stroke the two counts are added. A style row counts a text layer or a node that carries the style.

On iOS the minimum touch target is 44 pt. The frames pin Platform to ios-md, where platform/min-touch-target reads 44, so a tap target on these screens starts there. Android would read 48.