The Tile Shop Logo

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 Instagram Pinterest Houzz


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 (by markup styling)

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



Default Headline Styles (by class styling)

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)


(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