Top Bar is the structure on top of each screen that allows:
- Navigation between screens; and
- Easy access to special features.
‍
It is made of three main structures:
‍
- Left area: usually reserved for back/close buttons
- Center: where we show page name when top area is collapsed
- Right area: where we place up to two easy-access features, like favorite or share, depending on the context. If we have more than 2 special features, we must use one of these spots for the "extra", where we'll be able to nest more features

Elements on top bar have the same 20 points margin on both sides and between icons. Each icon is square shaped with 30 points sides.

Top bar height is set to 50 points.

Text style is Tag Non Tappable Big, and it is only shown on collapsed version, unless specified otherwise.

Back/close icon is, by default, Calorie Command 2 over a Off-White background. This is customized according to  context.

Text and quick action features are both Calorie Command 1. This is customized according to context.

When collapsed, top bar has a bottom 0.5 points Grey 6 stroke and White background.

Depending on screen width resolution, bar might have more or less space for the text. It will always preserve left and right side structure design. For illustration purposes, some very small resolution cases.

Weigh-in screen presents only the back button on its top bar for its initial state.

When users scroll and this top section collapses, it presents the name of the page and weigh-in button. One can also notice the stroke and white background in this version.

By default and unless specified otherwise, top bar dark mode has black background and Off-White text and icons. For the cases where icons have off-white background, it is replaced by Grey 1.
‍Grey 6 bottom stroke is also replaced by Grey 1.

Default result is something like this:

The logic is to use black for background by default. Off-white for high contrast elements and Grey 1 for low contrast elements.