Page Name
Presentation
Page name is our most important "way finding" element in a page. It is literally the page name - so users can quickly understand where they are - and it can also be paired with some short description and quick access features.
Specification
Page name is presented in H1, Grey 1.
Page description is presented in Paragraph regular, Grey 1.
Both elements have a 20 points margin and are spaced in 10 points from each other.
Page description is presented in Paragraph regular, Grey 1.
Both elements have a 20 points margin and are spaced in 10 points from each other.
For the cases when this component presents a quick access feature, it is spaced from "Page name" in 20 points.
Examples
Weigh in screen
Weigh-in screen presents page name paired with description and a special feature (in this case a toggle button)
Food report page presents only name and description.
Dark mode
By default and unless specified otherwise, page name dark mode has black background and Off-White text and icons.
Default result is something like this:
Default result is something like this:
Related content
