Thrive Design System

Style guide

Tokens and shared components forked from thrive-astro-frontend. The header and footer on this page are the real site components.

Brand palette

Mirrors the Figma variable collection: each colour has a Solid and an Accent Light value.

01 Blue
--c-blue
--c-blue-light
02 Blue Green
--c-bluegreen
--c-bluegreen-light
03 Teal
--c-teal
--c-teal-light
04 Thrive Green
--c-thrivegreen
--c-thrivegreen-light
05 Green V1
--c-greenv1
--c-greenv1-light
06 Orange
--c-orange
--c-orange-light
07 Yellow
--c-yellow
--c-yellow-light
White
--c-white
--c-white-light
Brown
--c-brown
--c-brown-light

Color

Site greens (header, footer, forms)

--thrive-green
--thrive-green-hover
--thrive-green-bright
--thrive-green-deep
--thrive-green-darker
--thrive-green-tint
--thrive-green-wash

Accent orange

--thrive-orange
--thrive-orange-hover
--thrive-orange-deep
--thrive-orange-wash

Neutrals

--thrive-ink
--thrive-ink-soft
--thrive-line
--thrive-line-strong
--thrive-surface
--thrive-surface-cool

Typography

Proxima Nova (self-hosted), falling back to Arial.

--text-h1 Heading 1
--text-h2 Heading 2
--text-h3 Heading 3
--text-h4 Heading 4
--text-lg Large body
--text-body Body text for paragraphs and lists
--text-sm Small print and labels

Radius

--radius-xs
--radius-sm
--radius-md
--radius-lg

Buttons

Component: StatsBand

150+

5 out of 5 stars

Reviews

100+

5 out of 5 stars

Reviews

Component: CtaBanner

Ready to Grow Your Business With Digital Marketing Services?

Click the button below for a free proposal

Get Free Proposal

Component: AwardBand

Thrive Named 2026 Top Digital Marketing Agency by Clutch

Example award band body copy. It renders from markdown, so bold, links and lists work.

Component: ProposalForm

Get My FREE SEO Proposal

Services you are interested in

In a hurry? Call 866-908-4748.

Component: ContactForm

Get Your Free Proposal