Following is the basic Design System, showing the suggested Color Palette, Typography, and Buttons (and basic form). There are 3 options … the only difference between the options are the suggestions for typography and the buttons. The headings and text on the page is using the suggested typography (fonts) as noted on the respective option page. To see each section you can use the respective links below are just scroll down.
Logo & Brand
Brand Guidelines
When people interact with our content, product and services, we want them to feel (…). When people see something from our brand they think it is (…). When thinking about our brand, we don’t want people to feel (…). If our brand was a person, they would be described as (…).
Color Palette
Following is the color palette for the website. The first color (far left) on the first and second lines is the primary color. The third line is the secondary color – the first two colors are from the company’s brand (logo).
The fourth color is black to white … many times; we need blacks and grays for shadows and other elements; this line shows the various tints that would be used from black to white.
The fifth line of colors is the three colors (Accent A, B, & C) rounding out the analogous color scheme (based on the primary color).
Following the primary colors are the progression from light (tints) and dark (shades). The secondary color has its respective light progression (tints). These are shown because when creating various elements or pages, there may need to be a shade or tint used to provide depth and life in the design.
Typically, only shades of the primary are possibly used. Shades of the other colors tend to be irrelevant as those colors are not the primary focus. However, it is more likely tints of other colors may be used; that is why they are shown.
While not all of these colors may be used, they are here for reference (and for easy use, if needed/desired during the creative process).
#600a0c
#803b3d
#a06c6d
#bf9d9e
#dfcece
#600a0c
Primary + Shades
#4d080a
#3a0607
#260405
#130202
#b7bbbc
Secondary + Tints
#c5c9c9
#d4d6d7
#e2e4e4
#f1f1f2
#000000
Black/Gray/White
#333333
#666666
#999999
#cccccc
#e9e52b
Accent A
#0a0c60
Accent B
#5e0a60
Accent C
Typography
Heading Font
Body Font
Aa
Oswald Regular
Aa
Oswald Regular Italic
Aa
Oswald Bold
Aa
Montserrat Light
Aa
Montserrat Light Italic
Aa
Montserrat Bold
Heading hierarchy
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Body text
This is a sample block of text at the suggested size and line-height. This is a Sample Text Link that would be within a body of text.
Phasellus aliquet efficitur nullam. Id viverra mattis egestas. At felis lacus conubia donec habitant. Iprimis maximus at felis lacus conubia donec habitant erat neque nullam dapibus malesuada elementum metus accumsa. Phasellus aliquet efficitur nullam. Id viverra mattis egestas. At felis lacus conubia donec habitant.
Aptent eros justo pellentesque placerat volutpat sapien conubia amet accumsan. Sollicitudin elit velit erat fusce magna sapien etiam malesuada nascetur. Phasellus aliquet efficitur nullam. Id viverra mattis egestas. At felis lacus conubia donec habitant.