Table of Contents

Color

Color Shade Preview

Light (default)

Strongest Text

Strong Text - Title of Article

Base Text - Description or the content
Subtle Text - The inactive text
MainSubtle

Dark Mode

Strongest Text Light

Strong Text Light - Title of

Base Text Light - Description or the content
Subtle Text Light - The inactive text
MainSubtle

Content Color

Default

Strongest Text

Strong Text

Base Text
Subtle Text

Dark Scheme

Strongest Text Light

Strong Text Light

Base Text Light
Subtle Text Light

Background Color

Default

gl-bg-base

Background

Page background.

gl-bg-shade

Shade

Second layer background color.

gl-bg-shade-2

Shade 2

Third layer background color.

gl-bg-subtle

Subtle

Stroke, dividers, line: inputs, select, disabled button, etc.

Dark Scheme

gl-bg-base-dark

Background

Page background.

gl-bg-shade-dark

Shade Dark

Second layer background color.

gl-bg-shade-2-dark

Shade 2 Dark

Third layer background color.

gl-bg-subtle-dark

Subtle

Stroke, dividers, line: inputs, select, disabled button, etc.

Brand Color

Primary

gl-primary

Primary

Main brand color used across key UI elements.

gl-primary-medium

Primary Medium

A stronger tone for hover states or visual emphasis.

gl-primary-dark

Primary Dark

The darkest variant, ideal for high-contrast needs

gl-primary-light

Primary Light

A soft tint used for background balance or subtle sections.

gl-primary-80

Primary 80%

Primary color with opacity 80%

gl-primary-60

Primary 60%

Primary color with opacity 60%

gl-primary-40

Primary 40%

Primary color with opacity 40%

gl-primary-20

Primary 20%

Primary color with opacity 20%

Secondary

gl-secondary

Secondary Color

Secondary brand color used across key UI elements.

gl-secondary-medium

Secondary Medium

A stronger tone for hover states or visual emphasis.

gl-secondary-dark

Secondary Dark

The darkest variant, ideal for high-contrast needs

gl-secondary-light

Secondary Light

A soft tint used for background balance or subtle sections.

gl-secondary-80

Secondary 80%

Secondary color with opacity 80%

gl-secondary-60

Secondary 60%

Secondary color with opacity 60%

gl-secondary-40

Secondary 40%

Secondary color with opacity 40%

gl-secondary-20

Secondary 20%

Secondary color with opacity 20%

Neutral Color

Neutral Color

gl-bg-black

Black

bg-ultra-dark-gray

Ultra Dark Gray

bg-dark-gray

Dark Gray

gl-bg-gray

Gray

gl-bg-light-gray

Light Gray

gl-bg-ultra-light-gray

Ultra Light Gray

gl-bg-white

White

gl-bg-transparent

Transparent

Neutral Transparent Color

bg-black-80

Black 80%

bg-black-60

Black 60%

bg-black-40

Black 40%

bg-black-20

Black 20%

bg-white-80

White 80%

bg-white-60

White 60%

bg-white-40

White 40%

bg-white-20

White 20%

System Color

File Successfully Downloaded.
Failed to Download The File.
Warning! No Internet Connection.
You need to log in first.

Typography

Heading Sizing

H1 - Heading 3XL

H2 - Heading 2XL

H3 - Heading XL

H4 - Heading L

H5 - Heading M
H6 - Heading S

Body Text

Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

Paragraph Default- Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

Paragraph Smalll- Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

Blockquote - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

Special Heading

Default

Special Heading

Special Heading Center

On Dark Background

Special Heading

Special Heading Center

Accent Heading

Default

Title (non heading)
Subheading

Script Accent Font

On Dark Background

Title (non heading)
Subheading

Script Accent Font

Spacing

Spacing Level

Space XS
Space S
Space M
Space L
Space XL
Space 2XL
Space 3XL
Space 4XL

Contextual Spacing

Section Padding

Content Example

Space to give some breathspace on top and bottom section. Applied to all section element through theme panel.

Side Padding

Content Example

Space in the side of section to make sure the content doesn't touch the edge of screen, especially on mobile. Applied to section elemen through theme panel.

Content Gap

Content Example

Space to give consistent gap between heading and the content or ele

Content Gap Large

Content Example

Space to give consistent gap between elements blocks (ex: content and media).

Grid Gap

Content Example

Consistent gap between repeating items.

Content Example

Consistent gap between repeating items.

Content Example

Consistent gap between repeating items.

Component

Button Main

Default

Button DefaultButton MainButton Main with Icon

On Dark Background

Button Default BrightButton Main BrightButton Main Bright with Icon

Button Subtle

Default

Button Secondary DefaultButton SubtleButton Subtle with Icon

On Dark Background

Button Subtle BrightButton Subtle Bright with Icon

Icon

Default

Icon Small
Icon Medium
Icon Small
Button main icon only
Button subtle icon only
Slider Arrow

On Dark Background

Button main icon only
Button subtle icon only
Slider Arrow Bright

Link

Default

Link Default Link PrimaryLink Primary with Icon

On Dark Background

Link Default LightLink Primary LightLink Primary Light with Icon

Effects

Border Radius

Radius XS
Radius S
Radius M
Radius L
Radius XS

Shadow

Shadow S
Shadow M
Shadow L
Shadow Primary

Hover Shadow

Hover Shadow S
Hover Shadow M
Hover Shadow L
Hover Shadow Primary

Input & Form

Search Form

Default

On Dark Background

Form

Default

On Dark Background

Subscription Form

Default

On Dark Background

Dropdown

Default

  • Placeholder Select

    • On Dark Background

  • Placeholder Select

    • Post Element

    Breadcrumbs

    Default

    On Dark Background

    Pagination

    Default

    On Dark Background

    Animation

    Animation on Scroll

    Animate on Scroll Primary
    Animate on Scroll Secondary

    Mouse Animation

    Hover Zoom In
    Hover Translate up
    Pressed Zoom Out