#SheWillBe Style Guide

This is a basic style guide for producing materials for New York City Council's Young Women's Initiative (YWI) #SheWillBe campaign.

Color Palette

  •       Off White: #f9f2ec
  •       Tan: #f3e5d9
  •       Cyan: #37a4b3
  •       Red: #d95762
  •       Fuchsia: #dc31be
  •       Slate: #4b5363
  •       Yellow: #ebdd5b
  •       Oil: #333333

Don't use pure white for web, use "Off White." Pure white may be okay for print; use your judgement. Don't use pure black, use "Oil."

Typography

Titillium Web 300, 700
Download

Permanent Marker
Download

Text should only be the following colors:

  • Oil (small text & Permanent Marker)
  • Slate (large text/headings)
  • Off White (on dark backgrounds)
  • Tan (large text/headings on dark background)

* Text using the Permanent Marker font should always be at 85% opacity so that a bit of the color/pattern underneath shows through—which also causes higher opacity where characters overlap (example below) to further simulate actual marker.

EG

Heading: Titillium Web 300

AaBbCcDdEeFfGgHhIi

This is the default heading style.


Alternate Heading: Permanent Marker

AaBbCcDdEeFfGg

Use this font for headings that need to draw more attention.


Body Copy: Titillium Web 300

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Blockquote:
Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Text + Gradient Box

Small(er) text over an image may need a box. If so, fill that box with a Red-to-Slate gradient. This gradient should be at 85% opacity. However the text should be at 100% opacity.

Image Assets

  • All photos are overlaid with this gradient. The subject of the photo is masked out of the overlay.