This style guide demonstrates the default presentation of elements in this theme. This page can also be used as a blueprint for how to present content within the theme in an effective way.

Color Palette

Purple

HEX: #5B1453
RGB: 91 / 20 / 83

#5B1453

Teal

HEX: #009192
RGB: 0 / 145 / 146

#009192

Orange

HEX: #E96A26
RGB: 233 / 106 / 38

#E96A26

Grey

HEX: #46494B
RGB: 70 / 73 / 75

#46494B

Font Families

Used for the website and print touchpoints.

Heading and SubHeading Font

Font Family: ITC Franklin Gothic Pro
Styles: Medium Compressed 500, Demi Compressed 700

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Font

Font Family: Franklin Gothic
Styles: Regular 400, Medium 500, Bold 700

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Special Headings Font

Font Family: Brolide
Styles: Regular 400

Brolide

Fonts used for Canva

Heading and SubHeading Font

Font Family: Roboto Condensed
Styles: Regular 400, Bold 700

Body Font

Font Family: Libre Franklin
Styles: Light 300

Blockquote

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupery

Pull Quote

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Antoine de Saint-Exupery

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Antoine de Saint-Exupery

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Table Styles

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

standard link

Horizontal Rule


Special Blocks

Related/Additional Stories Block w/in stories

You can align these to the left or right of the story so the text wraps around the box. These should be pulled from the pattern “Article Layout” under the [CBP] Charlottesville Tomorrow category.

More about bus drivers


Images and Captions

Digital Guidelines
1200 x 630 aspect ratio for all articles (2400px x 1260px)
72 PPI resolution
File format: JPG for photos, PNG for graphics, GIF for animations
Color Mode: RGB
Here’s a helpful cheat sheet for social media image sizes.

Print Guidelines
300 PPI resolution
File format: JPG for photos, PNG for graphics
Color Mode: CMYK

Alt Text for Images and Graphics
Alt text is for people who use readers/have visual needs so it’s a direct description of the image.

Captions for Images and Graphics
Captions should be thought of as standalone mini-stories, like a sentence or two you’d put on Instagram that can live on its own. Give context, use a quote if you want, but always tell a story or give information. Name people whose faces are in images.

A boy stands at a microphone gesturing with his hands. Behind him is an auditorium filled with people.
Nasir Sumpter, a senior at Charlottesville High School, said his brother “was one of those kids” before his mother got him transferred to an alternative education program. He told community members at a public meeting Monday night that the focus should be on the response to the behavior, and disciplinary action. Credit: Tristan Williams/Charlottesville Tomorrow

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat. Enim facilisis gravida neque convallis a cras semper.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat. Enim facilisis gravida neque convallis a cras semper.

Textures and Banners

Below are examples of banners that can be used throughout the website and additional touchpoints. You can copy these blocks and use them throughout the website. There are several reusable blocks that are listed in the reusable blocks section that can be used across the site as well. See Posts > Reusable blocks on the left sidebar.

Land Texture

Grunge Texture

Grunge Texture

Grunge Texture