Overview

Introduction

It's just flowers.

Branding

Colors
Neutral Light #F7F7EF
Neutral Medium #D8D7CB
Neutral grey #B1B1A7
Neutral Dark #272727
Brand Primary #84BD01
Brand Secondary #295309
Sky #076CAE
Berry #8F0773
Scarlet #BE3D1A
Typography

Extra Large Title / Sofia Pro, Semibold / 80px / 82LH

Large Title / Sofia Pro, Medium / 52px / 68LH

Pull Quote / Sofia Pro, Medium / 40px / 64 LH

Medium Title / Sofia Pro, Medium / 32px / 42 LH

Small CTA / Sofia Pro, Medium / 24px / 40 LH

Paragraph / Gibson, Book / 18px / 40 LH

Small / Sofia Pro, Semibold / 16px / 40 LH

Smallest / Sofia Pro, bold / ALL CAPS / 14px / 18 LH


                            

Extra Large Title / Sofia Pro, Semibold / 80px / 82LH

Large Title / Sofia Pro, Medium / 52px / 68LH

Pull Quote / Sofia Pro, Medium / 40px / 64 LH

Medium Title / Sofia Pro, Medium / 32px / 42 LH

Small CTA Link / Sofia Pro, Semibold / 24px / 32 LH

Small CTA / Sofia Pro, Medium / 24px / 40 LH

Paragraph / Gibson, Book / 18px / 40 LH

Small / Sofia Pro, Semibold / 16px / 40 LH

Smallest / Sofia Pro, bold / ALL CAPS / 14px / 18 LH

Buttons

Primary Button
Secondary Button
Outline Button
Outline Button Dark
Outline Button White

                            
{% import 'macros/svg.html' as svg %}




                          

Widgets

Large CTA

Sign up for our newsletter lorem ipsum dolor sit amet sunt in culpa qui officia deserunt in culpa qui officia mollit.

Join Our Email List

                            

Sign up for our newsletter lorem ipsum dolor sit amet sunt in culpa qui officia deserunt in culpa qui officia mollit.

Join Our Email List
Large CTA Ask

Lorem ipsum dolor sit amet sunt in culpa qui officia deserunt in culpa qui officia mollit.

Visit Ask PHS

                            

Lorem ipsum dolor sit amet sunt in culpa qui officia deserunt in culpa qui officia mollit.

Visit Ask PHS
Large Person Card

                            
{% import 'macros/people.html' as people %}

{% for person in range(0, 4) %} {{ people.render( { person: { image: 'https://phsonline.org/uploads/people/MRpic.jpg', title: 'Dana Flowers', position: 'President' } }, { size: 'large' } ) }} {% endfor %}
Small Person Card

                            
{% import 'macros/people.html' as people %}

{% for person in range(0, 6) %} {{ people.render( { person: { image: 'https://phsonline.org/uploads/people/MRpic.jpg', title: 'Dana Flowers', position: 'President' } }, { size: 'small' } ) }} {% endfor %}
Featured Document

                            

                          
Slideshow

                            
                          
Image Quote

Roots To Reentry

Pull Quote excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim est laborum.

Jacob Ipsum

Staff since 2015

leaf icon leaf icon leaf icon

                            
                          

Symbols

Logos
Pennsylvania Horticultural Society main logo Pennsylvania Horticultural Society medium logo Pennsylvania Horticultural Society small logo Pennsylvania Horticultural Society flower show logo

                            
{% import 'macros/svg.html' as svg %}

{{ svg.render({
  name: 'logo-main',
  iconClasses: true,
  alt: 'Pennsylvania Horticultural Society main logo'
}) }}

{{ svg.render({
  name: 'logo-medium',
  iconClasses: true,
  alt: 'Pennsylvania Horticultural Society medium logo'
}) }}

{{ svg.render({
  name: 'logo-small',
  iconClasses: true,
  alt: 'Pennsylvania Horticultural Society small logo'
}) }}

{{ svg.render({
  name: 'logo-flower-show',
  iconClasses: true,
  alt: 'Pennsylvania Horticultural Society flower show logo'
}) }}



                          
Tags

                            
                          
Social
Instagram logo

                            
{% import 'macros/svg.html' as svg %}

{{ svg.render({
  name: 'facebook',
  iconClasses: true,
  alt: 'Facebook logo'
}) }}

{{ svg.render({
  name: 'instagram',
  iconClasses: true,
  alt: 'Instagram logo'
}) }}

{{ svg.render({
  name: 'twitter',
  iconClasses: true,
  alt: 'Twitter logo'
}) }}



                          
Icons
arrow icon facing right arrow icon facing upper right chevron left chevron right close icon close icon calendar icon caret icon filters icon large wavy underline small wavy underline leaves icon

                            
{% import 'macros/svg.html' as svg %}

{{ svg.render({
  name: 'featured-circles',
  iconClasses: true,
  alt: ''
}) }}

{{ svg.render({
  name: 'arrow',
  iconClasses: true,
  alt: 'arrow icon facing right'
}) }}

{{ svg.render({
  name: 'arrow',
  iconClasses: true,
  classes: 'o-icon--arrow-external',
  alt: 'arrow icon facing upper right'
}) }}

{{ svg.render({
  name: 'chevron',
  iconClasses: true,
  alt: 'chevron left'
}) }}

{{ svg.render({
  name: 'chevron',
  iconClasses: true,
  classes: 'o-icon--chevron-right',
  alt: 'chevron right'
}) }}

{{ svg.render({
  name: 'close',
  iconClasses: true,
  alt: 'close icon'
}) }}

{{ svg.render({
  name: 'search',
  iconClasses: true,
  alt: 'close icon'
}) }}

{{ svg.render({
  name: 'calendar',
  iconClasses: true,
  alt: 'calendar icon'
}) }}

{{ svg.render({
  name: 'caret',
  iconClasses: true,
  alt: 'caret icon'
}) }}

{{ svg.render({
  name: 'filters',
  iconClasses: true,
  alt: 'filters icon'
}) }}

{# @TODO may need to refactor these as assets in public and use as CSS background image  #}
{{ svg.render({
  name: 'squiggle-large',
  iconClasses: true,
  alt: 'large wavy underline'
}) }}

{{ svg.render({
  name: 'squiggle-small',
  iconClasses: true,
  alt: 'small wavy underline'
}) }}

{{ svg.render({
  name: 'leaves',
  iconClasses: true,
  alt: 'leaves icon'
}) }}