Page Headers

Drawing a division between different sections on the screen can be very important. A page header may be the perfect solution to distinguish between global and contextual actions (global actions can be placed in the header and contextual in its respective container)

A page header can consist of many different kinds of items (text, buttons, tabs, filters, selections, etc.) but it is important to follow the following principles:

• The visual distinction between a page header (white or black) and the page body (gray-0 in light mode, gray-1000 in dark mode) is the color and border between them
• A page header should typically remain static, while the body content underneath can be changing
• When using input controls or buttons in the page header, make sure these actions are truly global, and not contextual to just a certain container shown below it
  • If it is contextual, consider moving the control to below the page header, in the container that it pertains to
  • For example, if filters/search exist in the Page Header, these should affect not just the body content shown below the header.
• If the header is fixed on the screen and does not scroll, it should have a box shadow (shadow-100 light mode, shadow-400 dark mode) indicating the rest of the content will scroll underneath it