RealMe page elements

Login - dark

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative dark design. 

This is the preferred design, as it answers customers' commonly asked questions about the use of the RealMe login service.

The login box is designed to be 250px to 350px wide. It is fluid, so more or less text can be added to the <p> tag if the text needs to be changed.

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

When the RealMe login function is available on multiple webpages, this webpage header design can also be used.

This component has the same functionality as the primary design, with the question mark triggering the What's RealMe hover text.

 Under special circumstances, the use of this smaller secondary design may be acceptable. It is designed to be 125px to 250px wide.

Login - light

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative light design. 

This is the preferred design, as it answers customers' commonly asked questions about the use of the RealMe login service.

The login box is designed to be 250px to 350px wide. It is fluid, so more or less text can be added to the <p> tag if the text needs to be changed.

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

When the RealMe login function is available on multiple webpages, this webpage header design can also be used.

This component has the same functionality as the primary design, with the question mark triggering the What's RealMe hover text.

 Under special circumstances, the use of this smaller secondary design may be acceptable. It is designed to be 125px to 250px wide.

Assert - standard

The standard light blue colour is recommended, but if this does not suit the webpage design, there are alternative dark or light designs.

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

 Download this bundle  that contains html, css and images and choose the standard or alternative colours. 

Assert - dark

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative dark design.

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

Assert - light

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative light design.

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

Assert - What's RealMe

Assert pop-up

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

If the website users may not know the difference between RealMe login and RealMe verified identity, then consider making the placement of Have you already verified your identity with RealMe? more prominent - such as before the assert button.

Discuss your organisation's process flow expectations with the RealMe integration team. If this is an opportunity to encourage individuals to obtain verified identity then make sure that this is promoted. Alternatively, if the default approach is to fallback to a manual identity proofing process, then promotion may not be useful.

In general, include as much information as appropriate without diverting the user to the RealMe website. For verified identity and address, use this page - https://www.realme.govt.nz(external link)