Style Guide

Welcome to the Style guide! Please see here the styles created for Furniture Bank and make sure any new pages follow these guidelines.

Header 1

Font family: Roboto| Font Size: 50px | Font Weight: 700 

Header 2

Font family: Roboto| Font Size: 40px | Font Weight: 700 

Header 3

Font family: Montserrat | Font Size: 30px | Color: #1a1a1a

Header 4

Font family: Montserrat | Font Size: 20px | Color: #1a1a1a

This is large Body copy. Use class of  {.text_large} .Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam malesuada leo, aliquam pretium erat bibendum pretium. Nam id ipsum at felis accumsan luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

This is Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam malesuada leo, aliquam pretium erat bibendum pretium. Nam id ipsum at felis accumsan luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet tempor nisl nec mollis. Pellentesque vehicula nunc eget turpis sagittis, non volutpat velit pretium. In interdum arcu a justo porttitor, ac commodo elit facilisis. Nullam efficitur eros eu felis mattis.

Green: #3eb794

Green is an accent colour. It is used primarily to strengthen designs as background colors and highlights. 

Red: #b02b2c

Red is an action color. It is used primarily to call attention to important elements such as call to actions and important headings.

Charcoal: #1a1a1a

Charcoal is a tertiary color. It is used primarily as font colours.

Grey: #eaeae8

Grey is a tertiary color. It is used primarily as a background color.

Imagery

Images should be cutouts whenever possible. 

Images on the left should have a “Slide” animation in the direction of “Right”

Images in the center should have a “Slide” animation in the direction of “Up”

Images on the right should have a “Slide” animation in the direction of “left”

Buttons should appear red with white text on a white background

Buttons should appear white with green text on a green background

Buttons should appear white with red text on a red background

  • Sofas 15% 15%
  • Chairs 5% 5%
  • Dining Rooms 18% 18%
  • TVs 5% 5%
  • Everything Else 42% 42%

%

Executive Director

%

Test

Days

%

Test

%

Executive Director

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Careers

Latest
Loading

TEST

TEST

TEST

#REUSE

HOUSING

TEST

TEST

TEST