1NAVIGATION

Top line navigation always sits in an orange header, with text links set in VTC Martin in black and a white hover and active state.

Layouts differ slightly between platforms (PE.com, Milano and Pay at Table), but the primary navigation stays the same throughout, so it reads as one brand wherever you land.

2LOGO POSITIONING
IN HEADERS

Ideally the logo sits centrally in the orange header.

Some interfaces don't allow for that. In Pay at Table, once a restaurant has been selected, its location appears in the menu bar to the right of the logo. Centring both wouldn't look right, the bar can't be made any taller, and there isn't room to stack one above the other.

So in cases like this the logo moves to the left, which keeps the header balanced without losing either element.

3CTA HIERARCHY AND
INPUT FIELDS

There are two types of CTA: primary, for the most affirmative action, and secondary, for anything of lesser importance.

Their colours are summarised below, and every CTA uses Nunito Sans Regular, the brand's functional ‘detail’ typeface.

They come in two widths. ‘Standard’ is the default and by far the most common. ‘Wide’ only appears alongside input fields and runs to the same width as them, so forms line up cleanly.

On the odd occasion a button has to sit in an orange footer, a yellow button would get lost, so a white Primary Exception CTA is used there instead.

4MODAL POP UP WINDOWS

Modal pop-ups are always white, with headlines in VTC Martin and body copy in Quadraat Pro, both in black.

They appear on a dark overlay, so the message stands out clearly from the menu behind it.

CTAs inside them follow the same primary and secondary hierarchy as everywhere else.

5MENU LAYOUTS, COLOURS
AND HIERARCHY

Headers and footers are orange on every platform, from the websites to table booking. Secondary information, such as collection times (see sections 6 and 7) or sub navigation, sits in a blue strip beneath.

Text links at both levels of navigation are black, with a white hover and active state. Primary links are set in VTC Martin and secondary links in Quadraat Pro, so the hierarchy is clear at a glance.

6CLICK AND COLLECT MENU
TYPOGRAPHY AND COLOUR

The click and collect menus on both the PizzaExpress and Milano websites have their main navigation on the page, down the left hand side.

To stay consistent with the brand guidelines, every H1, such as the ‘Menu’ header and the ‘Pizza’ category header, is set in VTC Martin. The navigation is set in Quadraat Pro, with a yellow background on hover and for the active item.

Menu cards have a green keyline and green icons.

7HEADER/FOOTER VARIATIONS

Headers and footers vary between some platforms.

Milano and PizzaExpress have different navigation, for example, but in both the footer links are set in VTC Martin in black with a white hover and active state, which keeps them recognisably part of the same system.