Basic css settings for

developers
March, 2014

The Grid
1168 px

Grid

16 px

Columns and margins

800 px

64 px

240 px

32 px

Columns

32 px

Grid Variations.

Columns can be further divided.

Option #2

Option #3

Grid Variations

Option #1

The Baseline

8px baseline grid to help with vertical alignment of page components and
help to create vertical rhythm on the page.

Grid Variations

8 px

Open Sans Light

A BC D E F G H I J K LMN OPQR S TU VWX YZ
A bcde f g h i j k l m n op q rstuvw xyz
0 1 2 3 456789! = $%? &()

Roboto Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklmnopqrstuvwxyz
0123456789!=$%?&()

Arial Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklmnopqrstuvwxyz
0123456789!=$%?&()

Open Sans Regular

A B CDE F G H I J K L MNOP Q R S T U V W XYZ
A bcde f g h i j k l m n o p q r s t u vwxyz
0 1 2 3 456789! =$%? & ( )

Roboto Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklmnopqrstuvwxyz
0123456789!=$%?&()

Arial Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklmnopqrstuvwxyz
0123456789!=$%?&()

Open Sans Semibold

ABC D E F G H I J KLM N O P Q RS TU VWXYZ
Ab c d e f g h i j kl mno pqrs tuv wx y z
0 1 2 3 456789! =$% ?& ()

Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklmnopqrstuvwxyz
0123456789!=$%?&()

Open Sans Bold

A BC DEF G H I J KL M NO PQ R S TUVW XYZ
A b c d efg h i j k l mn o pqrstu vw xyz
0 1 2 3 456789! =$%? &()

Fonts

Fonts

Fonts
H1.

Open Sans Light

[font-size:32px line-height: 40px color:#000000 text-align:left margin: 32px 0 32px 0]

Open Sans Light

[font-size:28px line-height: 32px color:#000000 text-align:left margin: 32px 0 32px 0]

Open Sans Light [alternative]

[font-size:28px line-height: 32px color:#ff7e2e text-align:left margin: 32px 0 32px 0]

H3. Roboto Light

[font-size:22px line-height: 32px color:#000000 text-align:left margin: 0]

Roboto Light [alternative]

[font-size:22px line-height: 32px color:#ff7e2e text-align:left margin: 0]

Fonts

H2.

Fonts
H4. Roboto bold
[font-size:22px line-height: 32px color:#666666 text-align:left margin: 0]

H5. Roboto Bold

Fonts

[font-size:18px line-height: 24px color:#000000 text-align:left margin: 0]

H6. Roboto Light

[font-size:16px line-height: 24px color:#000000 text-align:left margin: 0]

paragraph.

Roboto Regular

small font.

Open Sans Regular

[font-size:14px line-height: 24px color:#4d4d4d text-align:left margin: 0]

[font-size:12px line-height: 16px color:#888888 text-align:left margin: 0]

Spacing
32 px

32 px

Title header 32px

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et

32 px

Lorem Ipsum es simplemente el texto de

relleno de las imprentas y archivos de
texto. Lorem Ipsum ha sido el texto de
relleno estndar de las industrias desde
el ao 1500, cuando un impresor (N. del
T. persona que se dedica a la imprenta)
desconocido us una galera de textos y
los mezcl de tal manera que logr
hacer un libro de textos especimen.

dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet

Sed do eiusmod tempor incididunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.

Spacing

elit, sed do eiusmod tempor incididunt ut labore et

Accelerate

Revenue Management

Business Agility

Innovate

Business Process
Optimization Big Data

Customer Exprience
Management

Optimize

Security & Privacy

Machine 2 Machine
Wireless

Inform

Digital Services
Mobile & Smartphone

Data Analytics
Big Data

Cable

Innovation Social Media

Announcements

Cloud Virtualization
Cloud

Events

Agile IT

Transformation

Product Lifecycle

Frameworx

Partner/Vendor
Management

Training

Icons

Icons

96x96 px

72x72 px

48x48 px

32x32 px

24x24 px

MORE INFORMATION
Branding Documentation:
https://drive.google.com/a/mercurycreative.net/folderview?id=0B9Eon7aPC05fb1hVejJ5VjF4dlE&usp=sharing

Icon sizes

Recommended icon sizes

Links
On rollover links should change colour, and underline if under 24px.
Link Normal

a: [font: roboto regular size: under 24px color: #ff7e2e text-decoration: none]

Link Pressed

hover: [size: under 24px color: #ff7e2e text-decoration: underline]

a: [font-family: opensans bold font-size: 14px box-shadow: 0 1px 1px #e6e6e6]

Default
Border: 1px #b3b3b3
Color: #b3b3b3

Normal

Primary

Backgrund-color:
#b3b3b3
Color: #ffffff

Backgrund-color:
#ff7e2e
Color: #ffffff

Secondary
Border: 1px #ff7e2e
Color: # ff7e2e

Success

Danger

Backgrund-color:
1px #29abe2
Color: #ffffff

Backgrund-color:
#bc001e
Color: #ffffff

Success

Danger

Backgrund-color:
1px #29abe2
Color: #ffffff

Backgrund-color:
#bc001e
Color: #ffffff

box-shadow:
0 2px 0 #006699

box-shadow:
0 2px 0 #660000

Pressed hover: [font-family: opensans bold font-size: 14px]

Default
Border: 1px #999999
Color: #999999
box-shadow:
0 2px 0 #999999

Normal

Primary

Backgrund-color:
#999999
Color: #ffffff

Backgrund-color:
#ff7e2e
Color: #ffffff

box-shadow:
0 2px 0 #666666

box-shadow:
0 2px 0 #c64106

Secondary
Border: 1px #ff6633
Color: #ff6633
box-shadow:
0 2px 0 #993300

Links

Normal

Images
Slides, banners and backgrounds could be a variety
of shapes and sizes as long as there is alignment
with the grid.

Images

Recommend using 16:9 images at any size that aligns

with the grid.