---
title: "CSS variables"
date: "2023-11-15T16:12:01+00:00"
summary: "Unlock Site Studio's CSS variables for custom elements, components, and Drupal themes. Access color palettes, font settings, and responsive grid options to enhance your web development workflow and create consistent designs."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/css-variables"
id: "a00f284a-259c-4aec-a105-75257d144744"
---

Site Studio provides access to various CSS variables from the Website settings, which can be utilized in the development of Custom Elements, Custom Components or the creation of a custom theme in Drupal.

See below a table of available CSS variables: 

  

 

CSS variable

Value

Base unit settings

 

 

Base font size

\--ssa-base-unit-settings-font-size

px value

 

 

 

Color palette

 

 

\*Colors

\--ssa-color-palette-\[uid\]

hex / rgb(a) color

 

 

 

Default font settings

 

 

Default font family

\--ssa-default-font-settings-font-family

Font stack

Default color

\--ssa-default-font-settings-color

hex / rgb(a) color

 

 

 

Font libraries

 

 

\*Font stacks

\--ssa-font-stacks-\[uid\]

Font stack

 

 

 

Responsive grid settings

 

 

\*Width / Minimum width

\--ssa-responsive-grid-settings-width

px / rem value

\*\*Boxed width

\--ssa-responsive-grid-settings-boxed-width

px / rem value

\*\*Inner gutters

\--ssa-responsive-grid-settings-inner-gutter

px / rem value

\*\*Outer gutters

\--ssa-responsive-grid-settings-outer-gutter

px / rem value

\* The UID can be located on the relevant Website settings page, situated in the box adjacent to $coh-color or $coh-font, as applicable.  
\*\*CSS variable is designed to be responsive and will adapt accordingly when the media query conditions are met.  
  
For more information on using CSS variables [https://developer.mozilla.org/en-US/docs/Web/CSS/Using\_CSS\_custom\_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)