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.
We’re never afraid to do things differently, if that’s the right thing do to. We love a challenge. We’re always open to new ideas.
We cram passion and vitality into everything we do. It can be infectious, but never misplaced.
We’re always finding better ways. We use insight to adapt, get better, offer more. We’re not interested in standing still. We’re often surprising.
It’s shopping. It’s Argos. It’s fun. We look on the bright side, and love raising a smile.
At Argos we value the following, so more customers choose us more often.
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.
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.
The colours below are selected from the secondary Argos colour palette and should be used for secondary UI elements on our digital channels.
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.
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.
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.
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.
You can download the entire set of fonts, including web fonts, by clicking on the button to the right hand side.
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
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
More about Argos Credit OffersExample tooltip
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.Primary Button Turn on 1 Click Reserve 1 Click Reserve Secondary Button Tertiary Button
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.
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.
A divider is used to break up pieces of content and give clear indications of separate areas. The divider should be 1px solid #CCCCCC