Framework

Global UI Style Guide

Site development by Zeustek

This style guide is a vital part of your web design project!

01. Logos

Logos serve to represent a given organization or company through a visual image that can be easily understood and recognized. A logo generally involves symbols, stylized text or both. Logos are often created by a graphic artist in consultation with a company and marketing experts.

Primary

Primary colors help consumers to quickly identify a brand.

Horizontal
Vertical
Misc

02. Color palette

Before we dive into the specifications of color, it is important to define a color palette. A color palette is the full range of colors that a brand sets as their identity. This combines all the colors mentioned below into one palette.

Primary colors help consumers to quickly identify a brand. These are the core colors of the brand. Commonly, primary colors are incorporated into a company’s logo.

Primary

Primary colors help consumers to quickly identify a brand.

#009EFF

#1bad6d

#1d334e

Secondary colors

Secondary colors highlight and compliment the primary color or colors.

#107BE0

#1ED693

#31b622

Tertiary colors

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

#e94a2f
#1d334e

#000000

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

https://fonts.google.com/specimen/Poppins

H1

Poppins

Heading 1

H2

Poppins

Heading 2

H3

Poppins

Heading 3

H4

Poppins

Heading 4

Body
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.
List
  • Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.
All In One

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Quisque velit nisi
Call to Action (CTA)

Sample Call to Action

(000) 000-0000

04. 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.
Primary button
Most frequently used, especially good to encourage a call to action.
Secondary button
Compliments the primary button and preferred when the user should learn more.

05. Blurbs

Up next, we have some blurb modules that have been frequently used in the layout pack.

Blurb 1

Mini Tune Up

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec.

Blurb 2

Mini Tune Up

Curabitur aliquet quam id dui posuere blandit. Praesent sapien 

Blurb 3

Schedule Move

Blurb 4

N

Vestibulum ante

Blurb 5

Address

1234 Abroad St. #1000
San Francisco, CA 00000

Blurb 6

25% Off

Vestibulum ante ipsum primis in faucibus orci luctus.

06. Other modules

Last but not least, we’re sharing other module designs that were used in the layout pack. Upon importing with presets, these have all been added to your preset library. If you didn’t enable the import presets option, you’re able to turn any one of these modules into a global preset.

Accordion 1

Proin eget tortor risus?
Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi pretium?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit?
Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.
Praesent sapien massa?
Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus.

Divider 1

Divider 2

Slider 1

“Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo.”

– Robert Henry

“Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Sed porttitor lectus nibh. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.”

– John Doe

Blog 1

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Social Media Follow 1

Social media follow 2

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.
Contact Form 1

[forminator_form id=”736906″]

Email optin form 1