Edit theme settings > Buttons.

Buttons are pills by default (General Style > Button shape). In the modules a button has a Style choice: Primary (navy), Accent (coral), Outline or Ghost. Use Primary or Outline on White and Soft sections, Accent or Ghost on the navy grounds and banners. On dark grounds sets the colours used on navy.

All settings

Setting	Default	CSS variable	What it changes
Primary Button › Border Radius (Design Token)	Full/Pill	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Box Shadow (Design Token)	None	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Background Color	`#0C2340`	`--btn-primary-bg`	Theme CSS: blog styles, form styles, site-wide components.
Primary Button › Default State › Text Color	`#FFFFFF`	`--btn-primary-color`	Modules: Blog Hero, Comparison Matrix, Credentials Grid, Docs, Feature Grid, List with icons and 6 more. Theme CSS: blog styles, form styles, general styles, site-wide components.
Primary Button › Default State › Border Color	`#0C2340`	`--btn-primary-border`	Theme CSS: blog styles, form styles.
Primary Button › Default State › Border Width (px)	0	`--btn-primary-border-width` `--btn-border-width`	Theme CSS: blog styles, form styles.
Primary Button › Default State › Border Radius (px)	999	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Vertical Padding (px)	16	`--btn-primary-padding-y` `--btn-padding-y`	Theme CSS: blog styles, form styles.
Primary Button › Default State › Horizontal Padding (px)	28	`--btn-primary-padding-x` `--btn-padding-x`	Theme CSS: blog styles, form styles, site-wide components.
Primary Button › Default State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Default State › Font	Plus Jakarta Sans 700 16px, `#FFFFFF`	`--btn-primary-font-family` `--btn-primary-font-weight` `--btn-primary-font-style` …	Modules: Comparison Matrix, Footer Pro, Navigation Pro, Popup Modal, Pricing Cards. Theme CSS: blog styles, site-wide components.
Primary Button › Hover State › Background Color	`#15345A`	`--btn-primary-bg-hover`	Theme CSS: form styles, site-wide components.
Primary Button › Hover State › Text Color	`#FFFFFF`	`--btn-primary-color-hover`	Theme CSS: blog styles, form styles, site-wide components.
Primary Button › Hover State › Border Color	`#15345A`	`--btn-primary-border-hover`	Theme CSS: blog styles, form styles.
Primary Button › Hover State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Border Width (px)	0	`--btn-primary-border-width-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Border Radius (px)	999	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Vertical Padding (px)	16	`--btn-primary-padding-y-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Horizontal Padding (px)	28	`--btn-primary-padding-x-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Primary Button › Hover State › Font	Plus Jakarta Sans 700 16px, `#FFFFFF`	`--btn-primary-font-family-hover` `--btn-primary-font-weight-hover` `--btn-primary-font-style-hover` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Border Radius (Design Token)	Full/Pill	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Box Shadow (Design Token)	Manual (use exact values below)	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Background Color	`#FFFFFF`	`--btn-secondary-bg`	Theme CSS: form styles, site-wide components.
Secondary Button › Default State › Text Color	`#0C1A2B`	`--btn-secondary-color`	Theme CSS: form styles, site-wide components.
Secondary Button › Default State › Border Color	`#E5E0D8`	`--btn-secondary-border`	Theme CSS: form styles, site-wide components.
Secondary Button › Default State › Border Width (px)	2	`--btn-secondary-border-width`	Modules: Navigation Pro. Theme CSS: form styles, site-wide components.
Secondary Button › Default State › Border Radius (px)	999	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Vertical Padding (px)	8	`--btn-secondary-padding-y`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Horizontal Padding (px)	18	`--btn-secondary-padding-x`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Box Shadow › Spread (px)	1	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Box Shadow › Shadow Color	`#EBEBEB`	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Default State › Font	Plus Jakarta Sans 700 16px, `#0C1A2B`	`--btn-secondary-font-family` `--btn-secondary-font-weight` `--btn-secondary-font-style` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Background Color	`#F2F2F2`	`--btn-secondary-bg-hover`	Theme CSS: form styles.
Secondary Button › Hover State › Text Color	`#171717`	`--btn-secondary-color-hover`	Theme CSS: form styles.
Secondary Button › Hover State › Border Color	`#EBEBEB`	`--btn-secondary-border-hover`	Theme CSS: form styles.
Secondary Button › Hover State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Box Shadow › Spread (px)	1	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Box Shadow › Shadow Color	`#EBEBEB`	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Border Width (px)	0	`--btn-secondary-border-width-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Border Radius (px)	9999	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Vertical Padding (px)	8	`--btn-secondary-padding-y-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Horizontal Padding (px)	18	`--btn-secondary-padding-x-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Secondary Button › Hover State › Font	Plus Jakarta Sans 500 16px, `#171717`	`--btn-secondary-font-family-hover` `--btn-secondary-font-weight-hover` `--btn-secondary-font-style-hover` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Border Radius (Design Token)	None (0px)	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Box Shadow (Design Token)	None	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Background Color	`#FAFAFA` at 0%	`--btn-tertiary-bg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Text Color	`#4D4D4D`	`--btn-tertiary-color`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Border Color	`#FAFAFA` at 0%	`--btn-tertiary-border`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Border Width (px)	0	`--btn-tertiary-border-width`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Border Radius (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Vertical Padding (px)	0	`--btn-tertiary-padding-y`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Horizontal Padding (px)	0	`--btn-tertiary-padding-x`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Default State › Font	Plus Jakarta Sans 500 16px, `#4D4D4D`	`--btn-tertiary-font-family` `--btn-tertiary-font-weight` `--btn-tertiary-font-style` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Background Color	`#FAFAFA` at 0%	`--btn-tertiary-bg-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Text Color	`#171717`	`--btn-tertiary-color-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Border Color	`#FAFAFA` at 0%	`--btn-tertiary-border-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Border Width (px)	0	`--btn-tertiary-border-width-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Border Radius (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Vertical Padding (px)	0	`--btn-tertiary-padding-y-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Horizontal Padding (px)	0	`--btn-tertiary-padding-x-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Tertiary Button › Hover State › Font	Plus Jakarta Sans 500 16px, `#171717`	`--btn-tertiary-font-family-hover` `--btn-tertiary-font-weight-hover` `--btn-tertiary-font-style-hover` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Border Radius (Design Token)	None (0px)	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Box Shadow (Design Token)	None	None	Choose a design token or use manual value. Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Background Color	`#FAFAFA` at 0%	`--btn-ghost-bg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Text Color	`#4D4D4D`	`--btn-ghost-color`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Border Color	`#FAFAFA` at 0%	`--btn-ghost-border`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Border Width (px)	0	`--btn-ghost-border-width`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Border Radius (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Vertical Padding (px)	0	`--btn-ghost-padding-y`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Horizontal Padding (px)	0	`--btn-ghost-padding-x`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Default State › Font	Plus Jakarta Sans 500 16px, `#4D4D4D`	`--btn-ghost-font-family` `--btn-ghost-font-weight` `--btn-ghost-font-style` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Background Color	`#FAFAFA` at 0%	`--btn-ghost-bg-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Text Color	`#171717`	`--btn-ghost-color-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Border Color	`#FAFAFA` at 0%	`--btn-ghost-border-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Box Shadow › X Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Box Shadow › Y Offset (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Box Shadow › Blur (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Box Shadow › Spread (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Box Shadow › Shadow Color	`#000000` at 0%	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Border Width (px)	0	`--btn-ghost-border-width-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Border Radius (px)	0	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Vertical Padding (px)	0	`--btn-ghost-padding-y-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Horizontal Padding (px)	0	`--btn-ghost-padding-x-hover`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Ghost Button › Hover State › Font	Plus Jakarta Sans 500 16px, `#171717`	`--btn-ghost-font-family-hover` `--btn-ghost-font-weight-hover` `--btn-ghost-font-style-hover` …	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Small & Large Button Padding › Small, horizontal (px)	22	`--btn-padding-x-sm`	Modules: Navigation Pro.
Small & Large Button Padding › Small, vertical (px)	10	`--btn-padding-y-sm`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Small & Large Button Padding › Large, horizontal (px)	30	`--btn-padding-x-lg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Small & Large Button Padding › Large, vertical (px)	16	`--btn-padding-y-lg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Small & Large Button Padding › Height SM	46	`--btn-height-sm`	Modules: Comparison Matrix, Consultation Booking, Credentials Grid, Docs, FAQ Library, Feature Grid and 11 more. Theme CSS: blog styles, site-wide components.
Small & Large Button Padding › Height MD	52	`--btn-height-md` `--btn-height`	Modules: Blog Hero, FAQ Library, Navigation Pro, Popup Modal, Property Detail, Reviews and 1 more. Theme CSS: form styles, site-wide components.
Small & Large Button Padding › Height LG	56	`--btn-height-lg`	Modules: Popup Modal.
Small & Large Button Padding › Font size LG	17	`--btn-font-size-lg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
Small & Large Button Padding › Icon	16	`--btn-icon-md` `--btn-icon-size`	Modules: Resource Card, System Message.
Small & Large Button Padding › Icon LG	16	`--btn-icon-lg` `--btn-icon-size-lg`	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.
On dark grounds › Primary ground	`#FF7A52`	`--btn-on-dark-primary-bg`	Modules: Footer Pro, Navigation Pro. Theme CSS: blog styles, form styles, site-wide components.
On dark grounds › Primary text	`#07182A`	`--btn-on-dark-primary-color` `--btn-on-dark-primary-ink`	Modules: Agent Profile, Blog Hero, Client Stories, Comparison Matrix, Credentials Grid, Docs and 12 more. Theme CSS: blog styles, form styles, general styles, site-wide components.
On dark grounds › Primary ground, hover	`#FF9A7A`	`--btn-on-dark-primary-bg-hover`	Modules: Footer Pro, Navigation Pro. Theme CSS: blog styles, form styles, site-wide components.
On dark grounds › Outline label	`#FFFFFF`	`--btn-on-dark-outline-ink`	Theme CSS: site-wide components.
On dark grounds › Outline border	`#FFFFFF` at 35%	`--btn-on-dark-outline-border`	Theme CSS: site-wide components.
On dark grounds › Outline border (hover)	`#FFFFFF`	`--btn-on-dark-outline-border-hover`	Theme CSS: site-wide components.
Link button underline	`#EBEBEB`	`--btn-link-underline`	Theme CSS: typography.
Disabled opacity (%)	50	None	Not read by the current modules or stylesheets. Kept so content saved with an earlier version keeps its value.

Porchlight, set up end to end.

Something not covered here?

Porchlight,
set up end to end.