mCommerce Design Guidelines

Last updated 14/10/14

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.

Based on a 640px wide mobile the grid follows a 12 column layout, each column being 36px in width. The margins and gutters vertically and horizontally span a 16px width.

Typography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Below you can find different examples of how we use the Argos typeface across the eCommerce channel.

  •   Font Size Usage
  • Main Heading Argos Book 20px Main page titles
  • Subheading Argos Condensed Extra Bold 20px PDP table cell section titles
  • Trolley Titles Argos Book 15px Titles on TLP
  • Product Titles Argos Book 15px Product titles
  • £999.99 Argos Compressed Bold 25px Main price size across site
  • £999.99 Argos Compressed Bold 30px Price size on Trolley List Page
  • was £999.99 Argos Book Italic 13px Was pricing across site
  • SAVE £999.99 Argos Condensed Extra Bold 16px Saving messaging
  • £999.99 Argos Condensed Extra Bold 25px Saving prices
  • Body text Arial / Helvetica 12px General body text across site
Download fonts

Copy and paste the styles below into your CSS document to correctly embed the Argos fonts into your page. You can also download the font pack from the button on the right hand side.

Show/hide CSS

@font-face { font-family: argosbook; src: url(../fonts/argos-book-webfont.eot);	src: url(../fonts/argos-book-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-book-webfont.woff) format("woff"), url(../fonts/argos-book-webfont.ttf) format("truetype"), url(../fonts/argos-book-webfont.svg#argosbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argosbookitalic; src: url(../fonts/argos-bookitalic-webfont.eot); src: url(../fonts/argos-bookitalic-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bookitalic-webfont.woff) format("woff"), url(../fonts/argos-bookitalic-webfont.ttf) format("truetype"), url(../fonts/argos-bookitalic-webfont.svg#argosbookitalic) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscompressedbold; src: url(../fonts/argos-compressedbold-webfont.eot);	src: url(../fonts/argos-compressedbold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-compressedbold-webfont.woff) format("woff"), url(../fonts/argos-compressedbold-webfont.ttf) format("truetype"), url(../fonts/argos-compressedbold-webfont.svg#argoscompressedbold) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedbook; src: url(../fonts/argos-condensedbook-webfont.eot); src: url(../fonts/argos-condensedbook-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedbook-webfont.woff) format("woff"), url(../fonts/argos-condensedbook-webfont.ttf) format("truetype"), url(../fonts/argos-condensedbook-webfont.svg#argoscondensedbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedextrabold; src: url(../fonts/argos-condensedextrabold-webfont.eot); src: url(../fonts/argos-condensedextrabold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedextrabold-webfont.woff) format("woff"), url(../fonts/argos-condensedextrabold-webfont.ttf) format("truetype"), url(../fonts/argos-condensedextrabold-webfont.svg#argoscondensedextrabold) format("svg");	font-weight: 400; font-style: normal }
@font-face { font-family: argosbold; src: url(../fonts/argos-bold-webfont.eot); src: url(../fonts/argos-bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bold-webfont.woff) format("woff"), url(../fonts/argos-bold-webfont.ttf) format("truetype"), url(../fonts/argos-bold-webfont.svg#argosbold) format("svg");	font-weight: 400; font-style: normal }

.argosbook, .argosbookitalic, .argoscompressedbold, .argoscondensedbook, .argoscondensedextrabold, .bodytext { color: #040404; text-shadow: none; font-weight: normal; }
	
.argosbook { font-family: argosbook; }
.argosbookitalic { font-family: argosbookitalic; }
.argosbold { font-family: argosbold; }
.argoscompressedbold { font-family: argoscompressedbold; }
.argoscondensedbook { font-family: argoscondensedbook; }
.argoscondensedextrabold { font-family: argoscondensedextrabold; }
.bodytext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

.mainheading { font-size: 20px; }
.subheading { font-size: 20px; }
.prodtitle { font-size: 15px; }
.mainprice { font-size: 25px; }
.tlpprice { font-size: 30px; }
.tlptitles { font-size: 18px; }
.wasprice { font-size: 13px; color: #777; font-family: argosbookitalic; }
.saving { font-size: 16px; color: #EE3124; }
.savingprice { font-size: 25px; color: #EE3124; }
.headerlinks { font-size: 13px; }

Buttons Global eComm mComm iPhone iPad Android Mobile Android Tablet

Outlined below are the different button styles (and associated markup) that we use across the eCommerce platform as well as rules for using them.

Primary Button
<a class="button primary">Primary Button</a>
Secondary Button
<a class="button secondary">Secondary Button</a>
Tertiary Button
<a class="button">Tertiary Button</a>
Turn on 1 Click Reserve
<a class="button">Tertiary Button</a>
1 Click Reserve
<a class="button">Tertiary Button</a>

As you can see, we use the button class on any element which is to be used as a button, and then add an additional class to adjust it to either a primary or secondary button style.

Below are the CSS styles which show the different classes. Overrides should be used where necessary for positioning.

Show/hide CSS

General button style

.button { 
  background-color: #FFF;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  height: 30px;
  display: inline-block;
  float: left;
  font-family: argoscondensedextrabold; 
  color: #333; 
  text-transform: uppercase; 
  padding: 0 10px; 
  font-size: 15px; 
  line-height: 30px; }

Primary style

.primary { 
  height: 40px; 
  font-size: 20px; 
  background-color: #00AA50; 
  color: #FFF; 
  border: none; 
  border-bottom: 3px solid #CCC; 
  line-height: 40px; 
  padding: 0 15px; }

Secondary style

.secondary { 
  color: #F7941D; }

Active (hit) style

.button:active { 
  background-color: #F7941D;
  color: #FFF; }

Fields eComm mComm iPhone iPad Android Mobile Android Tablet

Field style and states are demonstrated in this section.

Primary submit button
<input type="text" style="float: left;"> <a class="button primary fieldprimary">Primary submit button</a>
Standard submit button
<input type="text" style="float: left;"> <a class="button field">Standard submit button</a>

Buttons which are displayed alongside fields should have an additional class applied which make the heights match.

Show/hide CSS

input[type=text], select {
  height: 35px;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  font-family: argosbook;
  padding: 0 10px;
  margin-bottom: 15px;
  font-size: 20px; }

input[type=text]:focus {
  margin: 1px 1px 15px 1px;
  border: none;
  border-bottom: 3px solid #F7941D;
  outline: none; }

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  input[type=text]:focus {
    margin: 1px 3px 15px 3px; }}
  

Inline error message for the form field.

Please enter a valid email address
<input type="text" value="Email address" onfocus="this.value = this.value=='Email address'?'':this.value;" onblur="this.value = this.value==''?'Email address':this.value;" class="formError">
<div class="formErrorText">Please enter a valid email address</div>

Inline validation message for the form field.

<input type="text" value="email@argos.co.uk" class="formValid">

Style for dropdown (select) lists below. Note that the width should vary as per the design.

Show/hide CSS

.dropdown { 
  width: 140px; overflow: hidden; border-right: 1px solid #CCC; }
.dropdown select { 
  width: 160px; background: transparent url("../images/dropdown.png") no-repeat 80% 50%; }
.dropdown select:hover { 
  cursor: pointer; background: transparent url("../images/dropdown_focus.png") no-repeat 80% 50%; }
.dropdown option {
  padding: 10px; }
 
*Note: Change widths depending on usage and design.

Radio Buttons eComm mComm iPhone iPad Android Mobile Android Tablet

Radio button styles and markup can be found below.


Show/hide CSS

input[type=radio] {
  display:none; }

input[type=radio] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/rad_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=radio]:checked + label {
  background: url("../images/rad_on.png") no-repeat; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Checkboxes eComm mComm iPhone iPad Android Mobile Android Tablet

Checkbox styles and markup can be found below.


Show/hide CSS

input[type=checkbox] {
  display:none; }

input[type=checkbox] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/check_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=checkbox]:checked + label {
  background: url("../images/check_on.png") no-repeat; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Note that the above CSS for radio buttons and checkboxes can be combined to save repeating code;

input[type=checkbox], input[type=radio] {
  display:none; }

input[type=checkbox] + label, input[type=radio] + label {
  padding-left:23px;
  height:18px; 
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
  background: url("../images/check_off.png") no-repeat;
  font: 14px normal Helvetica, Arial, sans-serif; }

input[type=checkbox] + label { 
  background: url("../images/check_off.png") no-repeat; }

input[type=checkbox]:checked + label {
  background: url("../images/check_on.png") no-repeat; }

input[type=radio] + label {
  background: url("../images/rad_off.png") no-repeat; }

input[type=radio]:checked + label {
  background: url("../images/rad_on.png") no-repeat; }

label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

Iconography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Download icons

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

Location Close Refine Refresh Sort by... Reset Search Send Share Trolley 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


App-only Icons

Menu Back Edit More... Accept Trash / Delete Share Add to Wishlist Remove from Wishlist Browse Saved Cards One-man Delivery Terms Your Details


App sliding tray icons

Less More Account Account
(Signed in)
Argos Scan Feedback Home Information More... Pricecuts Reservations Settings Shortlist Sign out Store Location
Download icons

The download pack (see button on right hand side) contains assets at four densities which covers desktop, iOS and Android apps. For desktop, generally use @1x sizes.

Loading Wheel Global eComm mComm iPhone iPad Android Mobile Android Tablet

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

Show/hide CSS

.loading {
  -webkit-animation:spin 1.5s linear infinite;
  -moz-animation:spin 1.5s linear infinite;
  animation:spin 1.5s linear infinite;
  width: 60px;
  height: 60px; }
  
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Tabs Global eComm mComm iPhone iPad Android Mobile Android Tablet

New tabs style in green and white colour.

  • Available in 3 days at Bletchley store
  • Order now for delivery to MK92NW within 2 days
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Collection</label>
<div id="tab-content1" class="tab-content">
<div class="pdpInstock">
<div class="pdpTick"></div>
<div class="pdpText"><strong>Available</strong> in 3 days at Bletchley store</div>
</div>
</div>
</li>

<li class="lastTab">
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Delivery</label>
<div id="tab-content2" class="tab-content">
<div class="pdpInstock">
<div class="pdpTick"></div>
<div class="pdpText"><strong>Order now</strong> for delivery to <strong>MK92NW</strong> within 2 days</div>
</div>
</div>
</li>
</ul>

Show/hide CSS

.tabs { width:290px; height:130px; position:relative; float:left; }
.tabs li { float: left; display: block; list-style:none; width:50%;}
.tabs li.lastTab label { float:right;}

.tabs label {
	display: block;
	font-weight: normal;
	text-transform: uppercase;
	background: #8e44ad;
	cursor: pointer;
	position: relative;
	top: 3px;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.tabs input[type=radio] + label, .tabs input[type=radio]:checked + label { background-image:none; padding:0px 8px 0px 8px; width:84%; text-align:center; }

.tabs [id^="tab"] + label {
	border-top:2px solid #ccc;
	border-right:2px solid #ccc;
	border-left:2px solid #ccc;
	letter-spacing:1px;
	height:32px;
	font-family: argoscondensedextrabold;
	font-size:15px;
}

.tabs [id^="tab"]:checked + label {
	top: 0;
	z-index:5;
	height:34px;
	color:#8fc73e;
	border-top:2px solid #8fc73e;
	border-right:2px solid #8fc73e;
	border-left:2px solid #8fc73e;
	border-bottom:0px solid #ffffff;
	background-color:white;
	-moz-transition: all 0s ease-in-out;
	-o-transition: all 0s ease-in-out;
	-webkit-transition: all 0s ease-in-out;
	transition: all 0s ease-in-out;
}

/* for ecomm hover state 
.tabs label:hover {
	color:#f27433;
}
*/

.tabs input[type="radio"] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {display: block;}

.tabs .tab-content {
	z-index: 2;
	display: none;
	overflow: hidden;
	width: auto;
	font-size: 12px;
	line-height: 18px;
	padding: 8px;
	position: absolute;
	top: 34px;
	left: 0;
	background: #fff;
	border:2px solid #8fc73e;
}

.tabs .pdpInstock { width:270px; float:left; margin:10px 0 0 0px;}
.tabs .pdpInstock .pdpTick { width:25px; height:50px; margin-right:10px; background: url("../images/icon_tick_small@2x.png") no-repeat; float:left; }
.tabs .pdpInstock .pdpText { font-family:argosbook; font-size:15px; margin-top:5px;}
.tabs strong { font-family:argosbold;}

Generic tabs

<ul class="tabs genericTabs">
<li>
<input type="radio" name="tabswhite" id="tab3" checked />
<label for="tab3">Tab 1</label>
<div id="tab-content3" class="tab-content">
</div>
</li>

<li class="lastTab">
<input type="radio" name="tabswhite" id="tab4" />
<label for="tab4">Tab 2</label>
<div id="tab-content4" class="tab-content">
</div>
</li>
</ul>

Show/hide CSS

.genericTabs { height: 80px;}

.genericTabs .tab-content {
	border: 1px solid #cccccc;
	width: 268px;
	}
	
.genericTabs  [id^="tab"]:checked + label {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	}
.genericTabs [id^="tab"]:checked + label {
	color: #040404;
	}
	
.genericTabs [id^="tab"] + label {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	}	

Rating stars Global eComm mComm iPhone iPad Android Mobile Android Tablet

Rating stars for PLP / PDP and any other areas across the channel

<div class="starContainer" style="margin-bottom:10px; clear:both;">
      	<div class="s10"></div><div class="s10"></div><div class="s10"></div><div class="s5"></div><div class="s0"></div>
      </div>

Show/hide CSS

.starContainer { width:150px; height:30px; float:left;}
.s10 { width:28px; height:27px; float:left; margin-right:2px; background: url("../images/star_full.png") no-repeat;}
.s5 { width:28px; height:27px; float:left; margin-right:2px; background: url("../images/star_half.png") no-repeat;}
.s0 { width:28px; height:27px; float:left; margin-right:2px; background: url("../images/star_empty.png") no-repeat;}