Design system
Editorial palette, type scale, spacing, and elevation used by the theme.
Brand hues also map through
:root in the base layout from HubSpot
theme fields.
Brand colors
Swatches use CSS variables so they track theme-global.css and
your live theme settings. Labels show the token name; the filled area is
the resolved color.
Primary
--primary-color
Brand green
Primary dark
--primary-dark
Deep contrast
Primary light
--primary-light
Highlights / mid-tones
Primary soft
--primary-soft
Wash / subtle fills
Accent
--accent-color
CTAs & focus
Accent hover
--accent-hover
Interactive hover
Background cream
--background-cream
Warm sections
Background light
--background-light
Page canvas
Surface
--surface-color
Cards / panels
Text dark
--text-dark
Headings
Text body
--text-body
Body copy
Text muted
--text-muted
Secondary text
Typography
Fraunces for display headings, Manrope for UI and body. Large steps use
fluid clamp() in theme-global.css.
--font-size-7xl
clamp · display
Display headline
--font-size-4xl
section title
Section headline
--font-size-xl
Subheading
--font-size-base
Body text for long-form content. Line height stays relaxed for readability on cream and light backgrounds.
--font-size-sm
Captions, meta, labels
Spacing
Rem-based scale from theme-global.css (excerpt).
--space-1
4px (see CSS comment)
--space-4
16px (see CSS comment)
--space-6
32px (see CSS comment)
--space-8
48px (see CSS comment)
--space-12
80px (see CSS comment)
--space-16
96px (see CSS comment)
--space-24
160px (see CSS comment)
Shadows
Editorial ink-tinted elevation tokens.
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl
Radius
Mapped from theme border settings and global fallbacks.
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-full
Patterns
See it in modules
Browse the component showcase for live React modules using these tokens.
View components showcase