Color System

Brand palette, surfaces, status colors, and gradients from Theme Settings → Global Colors.

Theme Colors

Primary

--aura-color-primary

Primary Hover

--aura-color-primary-hover

Secondary

--aura-color-secondary

Secondary Hover

--aura-color-secondary-hover

Accent

--aura-color-accent

Highlight

--aura-color-highlight

Success

--aura-color-success

Warning

--aura-color-warning

Danger

--aura-color-danger

Surface & Text Colors

Background

--aura-color-bg

Surface

--aura-color-surface

Section Alternate

--aura-color-section-dark

Card

--aura-color-card

Text Primary

--aura-color-text

Text Secondary

--aura-color-text-secondary

Text Muted

--aura-color-text-muted

Border

--aura-color-border

Input Background

--aura-color-input-bg

Brand Colors

Brand Accent 1

--aura-color-brand-accent-1

Brand Accent 2

--aura-color-brand-accent-2

Brand Accent 3

--aura-color-brand-accent-3

Brand Accent 4

--aura-color-brand-accent-4

Brand Accent 5

--aura-color-brand-accent-5

Brand Accent 6

--aura-color-brand-accent-6

Brand Accent 7

--aura-color-brand-accent-7

Gradients

Primary Gradient

.aura-gradient-primary

Secondary Gradient

.aura-gradient-secondary

Accent Gradient

.aura-gradient-accent

Golden Gradient

.aura-gradient-golden

Neon Gradient

.aura-gradient-neon

Rainbow Gradient

.aura-gradient-rainbow

Typography

Heading and body fonts, scale, text colors, links, and gradient text utilities.

Font Families

Heading — Sora · weight 700

The quick brown fox jumps over the lazy dog

Body — Inter · 16px · line-height 1.7

The quick brown fox jumps over the lazy dog

Typography Scale

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Large

Body

Small Text

Caption

Text Colors & Links

Primary text — --aura-color-text

Secondary text — --aura-color-text-secondary

Muted text — --aura-color-text-muted

Default link: Learn more about Aura

Gradient Text

Primary Gradient Text

Secondary Gradient Text

Accent Gradient Text

Golden Gradient Text

Neon Gradient Text

Rainbow Gradient Text

Spacing & Layout

Spacing scale and layout container tokens from Theme Settings → Layout.

8px Base Scale

--aura-space-1

4px

--aura-space-2

var(--aura-space-2)

--aura-space-3

var(--aura-space-3)

--aura-space-4

var(--aura-space-4)

--aura-space-6

var(--aura-space-6)

--aura-space-8

var(--aura-space-8)

--aura-space-10

var(--aura-space-10)

--aura-space-12

var(--aura-space-12)

--aura-space-16

var(--aura-space-16)

--aura-space-24

var(--aura-space-24)

--aura-space-32

var(--aura-space-32)

Layout Tokens

Customize under Theme Settings → Layout.

--aura-container-sm 640px

--aura-container 1140px

--aura-container-lg 1280px

--aura-section-padding 96px

--aura-content-gap 24px

Border Radius

Corner radius tokens from Theme Settings → Spacing & Radius.

Small

var(--aura-radius-sm)

Medium

var(--aura-radius-md)

Large

var(--aura-radius-lg)

Extra Large

var(--aura-radius-xl)

Pill

var(--aura-radius-pill)

Buttons

All button variants, sizes, theme presets, and dark-surface CTA styles.

Button Variants

Primary Secondary Accent Highlight Outline Ghost Surface Gradient Primary Gradient Accent

Button Sizes

Small Medium Large Extra Large

Theme Button Presets

Classes wired to Theme Settings → Buttons.

Primary Preset Secondary Preset Outline Preset

On Dark / Gradient Surfaces

Used on CTA banners and gradient sections.

White Solid Outline White Gradient Primary

Badges & Blog Tags

Status badges, gradient badges, blog topic tags, and listing filter pills.

Status Badges

Primary Secondary Accent Success Warning Danger Outline

Gradient Badges

Primary Secondary Accent Golden Neon Rainbow

Blog Tags

Customize under Theme Settings → Blog → Tags.

Default Topic Accent 1 Topic Accent 2 Topic Accent 3 Featured

Blog Listing Filters

Customize under Theme Settings → Blog → Listing Filters.

All Posts Design Marketing

Cards & Shadows

Card variants and shadow presets from Theme Settings → Cards and Shadows.

Card Variants

Theme Preset

From Theme Settings → Cards

Preset + Hover

Float on hover when enabled in theme

Hover Card

`.aura-card--hover` utility

Floating Card

Elevated shadow

Gradient Border

Gradient border effect

Shadow Presets

Driven by Theme Settings → Cards → Shadow preset and Shadows group.

Shadow 1

`.aura-shadow-1` / `--aura-shadow-card`

Shadow 2

`.aura-shadow-2` / `--aura-shadow-hover`

Shadow 3

`.aura-shadow-3` / `--aura-shadow-floating`

Tables

Table styling from Theme Settings → Tables (header style, stripes, borders).

Customize header fill, borders, stripes, and hover in Theme Settings → Tables.
Component	Type	Count	Status
Page modules	Drag & drop	48	Included
Section layouts	DnD section	18	Included
System templates	Page template	9	Included
Global header & footer	Global module	2	Included

HubSpot Theme Style Guide