Style Guide
Guidelines
This design system helps us work together to build a great user experience with the brand.
Logos
Logos! Download them, use them where you use logos. You know the rules, no putting it upside down, stretching it, or doing anything else funky.
Standard Logos
Extended Name Logos
NOLA Marks
Colors & Palettes
The brand palette uses a combination of 10 shades and tints per color to provide a wide variety of options, while staying on brand.
Brand Colors
Primary: Gold
Hex: #C7A55A
RGB: 199, 165, 90
CMYK: 23%, 32%, 76%, 1%
Pantone: 7753U
Interactive: Digital Orange
Neutral Colors
The neutrals palette contains 12 shades going from full white to full black with a couple more eye-pleasers in the middle. Grays are used for regular paragraphs.
Text Colors
Typography
Headings & Large Texts
The brand uses a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used. Don’t use units for line-heights. Keep it unitless.
Paragraphs & caption
Bebas Neue is the standard typeface for the brand on the web for large texts and headings. Monsterrat is used for paragraphs, small texts and for H6 (h6 headings).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed. Volutpat est velit egestas dui id ornare. Purus in mollis nunc sed id semper.
Rich Text
Italic Text: State step the seeing house. Queen, thoughts wanted first collection the suggests the a picture different worries the to this were was ocean. The few to I by leaders, the four to is way, let shall legs don’t as slowly my a ever the seven date live on it’s but.
H1: The screen always hopes
Proportion down board travelling, you he far the depend warned theoretically sleep for now entire shine. Mail about magicians of many see privilege my we even the bad oh, for success in too allowed he with interesting magazine about in rationale to what the succeeding, derived was devotion failing.
Into the to feel to there’s that those shortcuts. Click this link to learn more.
H2: Make solider, were as moving into
Hearts to parks. The that the horn bold, to days, noting it the and frequency, payload apart or be his irregular the he moving belly, rank redesigns. Point didn’t in present getting this arches approved to afforded pouring initial payload common during shall, discipline’s systems values, from chosen and the to about the my a either highly title made felt present their not and have peacefully clarinet and him.
Bold Text: Select life is the ducks. Maybe been for we've the
H3: He mechanic. Text they harder of a texts. That instruments
Hired tuned were I to timing that it themselves let which implemented what duties week knowing dream.
- Not the in design finger.
- His and you our text
- Who century then breakfasts. Precipitate
The concepts his out accounts more quickly own, one time but have ever room allowed that researches happening, was saw and the free texts up little may function.
H4: Get my and than are line though, behind chest that about to the and go the
For conduct, loyalty. Two distribution or queen hologram invitation or write at on office.
- And ambushed the a as
- First logbook getting purer have
- As the he even river
- Be and loyalty. Saw material.
- A are and, curiously, during
Were the date to the worn they the so duck that an and clear like that box travelling the identification the examples this project I frequency, discipline period, could his in dresses and common wouldn’t to texts attentive knowing the respect human precipitate, roman lively.
H5: For conduct, loyalty. Two distribution or queen hologram invitation or write at on office.
As of such decisions, cheating the her for or to her she phase notice the expected to else of perception flows to asked smaller heaven he theoretically voices their texts
H6: Missing heading text
Which where the toys my however careful want can been she has indeed evening. Offer, to essential he presented. Be even steps is to sublime little these viewer. Been explain first, prior seeing in I parents task.
Here are special text classes for specific website layouts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Font awesome
Use vector icons and social logos with Font Awesome, the web’s most popular icon set and toolkit. Search the Gallery or use the Cheatsheet to copy and paste your icon of choice.
- - For Font Awesome Solid use the class combo fontawesome fa solid
- - For Font Awesome Regular use the class fontawesome
- - For Font Awesome Brands use the class fontawesome brand
Buttons
Buttons have in two size: The standard version and the small version. These sub-classes can be combined to alter button size and design as needed.
.button .btn-fill
.button .btn-fill .btn-disabled
.button .btn-black
.button .btn-black .btn-small
.button .btn-black .btn-disabled
.button .ghost
button .ghost .btn-small
.button .ghost .btn-disabled
.button .ghost
.button .ghost
.button .ghost
.button .ghost
.button .ghost
.button .ghost
Grid
Below you will find classes for standard div blocks… TBA
This is a .section which centers all child blocks and text. By default it has a top padding of 60px and bottom padding of 80px. Adjust and style as needed.
Alignment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
