Style Guide

This style guide page contains styles and components that are to be used throughout a website.

layout classes

Defined and flexible core layout we can use on all or most pages.

page-wrapper
main-wrapper
max-width-3xsmall
max-width-2xsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-semi-large
max-width-large
max-width-xlarge
max-width-2xlarge
max-width-3xlarge
max-width-4xlarge
max-width-5xlarge
max-width-6xlarge
container-max
container-min
padding-global
padding-section

Headings

The different heading styles used throughout the site.

heading-style-h0

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Typography Classes

The different typography classes used throughout the site.

Text Sizes

text-size-footer-big

Axiom Power

text-size-10xlarge

Sample text.

text-size-9xlarge

Sample text.

text-size-8xlarge

Sample text as a placeholder.

text-size-7xlarge

Sample text as a placeholder.

text-size-6xlarge

Sample text is being used as a placeholder.

text-size-5xlarge

Sample text is being used as a placeholder.

text-size-4xlarge

Sample text is being used as a placeholder.

text-size-3xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-2xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-semi-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present.

text-size-semi-medium

Sample text is being used as a placeholder for real text that is normally present.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present.

text-size-small

Sample text is being used as a placeholder for real text that is normally present.

text-size-xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-2xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-3xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-4xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-5xsmall

Sample text is being used as a placeholder for real text that is normally present.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-eyebrow

Sample text is being used as a placeholder.

Text Weights

text-weight-black
text-weight-black
text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light
text-weight-xlight
text-weight-xlight
text-weight-thin
text-weight-thin

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Rich Texts

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
image placeholder

Button Components

The different types of buttons used throughout the website.

Button
Base
Get in touch
Get in touch
Button
Brand
Get in touch
Get in touch
Button
Ghost
Get in touch
Get in touch
Button
Dark
Get in touch
Get in touch
Submit Button
Nav Link
Platform
Platform
Footer Link
Platform
Platform
Arrow Link
view all news
view all news
Arrow Link
Small
view all news
view all news
Mega List Item
Company
Leadership and market snapshot.
In-Page Nav Link
Ai Factories
In-Page Nav Link
First
Ai Factories

Colors

The different weights of colors used throughout the website.

Layers — Dark

Dark 10
Dark 15
Dark 20
Dark 25
Dark 30
Dark 35
Dark 50
Dark 60
Dark 75
Dark 80
Dark 85
Dark 90
Dark 95
Dark 100

Layers — Light

Light 10
Light 20
Light 40
Light 60
Light 70
Light 80
Light 100

System Colors

Success
Success Dark
Warning
Warning Dark
Error
Error Dark
Focus State
Webflow Class
Webflow Tag Class
Webflow Component

Neutral Colors

Transparent
Neutral 100
Neutral 200
Neutral 250
Neutral 300
Neutral 400
Neutral 500
Neutral 600
Neutral 700
Neutral 750
Neutral 800
Neutral 900

Accent Colors

Carbon 900
Carbon 800
Carbon 700
Hairline Dark
UI Line Dark
Carbon Veil 60
Carbon Veil 95

Brand Colors

Brand 200
Brand 400
Brand 500
Brand 600
Brand 700
Brand 800