Rapsedi Web Ordering
System Redesign

Introduction

The purpose for this document is to establish guidelines and show visual examples of how we would like our user interface to look. All specifcations and examples are not concrete and flexibility for the developer is granted. The goal is to provide consistency in information hierarchy and layout.

This document is broken up into three sections:

  1. Style Guidelines
  2. Redlines/Specifications
  3. Primary User Taskflow and Page Mock-up/Skins Examples

Style Guide

Typography

Header 1

Size: 24px
Color: #196dea
Font-Weight: 500
Font-Family: Helvetica Neue

Header 2/Field Description

Size: 14px
Color: #7a7a7a
Font-Weight: normal
Font-Family: Helvetica Neue

Body Copy/User Input Fields

Size: 18px
Color: #000
Font-Weight: normal
Font-Family: Helvetica Neue

Typography Hierarchy Example:

Style Guide

Layout

All rows have rounded corners with a radius of 2px.

Body Background Color
#f5f5f5

All Other Areas
Background Color
#fff

Horizontal and Vertical Rules are:
1px wide
color:#bdbdbd

Islands have a white background with a 2px size, 2px distance light grey drop shadow.

Style Guide

Buttons

CSS Style:

-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4f90f1), color-stop(1, #0f66e9));
background:-moz-linear-gradient(top, #4f90f1 5%, #0f66e9 100%);
background:-webkit-linear-gradient(top, #4f90f1 5%, #0f66e9 100%);
background:-o-linear-gradient(top, #4f90f1 5%, #0f66e9 100%);
background:-ms-linear-gradient(top, #4f90f1 5%, #0f66e9 100%);
background:linear-gradient(to bottom, #4f90f1 5%, #0f66e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4f90f1’, endColorstr=’#0f66e9’,GradientType=0);
background-color:#4f90f1;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:14px;
padding:4px 20px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;

CSS Style:

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f66e9), color-stop(1, #4f90f1));
background:-moz-linear-gradient(top, #0f66e9 5%, #4f90f1 100%);
background:-webkit-linear-gradient(top, #0f66e9 5%, #4f90f1 100%);
background:-o-linear-gradient(top, #0f66e9 5%, #4f90f1 100%);
background:-ms-linear-gradient(top, #0f66e9 5%, #4f90f1 100%);
background:linear-gradient(to bottom, #0f66e9 5%, #4f90f1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0f66e9’, endColorstr=’#4f90f1’,GradientType=0);
background-color:#4f90f1;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:14px;
padding:4px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;

Style Guide

Header &
Navigation Links

Header has a white background
with a 2px light grey drop shadow.

background-color: #ffffff;
border-radius: 2px;
border-style: solid 1px;
border-color:rgba(0,0,0,0.15)
-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);

Navigation links are:

font-family: helvetica;
font-weight: 800;
font-size: 10px;
color: #000;
text-decoration: none;
display: inline;

Navigation links hover states are:

font-family: helvetica;
font-weight: 800;
font-size: 10px;
color: #000000;
text-decoration: none;
display: inline;

Spacing between links are:

25px

Redlines/Specs

Islands

Redlines/Specs

Island Contents

Redlines/Specs

Forms

Redlines/Specs

Products/Items

Redlines/Specs

Tables

Primary User
Task Flow

Login Page

Find Item Page

Item Detail Page

Check Out Page

Review/Submit Order

Confirmation Page