Likemind Wordmark Black
Website Style Guide
Go to Homepage

Primary Colors

Base Hue
#dc7d3c
Base Hue
#565557
Base Hue
#dc7d3c

Other Colours

White
#EEEEEE
Black
#333333
Success
#00b04f
Error
#b00020
Error
#b00020

Typography

H1

The quick brown fox jumps over the lazy dog.

H2

The quick brown fox jumps over the lazy dog.

H3

The quick brown fox jumps over the lazy dog.

H4

The quick brown fox jumps over the lazy dog.

H5
The quick brown fox jumps over the lazy dog.
H6
The quick brown fox jumps over the lazy dog.
Paragraph

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.

Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .p1 class can have a number of combo-classes applied to it, such as -

.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

The .p1 class can have a number of combo-classes applied to it, such as -

.mb0 Margin Bottom to 0
.mt0 Margin Top to 0
.ml0 Margin left to 0
.mr0 Margin right to 0
.pt0 Padding top 0
.pr0 Padding Right to 0
.pb0 Padding bottom 0

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .text class can also have the same combo-classes applied to it as the .p1 class.

Logos & Assets

Likemind Logo White
Logo - White
Likemind Wordmark Black
Logo - Black
Favicon - 32x32px
Likemind Logo
Webclip - 256x256px

Buttons & CTAs

Filled Button - Primary
Filled Button - Secondary
Filled Button - Icon
Outlined Button - Primary
Outlined Button - Secondary
Outlined Button - Icon

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

L

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

This is a H2 heading

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.

This is a H3 heading

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.

This is a H4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Man holding a camera while looking up at a pair of tall redwood trees in a forest.
asdasdasd

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Other

You can use this section for any other important elements that you'll use throughout your client's website, such as -

• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons

Go to Homepage