Special Application Header
Search the component library

Special Application Header

v1.0.1

For certain products, it makes more sense to highlight the product name more than the "Pearson" master brand.

Only use this component if the:

  • Standard Application Header conflicts with your use case
  • Applicable product and marketing leads have approved

Requirements

Should I use this?  For most products, the answer is no. Only use this Special Application Header in the rare situation where there is a need to promote a product brand over the Pearson brand; for example when users are unaware that they are using a Pearson product and changing this awareness will detract from their experience. This initial use case was a requirement for certain Learning Apps. In all cases, the decision to use a Special Application Header needs to be agreed upon by relevant stakeholders (Product, UX, Marketing).

Special Application Header

≥ 768px

Logo

The product title logo, replaces the “Pearson” text, but should use similar visual styling. In this example, the product title is in a color and format familiar to its users are.

The typography and color of the product title logo are restricted only by the approval of relevant stakeholders.

Use of the Pearson ‽ thumbprint link depends on the specific application's need, but the basic design is found at console.pearson.com.

Header icons

Products that are candidates for this Special App Header will likely also have different needs for some, or all, header icons. Consult your team, but whenever possible, retain the styling and spirit of standard Application Header icons.

Special Application Header

< 768px

Logo

Use at least one reduced-size product title logo for smaller screens. Ensure that your product logo is legible on smaller devices.

A single-line product logo is ideal, but a double-line format is acceptable when required.

In order to keep Pearson branding, place the full Pearson logo in any applicable footers. Example:

Redlines

≥ 768px

SourceFollow Application Header, except where noted here
Logo‽ thumbprint separated from product title logo with Alto (#d9d9d9) line
Link may be dependent on specific application needs
Default link: console.pearson.com
Spacing and dimensions1px separator line, 37px tall, to match ‽ thumbprint
16px padding left and right of separator line

< 768px

Spacing and dimensionsFollow Application Header, except where noted here
1px separator line, 30px tall, to match ‽ thumbprint
12px padding left and right of separator line
minimum 26px padding between product logo and header icons

Changelog

1.0.1

  • REMOVED: Misleading color in "StatCrunch" example logo.

1.0.0

  • Initial version