Project Brays Brand Guidelines
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
ProJECT brays
Brand Guide
ProJECT brays
Brand Guide
04
voice
06
color
09
typography
12
design
16
imagery
voice
4
5
voice
Designed to reduce the risk of flooding, the Brays Bayou Flood
Damage Reduction Project, today known as Project Brays, is a
cooperative effort between the Harris County Flood Control
District (HCFCD) and the U.S. Army Corps of Engineers (Corps).
these are groups of great expertise and this project is a benefit
for all those who live in the area affected. therefore, the overarching
voice for communication should be that of great preofessionality,
inspiration and compassion. there will be opportunities
to explore different tones of voice within the copy of
of print and web documents and the tone should aim to match
the piece of information being delivered.
6
7
CORE PALETTE
core colors include a range of blues and neutrals that should
be the foundation of your design. the accent colors are to be
used sparingly in accent and alert areas. colors are provided
in RGB and HEX for digital display, along with Pantone and CMYK
Icy Blue
#B9E5FB
R185 G229 B251
Brays Blue
#00C0F3
R0 G192 B243
Bayou Blue
#00A0F3
R0 G160 B243
Deep Blue
#275CAA
R39 G92 B170
C24 M0 Y0 K0
Pantone P 115-3 C
C67 M1 Y0 K0
Pantone P 115-6 C
C70 M26 Y0 K0
Pantone P 112-6 C
C90 M69 Y0 K0
Pantone P 104-15 C
White
#FFFFFF
R255 G255 B255
Light Gray
#BFBFBF
R191 G191 B191
Medium Gray
#7F7F7F
R127 G127 B127
Black
#000000
R0 G0 B0
C0 M0 Y0 K0
C25 M20 Y20 K0
Pantone P 172-2 C
C52 M43 Y43 K8
Pantone P 179-9 C
C75 M68 Y67 K90
Pantone Black
ACCENT & alert
Status Sunrise
#FFC200
R255 G194 B0
Sage Green
#9CD147
R156 G209 B71
Grassy Green
#00A0F3
R0 G160 B243
Forest Green
#275CAA
R39 G92 B170
C0 M25 Y100 K0
Pantone P 10-8 C
C0 M43 Y92 K0
Pantone P 157-8 C
C70 M26 Y0 K0
Pantone P 150-8 C
C90 M69 Y0 K0
Pantone P 148-8 C
8
Gradients
There are four gradients in the project brays visual system.
depending on the Context and design intent, determine which
gradient is most appropriate. Gradients are applied as a whole.
Only use colors already in the core or extended color palettes.
Core Blue Duotone Gradient
#00A0F3
#00C0F3
Dark Blue Tritone Gradient
#00A0F3
#00A0F3
#275CAA
Green gradients are intended to be used as accents. They
should never be more than 1-2 percent of the entire area of
your composition.
Green Duotone Gradient
#00A0F3
#275CAA
Bright Yellow-Green Tritone Gradient
#00A0F3
#00A0F3
#275CAA
typography
9
10
typography
logotype
Impact Regular
Aa
A modified version of this typeface was
used in the Project Brays logo design and
will serve as the brand’s display typeface.
web type
Roboto Condensed Bold
Aa weight
Aa weight
This typeface should be used for headlines
and titles on the web. Font size and font
will be dependent upon application.
Roboto Condensed Regular
This typeface should be used for all body
content on the web. Font size and font
will be dependent upon application.
11
typography
PRINT type
Century Gothic Bold
Aa weight
Aa be
This typeface should be used for headlines
and titles on the web. Font size and font
will be dependent upon application.
Century Gothic Regular
This typeface should be used for all body content
on the web. Font size and font weight will
dependent upon application.
12
13
logo
the project brays logo is inspired by the LANDSCAPE OF THE BRAYS
BAYOU, TAKING CUES FROM THE BODY OF OF WATER’S WINDING SHAPEs.
THE LOGO SHOULD ALWAYS BE PLACED ON A CONTRASTING BACKGROUND
IN BOTH PRINT AND DIGITAL TO ALLOW FOR EASY READABILITY.
the monotone black version of the logo should be used in b&w
only printing.
the monotone white version of the logo should be used where
the logo is placed on a colored background.
14
logo ALTERNATES
colors in the core palette may be used as backgrounds to allow
for visual identity consistency. here are some alternate logo
options to be used in these cases. do not use any other color
combinations other than the ones here.
15
design elements
this wavy shape taken
from the logo can be
used in areas where a
small icon is appropriate
this curved shape taken from the logo can be used as an overlay for BACKGROUNDS
OR HEDAERS ON THE WEB OR IN PRINT LIKE THE EXAMPLE SHOWN BELOW.
constructION calendar
imagery
16
17 imagery
photography
because of the nature of this project, photography will almost
always be taken outside. do not use artificial lighting for photos
when avoidable. natural lighting conveys a sense of openness.
this effect can be created without the use of overwhelming
warmth. in fact, pairing cool toned imagery will heed better to
the overall brand guidleines. for example, the natural cool
light seen in the image below pairs well with the WHITE text
overlayed. to add an even stronger sense of coherence, a photo
filter with the color bray’s blue (#00C0F3) at 25% - 50% opacity
can be overlayed on images using the overlay layer style
REDUCE THE RISK.
REDISCOVER THE BEAUTY.
*50% photo filter with color #00C0F3 using ovelay layer style
18 imagery
images + gradients
the project brays style guidleine allows for gradients to be
used in two major ways; as an overlay and as a gradient bar.
gradient overlays are an excellent and simple way to create
branded content that is legible and elegant. gradient bars look
best when paired with imagery and allow for an otherwise stock
looking photo to have a more branded feel. in both cases, do
not use any gradients outside of those provided in this style
guideline.
ProJECT brays
Brand Guide
A GREENER FUTURE
ProJECT brays
Brand Guide