Awwesome Design Logo

Hello. Hope you're having a good day. This Style Guide will help you to modify the the site, ensuring that your brand communicates effectively and resonates with your target audience.
-@awwesomedesign

Gilroy

Normal  /  400
Aa
Normal  /  400
Aa
Normal  /  400
Aa
Normal  /  400
Aa
Medium  /  500
Aa
Bold  /  700
Aa

Color Palettes

N{1-8}
Neutral Background
N1
#0000
N2
#1a1a1a
N3
#3f3f3f
N4
#808080
N5
#bebebe
N6
#e6e6e6
N7
#f1f1f1
N8
#ffffff
B{1-4}
Brand Background
Primary Color
#e6f2ff → #ffe5e5
Secondary Color
#e5ffe5 #e5fffd
Tartiary Color
#fff2e5 #ffe5ff
Complimentary Color
#e6f2ff #e9e5ff

Text Colors

T{1-8}
Neutral Colored Text

T1 Pure Black

T2 Light Black

T3 Dark Grey

T4 Pure Grey

T5 Light Grey*

T6 Dark White

T7 Light White

T8 Pure White

Headings

H1  
Size: 54px

Heading 1

H2  
Size: 44px

Heading 2

H3 
Size: 36px

Heading 3

H4
Size: 28px

Heading 4

H5 
Size: 22px
Heading 5
H6
Size: 18px
Heading 6

Paragraphs

Size: 20px

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.

Rich Text

Rich text Image

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

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. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

  • Ordered List Item
  • Ordered List Item
  • Ordered List Item
  • Ordered List Item

- Supporting paragraph

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. Excepteur sint occaecat cupidatat non proident.

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

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 italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

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.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- Supporting paragraph.

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. Excepteur sint occaecat cupidatat non proident.

3. Main Point

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. Excepteur sint occaecat. This is a link.

Buttons

Button
Primary
Button
Secondary
Button
Skeleton
Button
Tartiary
Button
Black
Button
White
Button
Danger
Button W3
Animated Button

Form Fields

Form Block  /  Text Fields  /  Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Line

Line  /  Line Dark Grey
Logo  /  Line Light White

Spacer

Spacer  /  Line Dark Grey
Logo  /  Line Light White

Resources

Type Scale | Visual calculator for scaling type.
Material Icons | Icons based on Material Design principles by Google.
Make Tints & Shades | Tints and shade generator.
Unsplash | Free to use images
☕ BUY ME A COFFEE
THANK YOU :)
THANK YOU :)
THANK YOU :)
THANK YOU :)