Glimp logo
Website Style Guide
Go to Homepage

Introduction


Welcome to the Glimp Style Guide—a comprehensive resource designed to ensure consistency, clarity, and creativity across all aspects of the Glimp brand. Whether you're designing visuals, crafting messages, or building user interfaces, this guide serves as your roadmap to embodying the essence of Glimp.

This document outlines our core brand elements, including logo usage, typography, color palette.

If you have any questions about this style guide or your website in general, then please contact- info@glimp.health

Colours

Primary Colour

Light
#d6e7f4
Base Hue
#091a41
Dark
#171c28

Secondary Colour

Tint 2
#0aad73
Base Hue
#0a7d59
Shade 2
#043827

Other Colours

White
#fdfcfb
Black
#000000
Linen
#f6f1e8
Antique White
#e5dccb

Typography

The primary colour for all typography on your website is #171c28.

Subtitle

The quick brown fox jumps over the lazy dog.

Desktop: Supreme | 36 px /  2.25 rem | 150% | regular
Mobile: Supreme | 24 px /  1.5 rem | 150% | regular
H1

The quick brown fox jumps over the lazy dog.

Desktop: Playfair Display | 64 px / 4 rem | 120% | regular+Italic
Mobile: Playfair Display | 32 px / 2 rem | 120% | regular+Italic
H2

The quick brown fox jumps over the lazy dog.

Desktop: Playfair Display | 32 px / 2 rem | 120% | semibold
Mobile: Playfair Display | 24 px / 1.5 rem | 120% | semibold
H3

The quick brown fox jumps over the lazy dog.

Desktop: Playfair Display | 32 px / 2 rem | 120% | regular+Italic
Mobile: Playfair Display | 24 px / 1.5 rem | 120% | regular+Italic
H4

The quick brown fox jumps over the lazy dog.

Desktop: Playfair Display | 24 px / 1.5 rem | 120% | Semibold
Mobile: Playfair Display | 24 px / 1.5 rem | 120% | Semibold
H5
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Playfair Display | 20 px / 1.25 rem | 140% | Bold
H6
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Supreme| 16px / 1em | 150% | Bold | All Caps
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: Supreme| 16px / 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).

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

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

Logos & Assets

Glimp logo
Logo - White
Logo - Black
Favicon - 32x32px
Webclip - 256x256px

Buttons & CTAs

Filled Button - Jumbo
Filled Button - Primary
Filled Button - Light
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.

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

Example Image

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

Tag text
Pill-shape Tag
improve sleep
Tag text
Pill-shape Tag - Icon
tag Text
FIlled Tag - Primary
tag Text
Outlined Tag - Secondary
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Field - Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Field - minimal
Go to Homepage