Pattern Library

Colors

Black – Text

Gradient – Backgrounds

Orange – Brand

Blurple – Backgrounds

Purple – Backgrounds

Orple – Backgrounds

Red – Backgrounds/Actions

Orange – Backgrounds

Blue – Backgrounds

Green – Backgrounds

Green – Backgrounds

Light Grey – Backgrounds

Light Blue – Backgrounds


Text Styles

Font Family: Sofia Pro / Poynter Oldstyle Text

Display Large

Designs that are more just pretty, they work

Display Small

Bringing The Campus to Your Fingertips

H1 – Page Title

Bacon ipsum dolor amet buffalo rump ground round tail

H2

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin

H3

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf

H4

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.

H5

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.

H6

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.

Additional headline styling options:

For display & H1 headlines, there needs to be an option to add the waves feature. The headline should slightly overlap the waves & there should be padding at the top of the waves, too.

Designs that
work

Eyebrow Text

Our Work is lorem ipsum dolor sed

Paragraph

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha andouille alcatra short loin chicken fatback salami pork pork belly kevin. Prosciutto meatball jowl pork chop salami doner fatback andouille boudin chicken short ribs beef spare ribs tongue kielbasa. Beef ribs ground round beef meatball, ham bresaola t-bone.

Paragraph – Small

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha andouille alcatra short loin chicken fatback salami pork pork belly kevin.

Unordered List

Orange Checklist

Block Quote

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.

Block Quote Plain

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.

Block Quote Large

Personal growth is a huge motivation for me and the freedom and trust.

Table Design

ProjectPrice
Discovery: kickoff-meeting, strategy, budgeting, account review/setup$1,000
Keyword research & grouping or audience & demographic research$1,000
Campaign setup$1,500
Landing page design, development, copy$3,000
Total:$6,500

Buttons

Button – Primary Small

Button – Primary Large

Button – Orange Gradient Small

Button –
Orange Gradient Large

Button – Black

Button – Black Large

Button – Black Outline

Button – Black Outline Large

Button – White

Button – White Large

Button – White outline

Button – White outline Large

Inline Button – White

Inline Button – Black

Download Button

Text link (in body text)

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock ground round picanha andouille.


Form Elements


Images

4:3 Landscape (relative to column size) Please include an option for dropshadow OR no dropshadow

SophiaBadala



Example of no dropshadow

KateThompson

16:9 Landscape (relative to column size) Please include an option for dropshadow OR no dropshadow

Portrait (relative to column size)


Videos

 

Group Container Styles

White with subtle dropshadow (Border radius: 10px)

Dropshadow for groups
CSS Style: box-shadow: 30px 42px 54px 0 rgba(0,0,0,0.28);

Abstract Shape:

We need an option for groups to have this as a background element on either the right or left side. It should be placed right to the edge of any viewport

Gray Background Shape:

This background needs to be able to be turned on for groups. It should continually fade down the page until the bottom of the group.


Dividers


Tabbed slider title 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text

Tabbed slider title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text

Tabbed slider title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text