Styleguide

Source of truth of this template.

Branding Assets

Light Logo
.EPS
Guidebook Logo - Light
Dark Logo
.EPS
Guidebook Logo - Dark
EDU Logo
.EPS
Guidebook EDU
EDU Logo

Icons

Primary Icon
.EPS
Guidebook Icon

Fonts

Roboto - 400 Normal - Primary
Metropolis - 400 Normal - Headings
Material Symbols - 400 Normal - Icons
Google Material Symbols website
Webflow Instructions - How to Use

Headings

Heading 1

Heading 2

Heading 3

Heading 4 - Use for Navigation Headings Only

Heading 5
Heading 6
Label

Heading Styles

Heading Powerful

Subheader

Divider

Paragraph Styles & Colors

Styles

Paragraph

Paragraph Bold

Paragraph Em

Colors

Paragraph Steel

Paragraph Light

Paragraph GB Blue

Colors on Dark BG

Paragraph White

Paragraph Chrome

Paragraph Sizes

Paragraph Bigger

Paragraph Big

Paragraph Default

Paragraph Small

  • list item 1
  • list item 2
  • list item 3

Buttons and Form Elements

Primary CTA - Blue

Use primarily for major call-to-action's such as Demo Request, Contact Us, Pricing Inquiry, Partnership Inquiry.

#2f77a3 - Dark Blue - Border Color
#57a9db - Blue01a - Top Gradient Color
#2e94d4 - Blue02a - Bottom Gradient Color
#6cb4e0 - Blue01b - Hover Top Gradient Color
#439fd8 - Blue02b - Hover Bottom Gradient Color

Secondary CTA - Light

Use for secondary button on blue backgrounds

Tertiary CTA - Blue Outline

Use for supporting sections such as features, articles, general "Learn More" items. Works with Alt BG color and the default White BG color.

Quaternary CTA - White Transparent

This area is WIP

Background Colors

Default BG

White
#FFFFFF

Default background color for everything

BG Blue

Guidebook Blue
#439fd8

BG Ink

Ink
#515152

BG Alt

Alt - whitesmoke
#f5f5f5

Use for alternating content sections

BG Alt Blue

Alt Blue - Hover-over Effect
#eaf4fa

Better to use Steel color for text with this background

BG Six

Sixth Color
#???

WIP DNE

Primary Color Palette

Guidebook Blue
#439FD8
67, 159, 216

Ink
#515152
81, 81, 82

White
#FFFFFF
255, 255, 255

Chrome
#8F9FA9
143, 159, 169

Steel
#48565E
72, 86, 94

Light
#EAF4FA
234, 244, 250

Secondary Color Palette

Fire Opal
#EA5F5F
234, 95, 95

Anemone
#897FBA
137, 127, 186

Sea-foam
#6EE5BD
110, 229, 189

Deep Lemon
#EEEE44
238, 238, 68

Poppy
#FFC141
255, 193, 65

Sandstone
#B6A785
182, 167, 133

Eucalyptus
#A3D078
182, 167, 133

Platinum
#e1e6eb
225, 230, 235

Color Template
#xxxxxx
999, 999, 999

Rich Text Elements

Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is text link

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is text link

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.