Headers

Enables user orientation and seamless movement across the app’s layers, by displaying essential context and navigation capabilities

A three layer approach

There are three types of headers – one for the ‘home’ layer, one for layer 1 pages
and the third for layers 2, 3 and 4. Whilst ‘home’ and layer 1 look similar at a glance
the height differences and labels help the user distinguish which page they are on
as they navigate to where they need to be. The layer 2 header is even more
contextual, with specific titling and the ability to access help, contextually.

Intro graphic

 

Home overview

Home has a specifically designed header which is different to the Layer 1 pages. This helps differentiate it as the personalised layer, and brings OVO personality and branding to the page. To complement the header and the new home page, we are working on new scroll animations.

In-situ: Pay monthly

In-situ pay monthly
  1. Access to account
and/or chat (AVA)
  2. Header composition asset
incorporates balance card

In-situ: PAYG

In-situ payg
  1. Ability to stack multiple cards 
– header background extends 
to accommodate
  2. If more than two cards, maximum height 
of green background aligns with the 
£ on the second card

 

Home specification

 

Standard header

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

It is the primary header and shown whenever the screen is static/not scrolled

Home header - default

Scrolled header

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

It is the scroll state of the header and shown whenever the screen is scrolled – the title fades away and a drop shadow fades in along the bottom edge

Home header - scrolled

With alert

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

Used when an alert is required. Alerts include informative, success,
warning and severe.

Home header - alert

Loading

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

It is the loading state and should be displayed as per this component upon app load, then transition to the full info.

Transition to the alert state, if an alert needs to be shown

Home header - loading

Size and spacing

20px spacing between
max text box width
and buttons

Home header - spacing

Character limits

In the header, show “Hi,” then the first name of the account holder

After 15 characters are used, follow these with “...” to indicate there’s more copy
Copy must not go onto two lines,
so ... must be used earlier than 14 characters, in the event of overspill

Home header - character limits 1
Home header - character limits 2

Anatomy

  1. Header background
  2. Heading
  3. Account button
  4. Chat button
  5. Drop shadow - present on scrolled state only
Home header - anatomy

 

Layer 1 overview

Layer 1 headers are shorter than the home ones,
and the heading should match the name of
the page (if it says ‘bills’ in the global navigation,
the heading should say ‘bills,’ too).

Layer 1 header illustration 1
  1. Name of the layer 
– should match the
global navigation
  2. Access to account
and/or chat (AVA
  3. Drop shadow ON – present 
on ALL layer 1 pages 
– content scrolls behind
Layer 1 header illustration 2
  1. Layer name and buttons hide on scroll and 
re-reveal when scroll is reversed (layer is named/selected in global navigation to aid way finding
  2. Drop shadow ON – present
on ALL layer 1 pages 
– content scrolls behind

 

Layer 1 specification

 

Standard header

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

It is the primary header and shown whenever the screen is static/not scrolled.

Drop shadow is ON at all times.

Layer 1 header - default

Scrolled header

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

Header remains on scroll with the drop shadow ON

Layer 1 header - scolled

Loading

Asset is positioned at x:0 y:0 on the home screen. It is the top layer.

It is the loading state and should be displayed as per this component upon app load, then transition to the full info.

Drop shadow is ON.

Layer 1 header - loading

Hidden actions

Buttons can be hidden if necessary.

Layer 1 header - hidden actions

Size and spacing

Layer 1 header - sizes and spacing

Character limits

In the header, show the name of the layer

Max 21 characters, no headings on a layer 1 page should exceed this.

Layer 1 header - character limits

Anatomy

  1. Header background
  2. Heading
  3. Account button
  4. Chat button
  5. Header shadow
  6. Skeleton loading
Layer 1 header - anatomy

 

Layer 2, 3, 4 overview

As a consistent signifier of focused information and journeys,
the header designed for layer 2 should also be used for layer 3
(and layer 4, if an exceptional circumstance).

Layer 2 headers:

  • Drop shadows are always ON
  • Have Android and iOS variants
  • Heading should be derived from origin card
  • Heading should be short and concise
  • Contextual help button can be turned on
  • Stepped variants can be used within journeys
to remain at the same layer

Note: header extensions should not be used on layer 3 or 4.

Layer 2 header illustration 1
  1. iOS variant
  2. Drop shadow ON – present on ALL layer 2, 3, 4 pages – content scrolls behind
Layer 2 header illustration 3
  1. Android variant
Layer 2 header illustration 2
  1. Access to contextual help
wherever necessary

 

Layer 2, 3, 4 specification

 

Standard header

Asset is positioned at x:0 y:0 on the layer. It is the top layer.

It is the primary header and shown whenever the screen is static/not scrolled. It always has a drop shadow ON.

Layer 2 header - standard header

Scrolled header

Header remains as is on scroll and maintains the drop shadow.

 

Loading

Asset is positioned at x:0 y:0 on the layer. It is the top layer.

It is the loading state and should be displayed as per this component upon app load, then transition to the full info.

Layer 2 header - loading header

Stepped header

Asset is positioned at x:0 y:0 on the layer. It is the top layer.
Steps should represent the number of steps in journey, and turn green to show current step (previous steps remain green). Copy above reflects current and total number of steps.

Layer 2 header - stepped header

Android variants

For layer 2 and 3 pages, there are Android variants of the header – the icon and the position of header adjusts dependent on device

Layer 2 header - android variant

Hidden actions

Buttons can be hidden if necessary

Layer 2 header - hidden actions

Size and spacing

Layer 2 header - siza and spacing

Character limits

After 30 characters truncate.

The page heading should reference 
the origin card and remain consistent throughout onwards journey.

We strongly recommend keeping headings short.

In places where titles are linked to an article for example, this may not be possible, but consider simplifying headings wherever possible.

Layer 2 header - character limits

Anatomy

  1. Back button
  2. Header background
  3. Heading
  4. Chat button
  5. Drop shadow
  6. Skeleton loader
Layer 2 header - anatomy

 

 

Header extensions

A header extension has been created for use at layer 2.
The design is specifically focused on a PAYG use case, currently, with it being the final state of the balance card when transferring from home/layer 1 to layer 2.

For now, the use cases are standalone.

 

Continue to App Cards

Join the community

For the latest features, asking questions and seeing how people are using Element across OVO experiences, join our Google Chat space.

Resources

Support

© 2026 Element v5. Page last updated on Feb 24, 2026, 15:03