Branding Guidelines

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

Lawson Kroeker logo
Lawson Kroeker icon logo

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).


Primary + Tints






Primary + Shades






Secondary + Tints












Accent A


Accent B


Accent C


Heading Font
Body Font


Oswald Regular


Oswald Regular Italic


Oswald Bold


Montserrat Light


Montserrat Light Italic


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.

Functional Text/Eyebrow Text/Sample Label

Buttons & Forms

Final forms used on website will have the desired format and fields. This is to show how fields, buttons, and text may look in conjuction with the design system.

12 + 9 =