The City of Baton Rouge

 

Disclaimer: the following project is spec work created with MESH and does not represent the city or parish of East Baton Rouge in an official capacity.

 
 

 
 

Design System

The City of Baton Rouge is full of flavor, culture, color and life. But its visual presence is little to none. I set out to create a design system that would enhance the brand visually while maintaining the flexibility to be used across a wide variety of platforms and contexts throughout city government.

This system includes everything from a standardized color palette, a type system, iconography, design themes and motifs and a brand voice.

 

 
 

 

Brand Personality

 

Thoughtful

Everything we write from the informative City Guides to the automated emails we send should be thoughtfully written in order to best serve the people of Baton Rouge. Every sentence should have a purpose and be spoken simply and clearly.

Rich

Everything about Baton Rouge is rich. Our culture. Our personalities. Our food. The way that we interact with the public through our digital presence should be beautifully designed to incorporate the rich heritage of our city. Don’t be afraid to use the verbiage of our culture — embrace it!

Personal

Though we’re a city known for its food and music, there’s nothing that distinguishes Baton Rouge more than its people. We’re friendly, resilient, and creative. So the way that we communicate to the world should reflect the personal touch of our people.

 

 

Brand Colors

 
ColorPalette-v.png

Dark Red:
The dark red should be used as an accent color to help the bright red be less overwhelming.

Bright Red:
The bright red that visually leads our digital presence pays homage to our name: Baton Rouge. While fun and exciting, too much red could be overwhelming and should’t be overused.

Navy Blue: 
Balancing the vibrance of our red is the bold, rich navy blue that not only grounds the site with a darker color but also references the music of our culture: the Blues. This color should be used for headers or anything that is meant to be more official.

Bright Blue:
The bright blue should be used as a hover state for buttons and listed items to indicate progress and action.

Light & Dark Grey:
To help soothe the viewer and bring a bit of warmth to the visual experience, the light and dark grey act as transitional colors.

 
 

 
 

Brand Typography:

Gotham: We chose Gotham because of its versatile nature. By using various weights, we are able to create a structured hierarchy that guides the user through the visual experience with ease.

Typeface.png

 

Iconography

Experiential Icons

Utilizing three colors, the bright red, dark grey and light grey, the experiential icons give the users a fun, layered visual presence that gives it a life of its own. They should accompany any major actions the user can take.

Icon-seal.png

Departmental Icons

Utilizing the mono-line seal as the standard, the departmental icons should give a sense of professionalism while also matching the lined iconography of the utilitarian and experiential icons.

Icon-utilitarian.png

Utilitarian Icons

Simple, with a bold 5px line weight, the utilitarian icons should be clear and obvious in order to guide the user to engage with the website or mobile application without ajoining words.

 

 

Mockups

 
 

 

High-Fidelity Full-Page Designs

 

Home Page

The BR.gov website isn't just a repository for Baton Rouge's government business. It's a resource hub for its citizens. From local events to city guides to current news, this website becomes the pocket-companion for anyone living in Baton Rouge, or just passing through.

City Guide

City Guides would be published by the city to help locals and visitors alike navigate the Baton Rouge experience. From starting a business, to preparing for a huricane to finding the best places to eat and drink, City Guides are your playbook for Baton Rouge.