Website Style Guide

TYPOGRAPHY

(Heading & Bodycopy -
Google Font Alternative for NEUTRAFACE TEXT)

Proxima Nova

ABCDEFGHIJKIMNOPQRSTUVWXYZ
abcdefghijkimnopqrstuvwxyz

Heading 1

Bold 700

Heading 2

Bold 700

Heading 3

Bold 700

Heading 4

Bold 700

Heading 5

Bold 700

Heading 6

Bold 700

Paragraph (Regular)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

16px | 1rem | Light 300

Paragraph (Display)

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.

24px | 1.5rem | Bold 700

Paragraph (Large)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

20px | 1.25rem | Light 300

Paragraph (Small)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

13px | 0.8rem | Light 300

Headline

Title case for longer headlines.

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Uppercase alternative for shorter headlines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternative Headline

(Heading & Subhead -
Google Font Alternative for PROXIMA SERA)

Headline when no or little body copy is needed.

(Proxima Sera - Light 300)

Subhead

(Proxima Sera - Light 300 - 1.25rem)

(Proxima Nova - Bold 700 - 1.25rem)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Subtitle

(Proxima Sera - Light 300 - 1.5rem)

Lorem Ipsum Dolor Consectetur

Eyebrow Heading

(Bold 700 - 0.8rem - Letter Spacing 1)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

COLOR

Primary
(teal)

Secondary
(White)

Accent
(Dark gray)

(light gray)

BUTTON

(Solid)

Learn More

(Solid on Dark)

Learn More

(Outline)

More

(Outline on Dark)

More

(Text)

More

(Text on Dark)

More

BUTTON ALTERNATIVE

(Solid-Default)

(Solid-Hover)

(Outline-Default)

(Outline-Hover)

(Outline-On Dark-default)

(Outline-On Dark-Hover)

BULLET LISTING

Ipsum dolor sit amet:

  • Nam ornare neque ac diam egestas gravida
  • Donec euismod odio at luctus sodales
  • Unde omnis iste natus error
  • Lorem ipsum dolor sit amet, consectetur
  • Ullamco laboris nisi ut aliquip

PATTERN

Subtle line pattern background

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

Title case for longer headlines.

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Uppercase alternative for shorter headlines.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternative Headline

Headline when no or little body copy is needed.

(Libre Baskerville - Regular 400)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Subhead

(Libre Baskerville - Regular 400 - 1.25rem)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

COLOR

Primary

Secondary
(White)

Accent
(Dark gray)

(light gray)

BUTTON

(Solid)

Learn More

(Solid on Dark)

Learn More

(Outline)

More

(Outline on Dark)

More

(Text)

More

(Text on Dark)

More

BUTTON ALTERNATIVE

(Solid-Default)

(Solid-Hover)

(Outline-Default)

(Outline-Hover)

(Outline-On Dark-default)

(Outline-On Dark-Hover)

CONTENT LINK

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. 

BULLET LISTING

Ipsum dolor sit amet:

  • Nam ornare neque ac diam egestas gravida
  • Donec euismod odio at luctus sodales
  • Unde omnis iste natus error
  • Lorem ipsum dolor sit amet, consectetur
  • Ullamco laboris nisi ut aliquip

PATTERN

Subtle line pattern background

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

Title case for longer headlines.

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Uppercase alternative for shorter headlines.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternative Headline

Headline when no or little body copy is needed.

(Libre Baskerville - Regular 400)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Subhead

(Libre Baskerville - Regular 400 - 1.25rem)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

COLOR

Primary

Secondary
(White)

Accent
(Dark gray)

(light gray)

BUTTON

(Solid)

Learn More

(Solid on Dark)

Learn More

(Outline)

More

(Outline on Dark)

More

(Text)

More

(Text on Dark)

More

BUTTON ALTERNATIVE

(Solid-Default)

(Solid-Hover)

(Outline-Default)

(Outline-Hover)

(Outline-On Dark-default)

(Outline-On Dark-Hover)

CONTENT LINK

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. 

BULLET LISTING

Ipsum dolor sit amet:

  • Nam ornare neque ac diam egestas gravida
  • Donec euismod odio at luctus sodales
  • Unde omnis iste natus error
  • Lorem ipsum dolor sit amet, consectetur
  • Ullamco laboris nisi ut aliquip

PATTERN

Subtle line pattern background

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

Title case for longer headlines.

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Uppercase alternative for shorter headlines.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternative Headline

Headline when no or little body copy is needed.

(Noto Serif - Regular 400)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Subhead

(Noto Serif - Regular 400 - 1.25rem)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

COLOR

Primary

Secondary
(White)

Accent
(Dark gray)

(light gray)

BUTTON

(Solid)

Learn More

(Solid on Dark)

Learn More

(Outline)

More

(Outline on Dark)

More

(Text)

More

(Text on Dark)

More

BUTTON ALTERNATIVE

(Solid-Default)

(Solid-Hover)

(Outline-Default)

(Outline-Hover)

(Outline-On Dark-default)

(Outline-On Dark-Hover)

CONTENT LINK

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. 

BULLET LISTING

Ipsum dolor sit amet:

  • Nam ornare neque ac diam egestas gravida
  • Donec euismod odio at luctus sodales
  • Unde omnis iste natus error
  • Lorem ipsum dolor sit amet, consectetur
  • Ullamco laboris nisi ut aliquip

PATTERN

Subtle line pattern background

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline

Title case for longer headlines.

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Uppercase alternative for shorter headlines.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternative Headline

Headline when no or little body copy is needed.

(Libre Baskerville - Regular 400)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Subhead

(Libre Baskerville - Regular 400 - 1.25rem)

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

COLOR

Primary

Secondary
(White)

Accent
(Dark gray)

(light gray)

BUTTON

(Solid)

Learn More

(Solid on Dark)

Learn More

(Outline)

More

(Outline on Dark)

More

(Text)

More

(Text on Dark)

More

BUTTON ALTERNATIVE

(Solid-Default)

(Solid-Hover)

(Outline-Default)

(Outline-Hover)

(Outline-On Dark-default)

(Outline-On Dark-Hover)

CONTENT LINK

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. 

BULLET LISTING

Ipsum dolor sit amet:

  • Nam ornare neque ac diam egestas gravida
  • Donec euismod odio at luctus sodales
  • Unde omnis iste natus error
  • Lorem ipsum dolor sit amet, consectetur
  • Ullamco laboris nisi ut aliquip

PATTERN

Subtle line pattern background

Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit, sed do Eiusmod

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

888.801.MORE

801 Cherry Street Suite 500
Fort Worth, Texas 76102

info@moregroup-inc.com

Linkedin