Primary
--aura-color-primary
HubSpot Theme Style Guide
Complete design token reference and component library for the premium HubSpot CMS theme.
Color System
Theme Colors
Secondary
--aura-color-secondary
Accent
--aura-color-accent
Highlight
--aura-color-highlight
Success
--aura-color-success
Warning
--aura-color-warning
Danger
--aura-color-danger
Brand Colors
Red
--aura-color-red
Orange
--aura-color-orange
Saffron
--aura-color-saffron
Yellow
--aura-color-yellow
Green
--aura-color-green
Teal
--aura-color-teal
Peach
--aura-color-peach
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
Font Families
Heading — Sora
The quick brown fox jumps over the lazy dog
Body — Inter
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
Spacing System
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)
Border 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
Primary
Secondary
Accent
Highlight
Outline
Ghost
Gradient Primary
Gradient Accent
Badges
Primary
Secondary
Accent
Success
Warning
Danger
Gradient
Cards
Default Card
Theme preset with global settings
Hover Card
Float on hover from theme settings
Floating Card
Elevated shadow
Gradient Border
Gradient border effect
Form Elements
This field is required
Tables
Global table styles from Theme Settings → Tables. Applies to blog posts, rich text, and documentation.
| 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 |
Alerts
Success
Your changes have been saved successfully.
Warning
Please review your information before proceeding.
Error
An error occurred while processing your request.
Info
Here's some helpful information for you.