Overview

Introduction

This is the pattern library for Philadelphia Contemporary.

Colors

Light Colors
Light Grey #F5F5F5
Light Pink #FFCDB9
Light Green #C3DFC4
Light Blue #CCDBE0
Solid Colors
Black #000
White #FFF
Pink #E087BC
Red #D5233E
Brown #72614C
Green #B3D572
Blue #00A7C1
Dark Colors
Dark Red #73120D
Dark Yellow #DB9A00
Dark Green #00724A
Dark Blue #18186D

Typography

Large Title

Large Title


                            

Large Title

Medium Title

Medium Title


                            

Medium Title

Small Title

Small Title


                            

Small Title

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod. Odio pellentesque diam volutpat commodo sed egestas. Amet commodo nulla facilisi nullam vehicula. Ante metus dictum at tempor. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Et pharetra pharetra massa massa. Bibendum arcu vitae elementum curabitur vitae. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Cursus euismod quis viverra nibh cras. Sodales ut eu sem integer vitae justo.


                            

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod. Odio pellentesque diam volutpat commodo sed egestas. Amet commodo nulla facilisi nullam vehicula. Ante metus dictum at tempor. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Et pharetra pharetra massa massa. Bibendum arcu vitae elementum curabitur vitae. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Cursus euismod quis viverra nibh cras. Sodales ut eu sem integer vitae justo.

Small Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod. Odio pellentesque diam volutpat commodo sed egestas. Amet commodo nulla facilisi nullam vehicula. Ante metus dictum at tempor. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Et pharetra pharetra massa massa. Bibendum arcu vitae elementum curabitur vitae. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Cursus euismod quis viverra nibh cras. Sodales ut eu sem integer vitae justo.


                            

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod. Odio pellentesque diam volutpat commodo sed egestas. Amet commodo nulla facilisi nullam vehicula. Ante metus dictum at tempor. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Et pharetra pharetra massa massa. Bibendum arcu vitae elementum curabitur vitae. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Cursus euismod quis viverra nibh cras. Sodales ut eu sem integer vitae justo.

Meta, Buttons

META, BUTTONS


                            

META, BUTTONS


                            



                          
Quotes

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod.”


                            

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna cursus eget nunc scelerisque viverra mauris in. Tincidunt augue interdum velit euismod.“


                            



                          

Widgets


                            
{{
  link.text({
    link: {
      path: '#',
      linkText: 'View the full project'
    }
  })
}}


                          
Rich Text

Heading text lorem ipsum dolor set

Body Lorem ipsum vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Small Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View the full project

                            
{{
  richText.render(data.widget)
}}