APPC Design Patterns


# Philosophy It’s important to convey that humans work here, individuals. Adding character to graphic elements conveys this nicely. # Logo Treatments The long version of APPC’s logo should be used whenever possible. It’s clean, impactful, and clear. There are also “stamp” versions of the logo for when the long logo doesn’t work. These come in a few different flavors: serif and sans, each with rounded and square variations. Serif is appropriate for most uses; the sans option is a last resort, as the serif version doesn’t read at very small sizes. I have yet to figure out why we have square and round variations. Maybe a ghost made them.

long-k

APPCLogo-long-K.ai

rounded-k

APPCLogo-rounded-K.ai

square-k

APPCLogo-square-K.ai

sans-rounded-k

APPCLogo-sans-rounded-K.ai

sans-square-k

AvPPCLogo-sans-square-K.ai

# Web The font sizes listed here are for reference purposes only. They’ve been computed based on a 16px body style. In practice, use percentages for nested elements that modify the body style. ## Typography The APPC website uses Crimson Text as the main body font. The source is available on Github with an SIL Open Font License, or as a webfont on Google Fonts. Crimson Text is no longer actively maintained, so in future versions of the site we will move to another oldstyle typeface such as PT Serif. Buttons and menu headings use Molengo. In most cases Molengo should be in all caps, but lowercase can be used for ancillary information that would have legibility issues as a serif, such as the copyright notice.

Molengo Button Example

Molengo Button Example

Molengo Section Heading Example

Molengo Section Heading Example

Molengo Lowercase Example

Molengo Lowercase Example

## Main Colors

Page Background#FAFAFA1C 1M 1Y 0K

Text#5555550C 0M 0Y 82K

APPC Blue#11364392C 67M 53Y 49K

APPC Red#9F3E3E27C 86M 74Y 19K

## Departmental Colors

APPC Health#F050530C 84M 64Y 0K

APPC Science#8ACDA947C 0M 42Y 0K

APPC Media#62ADC960C 17M 14Y 0K

APPC Politics#7B647553C 61M 39Y 12K

## Body Styles p { color:rgb(85, 85, 85); font-family: 'Crimson Text', Helvetica, sans-serif; font-size: 16px; font-weight: 300; height: 75px; line-height: 24px; margin-bottom: 20px; } ## Headline Styles h1 { font-size: 48px; font-weight:900; letter-spacing: -0.5px; line-height: 48px; margin-bottom: 15px; margin-top: 15px; } # Print ## Typography The majority of printed materials use Futura for headlines and callouts, in two weights specifically.

  • Futura PT Book 400
  • Futura PT Heavy 700

Futura PT is available through Typekit for Creative Cloud subscribers. Individual licenses are available from Monotype. ## Brand Banner The brand banner is used as a colophon of sorts on posters, brochures and other display materials. It should be the last thing presented in a left-to-right reading order. Meaning it’s at the very bottom of a scroll, on the back cover of a pamphlet. The file can be picked up from the APPC Creative Cloud Library. Screen Shot 2016-08-23 at 9.56.10 AM