Top Nav Area

The top most area of the page which includes 3 parts :


The Logo is a vector since it uses “Century Gothic” we won’t render the font. The product edition however uses “Proxima Nova”. This uses a dynamic size to stay aligned with the Logo *TBD*

Search Field

The search field text is only shown before the user interacts with the field. Color changes slightly based on the theme applied.

  • font-weight: .xboldFont()
  • color: *TBD*

Utility Bar

The utility bar is set on the right side of the page and contains a menu with dropdowns on all but one item: the sitemap (which shows up in a modal). The menu is defined as tertiary so its follows the appropriate styling with icons:

  • color: *TBD*
  • text-transform: .uppercase()

Primary Menu

Found under the top most nav the primary menu includes the process menu, home, reports and collaboration links (actions). It defines our primary menu style and includes icons for each menu point:

  • font-size: .largeFont()
  • font-weight: 400 (normal)
  • color: *TBD*

Utility and primary menu dropdowns

Both menus include dropdown menus to sublinks. These links include hover styling but only with color which is TBD for now.

  • color: *TBD*
  • line-height: 1.15em *TBD*

Secondary Menu

The sub menu doesn’t always appear but with the new design it is more connected (visually) to the top navigation.

  • color: *TBD*
  • line-height: 1.15em *TBD*

Leave a Reply

Your email address will not be published. Required fields are marked *