Style Guide

A general style guide showing off the styles used in Pediment's Shopify theme.

Typography

H1. The quick brown fox jumps over the lazy dog

H2. The quick brown fox jumps over the lazy dog

H3. The quick brown fox jumps over the lazy dog

H4. The quick brown fox jumps over the lazy dog

H5. The quick brown fox jumps over the lazy dog
H6. The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna odio, tincidunt et varius vel, rutrum vel leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean felis felis, dignissim eget turpis in, tempus bibendum nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu malesuada arcu, et pulvinar odio. Maecenas mollis venenatis nulla ut rutrum. Proin condimentum eros ut sem tincidunt blandit. In massa augue, volutpat vitae lectus nec, blandit sagittis enim. Suspendisse et enim libero. Sed tristique tortor et nulla fermentum porta. Praesent eget elit dolor. Duis luctus neque vitae augue varius volutpat. Nullam commodo, libero gravida interdum adipiscing, felis enim interdum nulla, rhoncus laoreet magna sem dictum neque. Phasellus tincidunt fermentum laoreet. Sed cursus quam ante, vitae laoreet eros viverra ac. Quisque porttitor vehicula est, id pretium velit tempor ut.

Pellentesque tempus sagittis ultrices. Nunc sagittis risus et dui tincidunt semper. Mauris non interdum metus, adipiscing dictum magna. Aenean placerat auctor urna ut iaculis. In hac habitasse platea dictumst. Donec sapien dolor, commodo eget justo eget, eleifend rutrum turpis. Cras vel adipiscing libero. Mauris non dolor nulla. Cras lobortis vehicula nibh, eu euismod magna commodo sed. Curabitur porta urna gravida, pretium nisi pharetra, auctor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque viverra, erat posuere faucibus blandit, mauris lorem consectetur risus, quis consectetur augue orci nec diam. Sed non tempus sapien, id pharetra enim. Morbi commodo nisi quis velit scelerisque, a hendrerit sem hendrerit.

Some small stuff

Colors

  • Warm Gray #443C3C
  • Light Gray (50% warm gray) #C3BBBB
  • Orange #FA5D4B
  • Green #77BE70

Buttons

Primary button Secondary button

Gray button Small button

Notes

A note is a note unless it isn't a note.

Something went wrong, but we don't know what it is!

Something went right, all is good!

Forms