Website Style Guide

This is a guide to the global styles on the TileShop.com website. Note that any individual template or component can override these styles as needed.

See Design Style Guide

Colors

Text Color
(#3d3935)

White
(#fff)

Light Gray
(#efeeef)

????
(#333)

and lots more...

Fonts

Lato is the main font. Available in font weights: 300, 400, 700, 900

BemboStd is another font that is on the website.

BemboStd-Italic is another font that is on the website.

BemboStd-Semibold is another font that is on the website.

BemboStd-SemiboldItalic is another font that is on the website.

BBemboStd-BoldItalic is another font that is on the website.

BemboStd-ExtraBold is another font that is on the website.

BemboStd-ExtraBoldItalic is another font that is on the website.

BemboTitlingMTStd is another font that is on the website.

BemboTitlingMTStd-Italic is another font that is on the website.

Font awesome is also used for font icons

Typography

Normal Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. BOLD TEXT sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ITALIC TEXT quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-- Headlines --

Note that the headline sizes change between desktop and mobile.

Default Headline Styles

Heading 1 Lorem ipsum dolor sit amet.

Heading 2 Lorem ipsum dolor sit amet

Heading 3 Lorem ipsum dolor sit amet

Heading 4 Lorem ipsum dolor sit amet

Heading 5 Lorem ipsum dolor sit amet

Styled Headline Styles

Heading Jumbo Lorem ipsum dolor sit amet.

Heading 1 Lorem ipsum dolor sit amet.

Heading 2 Lorem ipsum dolor sit amet

Heading 3 Lorem ipsum dolor sit amet

Heading 4 Lorem ipsum dolor sit amet

Heading 5 Lorem ipsum dolor sit amet

Styled Alt Headline Styles

Heading Jumbo Alt Lorem ipsum dolor sit amet.

Heading 1 Alt Lorem ipsum dolor sit amet.

Heading 2 Alt Lorem ipsum dolor sit amet

Heading 3 Alt Lorem ipsum dolor sit amet

Heading 4 Alt Lorem ipsum dolor sit amet

Heading 5 Alt Lorem ipsum dolor sit amet

-- Links --

This is an inline link

Text Hyper Links

Normal	Small	Large
Black Button	Black Button	Black Button
Outline Black Button	Outline Black Button	Outline Black Button
White Button	White Button	White Button

Action Buttons

Normal	Small	Large

Disabled

BlackButton

Outline Black Button

White Button

Default button Styles (Not to be used)

Default Button
(should not be used)

(should not be used)

Breakpoints

Mobile = - 0-767px
Tablet = 768-991px
Desktop = 992-1199px
(not shown) XL Desktop = 1200px+
Note: individual components may use additional breakpoints, but this is the recommended values