Argos Design Guidelines

Brand Personality

This is how we portray our brand externally, so customers are aware of what we stand for. These ideas form the core of our new Brand Identity.

Our Values

At Argos we value the following, so more customers choose us more often.

Argos Logo

Download logoThe new Argos logo should replace any instance of the old 'rectangular' version. You can download a number of different sizes from the button on the right hand side.

The 'A' logo on the right hand side should only be used in the app channels or when referring to the Argos apps elsewhere.

Be sure to follow the guidelines below when making use of either the standard or app logos.

Main UI Colour Palette

The colours below are selected from the new Argos colour palette and should be used for main UI elements on our digital channels. Other colours are also available, but should be reserved for BAU elements and other inpage graphics.

Secondary Colour Palette

The colours below are selected from the secondary Argos colour palette and should be used for secondary UI elements on our digital channels.

White World

Download White World We’ve created a space where anything can happen. Our ‘white world’ captures all the energy and excitement of Argos. It’s where our products come to life. It is a three-dimensional environment with white light shining onto it.

Layout

Download Grids Designing within a grid space is an old tradition that finds its roots in the need for structure and balance. Users should be left with the impression that things are easy to handle if the order employed at crafting them suggests so. The grid makes it possible to bring all the elements of design — type characters, imagery, icons and colour — into a formal relationship with each other. Building a horizontal grid is of course a fundamental step, but creating vertical rhythm is equally important. The grids below show how the grid will effect both UI elements and typography.

The grids follow a 64px column width, 12px margin top, bottom, left, right and an 18px gutter. The baseline follows a 6px height for vertical elements. The leading of any typographic element therefore needs to be a multiple of the 6px height. For example a 30pt main heading will have a leading of 36pt.

Touch Targets

The minimum touch target size is ---- on a non retina display and ---- on a retina. Keep this in mind when spacing icons or buttons in a layout. The touch targets shouldn’t overlap. By having a minimum touch target this ensures that users will be able to reliably and accurately target them with their fingers or thumbs if larger touch targets are needed. If you design your elements to be at least ------ high and wide, you can ensure that you strike a good compromise between overall information density and targetability of UI elements.

Typography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Here you can see the different fonts which we use across the Argos digital channels. For specific usage, check the page of the channel you are working on by clicking on the quicklinks above.

• Argos Book
• Argos Book Bold
• Argos Book Italic
• Argos Condensed Book
• Argos Compressed Bold
• Argos Condensed Extra Bold

You can download the entire set of fonts, including web fonts, by clicking on the button to the right hand side.

Text Links Global eComm mComm iPhone iPad Android Mobile Android Tablet

Text Links are used in places where buttons are not appropriate. The size of the text link should be the same as the text around it, it should aslso be underlined. The exception to this are the footer links.

Here is an example of a text link

Tool-tips Global eComm mComm iPhone iPad Android Mobile Android Tablet

Tool tips are displayed as an icon and can be attached next to any element. When you hover over the element a box will appear next to it giving the customer more information about it.

Below is an example of a tooltip. The icon on the tooltip must always be the same but sizes of the icon and pop-up box may vary depending on placement. The tooltip box has a solid border at 1px #CCCCCC

Buttons Global eComm mComm iPhone iPad Android Mobile Android Tablet

Outlined below are the different button styles that we use across the various channels.

For specific sizes, markup and styling check the page of the channel that you are working on.

Iconography Global eComm mComm iPhone iPad Android Mobile Android Tablet

In this section we have included all the icons used across the site. You can also download a pack of these from the button on the right hand side.

Generic Icons

Close Search Trolley Location Refine Refresh Sort by... Reset Send Share Home Delivery Store Collection Zoom Add to Wishlist Remove from Wishlist Select chevron Cross Tick Delivery Slot Settings / Options Delivery Instructions Home Delivery Two-man Delivery Order Summary Details

Loading Wheel Global eComm mComm iPhone iPad Android Mobile Android Tablet

New loading wheel replaces all instances of old blue version and should spin once per 1.5 seconds. Size should be set on a case by case basis to best fit the space available.

Dividers Global eComm mComm iPhone iPad Android Mobile Android Tablet

A divider is used to break up pieces of content and give clear indications of separate areas. The divider should be 1px solid #CCCCCC