Styling with custom CSS

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> We recommend that someone familiar with CSS complete this task. Due to frequent updates, it is advised to override theme variables using the .style-provider selector.

</aside>

To override theme variables, copy and paste the .style-provider selector into the Custom CSS text field and add your theme variables overrides with !important.

.style-provider {

}

Example

.style-provider {

	/* Top-level heading */
	--text-800-font-weight: 300 !important;

	/* Secondary heading */
	--text-600-letter-spacing: 1px !important;
	--text-600-text-transform: uppercase !important;
}

Typography variables

/* Base variables */
--heading-font-stack: <font-family>, var(--system-font-stack) !important;
--body-font-stack: <font-family>, var(--system-font-stack) !important;

--text-color-default: <color> !important;
--text-color-subdued: <color> !important;
--text-color-success: <color> !important;
--text-color-critical: <color> !important;

/* Top-level heading */
--text-800-font-family: <font-family>, var(--system-font-stack) !important;
--text-800-font-size: <font-size> !important;
--text-800-font-weight: <font-weight> !important;
--text-800-line-height: <line-height> !important;
--text-800-letter-spacing: <letter-spacing> !important;
--text-800-text-transform: <text-transform> !important;

/* Widget heading */
--text-700-font-family: <font-family>, var(--system-font-stack) !important;
--text-700-font-size: <font-size> !important;
--text-700-font-weight: <font-weight> !important;
--text-700-line-height: <line-height> !important;
--text-700-letter-spacing: <letter-spacing> !important;
--text-700-text-transform: <text-transform> !important;

/* Secondary heading */
--text-600-font-family: <font-family>, var(--system-font-stack) !important;
--text-600-font-size: <font-size> !important;
--text-600-font-weight: <font-weight> !important;
--text-600-line-height: <line-height> !important;
--text-600-letter-spacing: <letter-spacing> !important;
--text-600-text-transform: <text-transform> !important;

/* Tertiary heading */
--text-500-font-family: <font-family>, var(--system-font-stack) !important;
--text-500-font-size: <font-size> !important;
--text-500-font-weight: <font-weight> !important;
--text-500-line-height: <line-height> !important;
--text-500-letter-spacing: <letter-spacing> !important;
--text-500-text-transform: <text-transform> !important;

/* Body */
--text-400-font-family: <font-family>, var(--system-font-stack) !important;
--text-400-font-size: <font-size> !important;
--text-400-font-weight: <font-weight> !important;
--text-400-line-height: <line-height> !important;
--text-400-letter-spacing: <letter-spacing> !important;
--text-400-text-transform: <text-transform> !important;

/* Secondary body */
--text-300-font-family: <font-family>, var(--system-font-stack) !important;
--text-300-font-size: <font-size> !important;
--text-300-font-weight: <font-weight> !important;
--text-300-line-height: <line-height> !important;
--text-300-letter-spacing: <letter-spacing> !important;
--text-300-text-transform: <text-transform> !important;

/* Tertiary body */
--text-200-font-family: <font-family>, var(--system-font-stack) !important;
--text-200-font-size: <font-size> !important;
--text-200-font-weight: <font-weight> !important;
--text-200-line-height: <line-height> !important;
--text-200-letter-spacing: <letter-spacing> !important;
--text-200-text-transform: <text-transform> !important;

/* Small */
--text-100-font-family: <font-family>, var(--system-font-stack) !important;
--text-100-font-size: <font-size> !important;
--text-100-font-weight: <font-weight> !important;
--text-100-line-height: <line-height> !important;
--text-100-letter-spacing: <letter-spacing> !important;
--text-100-text-transform: <text-transform> !important;

Additional variables

/* Colors */
--theme-colors-button: <color> !important;
--theme-colors-button-text: <color> !important;
--theme-colors-accent: <color> !important;
--theme-colors-accent-text: <color> !important;
--theme-colors-meButton: <color> !important;
--theme-colors-meButton-text: <color> !important;

/* Buttons */
--theme-buttons-radius: <border-radius> !important;
--theme-buttons-stroke: <border-width> !important;
--theme-buttons-text-transform: <text-transform> !important;