Framework

Graziano UI Style Guide

Primary colors

Primary colors help consumers to quickly identify a brand.

#c22032
#8e9090

Secondary colors

Secondary colors highlight and compliment the primary color or colors.

#4098cb
#5e5ca2

Tertiary colors

A tertiary color is a third level of a color palette that helps combines primary and secondary colors.

#a5a5a5
#323141

Black, White, and Grayscale

Generally, black is primarily used as a text and background color while white provides contrast and clear spacing. A grayscale shows a variety of different shades of gray. The highest level of gray is black and the lightest shade is white.

#FFFFFF

#F9F9F9

#f2f2f2

#e0e0e0

#ffb42b
#000000

02. Typography

The art of typography plays a major role in a company’s identity and is most effective when the words are consistent in both content and appearance.

Primary Typeface

This should be the default typeface, controlling the body (or “paragraph”) text across your website, a reflection of the overall brand identity.

Source Sans Pro

Secondary Typeface

This should complement your primary, controlling the heading (or “titles”) text across your website, a reflection of the overall brand identity.

PT Sans Narrow

Tertiary Typeface

This can be the same as the secondary typeface and used for accents.

Typography

On light background

Main heading (h1) Large

Main heading (h1)

Subheading (h2)

Subheading (h3)

Subheading (h4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

(UL) Unordered List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

(OL) Ordered List

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

(UL) Unordered List – Checkmark

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

(UL) Unordered List – Circle X

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

Typography

On dark background

Main heading (h1) Large

Main heading (h1)

Subheading (h2)

Subheading (h3)

Subheading (h4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

(UL) Unordered List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

(OL) Ordered List

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

(UL) Unordered List – Checkmark

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

(UL) Unordered List – Circle X

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

03. Buttons

Buttons use the basic color palette for priority actions to promote a branded interface. In general, red buttons mean stop, green buttons mean go and blue buttons mean more information.

Buttons

On light background

Primary

Most frequently used, especially good to encourage a call to action.

Primary

Secondary

Compliments the primary button and preferred when the user should learn more.

Secondary

Link

On light background

Learn More

Buttons

On dark background

Primary

Most frequently used, especially good to encourage a call to action.

Primary

Secondary

Compliments the primary button and preferred when the user should learn more.

Secondary

Link

On dark background

Learn More

04. Forms

Forms allow users to fill out and submit information through your site. They eliminate the need for PDFs or contact information, and they’re easy to use. All form elements should use the basic color palette for consistent design, good user experience (UX), and accessibility.

Form Elements

On light background

Form Elements

On light background