Style Guide

Alter global typography styles and color palette based on the Room to Breathe brand kit.

Primary Palette

Brand Color
#4F9396
Brand Color
#7EC1C4
Brand Color
#E8F7F8
Brand Color
#ffffff
Brand Color
#B27B49

Typography Palette

Black
#000000
Grey
#555

Category Tag Palette

Category
#b27b49
Category
#4f9396
Category
#000000
Category
#7ec1c4

Typography Styles

Headings

Aa Bb Cc Dd Ee

Display
64

Aa Bb Cc Dd Ee

Heading 1
56

Aa Bb Cc Dd Ee

Heading 2
44

Aa Bb Cc Dd Ee

Heading 3
36

Aa Bb Cc Dd Ee

Heading 4
24
Aa Bb Cc Dd Ee
Heading 5
20
Aa Bb Cc Dd Ee
Heading 6
20

Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
22px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Typography Styles

Lists & Quote

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
List
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
List
Numbered
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.
Quote

Button Styles

Button Primary

Submit
Button Primary
Submit
Button Primary
Submit
Button Primary
Submit
Button Primary

Figure & Figure Caption

A smaller heading

Condimentum penatibus fermentum porttitor vestibulum feugiat sit dui. Magnis at nisl elit leo nam. Egestas semper velit mattis aenean adipiscing. Pellentesque laoreet lectus in ipsum amet molestie cum elementum. Blandit tortor, adipiscing nunc dolor aliquet. Justo, ac eu fringilla et viverra. Nec velit, sit condimentum eget vel, proin. Cras justo, vestibulum lacinia mauris arcu ac volutpat volutpat pellentesque. Ultrices facilisis elit orci elit quisque suspendisse. Donec est volutpat ornare ultrices nunc, purus. In luctus tristique varius curabitur. Elementum sed sagittis, ultrices eget libero, pulvinar. Home viverra cursus libero tempus urna commodo fermentum. Pharetra ut pretium, lectus fermentum cras lobortis at facilisis id.

Here you can add a caption

A smaller heading

Condimentum penatibus fermentum porttitor vestibulum feugiat sit dui. Magnis at nisl elit leo nam. Egestas semper velit mattis aenean adipiscing. Pellentesque laoreet lectus in ipsum amet molestie cum elementum. Blandit tortor, adipiscing nunc dolor aliquet. Justo, ac eu fringilla et viverra. Nec velit, sit condimentum eget vel, proin. Cras justo, vestibulum lacinia mauris arcu ac volutpat volutpat pellentesque. Ultrices facilisis elit orci elit quisque suspendisse. Donec est volutpat ornare ultrices nunc, purus. In luctus tristique varius curabitur. Elementum sed sagittis, ultrices eget libero, pulvinar. Dictum nullam viverra cursus libero tempus urna commodo fermentum. Pharetra ut pretium, lectus fermentum cras lobortis at facilisis id.