DailyBrew Newspaper Style Guide

Typography

Headline Font

Cambria, Georgia, serif

Bold (700)

Semibold (600)

Medium (500)

Regular (400)

Body Font

Georgia, Times New Roman, serif

Bold (700)

Semibold (600)

Medium (500)

Regular (400)

Italic

Typography Plugin Classes

Default Prose

This uses the default typography plugin styles.

This is a blockquote with default styling.

This is a link

Newspaper Prose

This uses our custom newspaper typography styles.

This is a blockquote with newspaper styling.

This is a link

Colors

newspaper-background

#ffffff

newspaper-text

#121212

newspaper-border

#e2e2e2

newspaper-accent

#326891

newspaper-accent-dark

#1e4a6e

newspaper-accent-light

#4284b0

newspaper-highlight

#f7f7f7

newspaper-quote

#767676

Gray Scale

newspaper-gray-lightest

#f9f9f9

newspaper-gray-light

#e2e2e2

newspaper-gray-medium

#666666

newspaper-gray-dark

#333333

Shadows

shadow-newspaper-subtle

0 1px 3px rgba(0,0,0,0.08)

shadow-newspaper-light

0 2px 4px rgba(0,0,0,0.05)

shadow-newspaper-medium

0 4px 6px rgba(0,0,0,0.1)

shadow-newspaper-dark

0 6px 8px rgba(0,0,0,0.15)

shadow-newspaper-strong

0 8px 12px rgba(0,0,0,0.18)

shadow-newspaper-inset

inset 0 1px 3px rgba(0,0,0,0.1)

UI Examples

Buttons

Card Examples

Card with Medium Shadow

A simple card with medium shadow.

Card with Strong Shadow

A simple card with strong shadow for emphasis.

Card with Highlight Background

A subtle card with highlight background.

Form Elements

Text Input

Select Input

Textarea

Checkbox Group

Option 1

Option 2

Article Typography Examples

Article Title with Border

By John Smith • March 20, 2025

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec in efficitur ipsum. In hac habitasse platea dictumst. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

"The newspaper industry has undergone significant transformation in the digital age, yet the core principles of journalism remain unchanged: accuracy, fairness, and public service."

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Secondary Heading

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.