---
sourceDocument: Australia IT Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/it-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia IT Service Management

ft:clusterId :

    - itsm

bundleId :

    - itsm

workflow :

    - Technology


---

# Theme variables

# Variables to customize a theme for Desktop Assistant {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read  
You can modify specific CSS variables to customize themes for Desktop Assistant.
{#da-theme-variables__table_irj_z4y_ygc__entry__3}

| Variable | Description | Order |
|-|-|-|
| brand-primary-darkest | The darkest shade of the brand's primary color. | 1 |
| brand-primary-darker | Slightly lighter shade than the darkest shade of the brand's primary color. | 2 |
| brand-primary | Primary brand color used in the UI. | 3 |
| brand-primary-lighter | Lighter shade than the primary brand color. | 4 |
[Table 1. Banner color]

{#da-theme-variables__table_irj_z4y_ygc}You can apply a gradient to the banner by using the specified colors in the specified order.  
{#da-theme-variables__table_fxn_cty_ygc__entry__3}

| Variable | Description | Default |
|-|-|-|
| background-secondary | Secondary background color used for UI elements that are not the main focus. | `#ffffff` |
| background-primary | Primary background color used for main focus areas on the UI. | `#f6f6f8` |
| font-size-base | Base font size used for UI text. | `16px` |
| font-weight-base | Base font weight used for UI body text. | `400` |
| font-family-sans-serif | Default sans serif font family used for UI text. | `Lato` |
| line-height-base | Default text line height for spacing and readability. | `1.4` |
| font-size-h5 | Font size for heading level 5. | `16px` or value of the <var class="keyword varname">$font-size-base</var> variable. |
| font-size-h4 | Font size for heading level 4. | `18px` This value is calculated using the ceil () function: `ceil(($font-size-base * 1.125))`. For example, if the <var class="keyword varname">font-size-base</var> value is 16 px, the <var class="keyword varname">font-size-h4</var> value is 18 px: `ceil((16px * 1.125))//18px`. |
| font-size-h3 | Font size for heading level 3. | `20px` This value is calculated using the ceil () function: `ceil(($font-size-base * 1.25))`. |
| font-size-xl | Extra large font size typically used for titles or large labels. | `24px` This value is calculated using the ceil () function: `ceil(($font-size-base * 1.5))`. |
| font-size-xs | Extra small font size typically used for minor labels or captions. | `12px` This value is calculated using the ceil () function: `ceil(($font-size-base * 0.75))`. |
| font-size-small | Smaller font than the base font, used for secondary text. | `14px` This value is calculated using the ceil () function: `ceil(($font-size-base * 0.875))`. |
| headings-font-family | Font family used for headings. | `Lato` |
| headings-font-weight | Font weight used for headings. | `600` |
[Table 2. Layout and typography variables]

{#da-theme-variables__table_fxn_cty_ygc}  
{#da-theme-variables__table_ic1_dsd_zgc__entry__3}

| Variable | Description | Default |
|-|-|-|
| text-primary | Main color used for body text. | `#181A1F` |
| text-color | General text color for the UI, which is the same as <var class="keyword varname">text-primary</var>. Set a value for this variable only if you have not already defined the value for <var class="keyword varname">text-primary</var>. | `$text-primary!default` For example, `$text-primary: #000000 !default;` |
| text-secondary | Color used for less prominent UI text. | `#474D5A` |
| text-tertiary | Color for tertiary text such as help text and annotations. | `#656E81` |
| text-muted | Muted text color that is generally the same as <var class="keyword varname">text-tertiary</var>. Set a value for this variable only if you have not already defined the value for <var class="keyword varname">text-tertiary</var>. | `$text-tertiary!default` For example, `$text-tertiary: #999999 !default;` |
| color-grey | Neutral grey color used for elements such as borders and backgrounds. | `#C6CBCB` |
| link-color | Color for hyperlinks. | `#3c59e7` |
[Table 3. Color variables]

{#da-theme-variables__table_ic1_dsd_zgc}  
{#da-theme-variables__table_btw_rf2_zgc__entry__3}

| Variable | Description | Default |
|-|-|-|
| btn-default-color | Default color for button text. | `$brand-primary` |
| btn-primary-color | Text color for primary buttons. | `$text-white` |
| btn-primary-bg | Background color for primary buttons. | `$brand-primary` |
| brand-primary | Primary brand color used across the UI. | `#4f52bd!default;` |
| brand-primary-darker | A darker shade of the primary brand color. | `#333579` |
| brand-primary-darkest | Darkest shade of the primary brand color. | `#1D1E46` |
| brand-primary-lighter | A lighter shade of the primary brand color. | `#8789D2` |
| brand-primary-lightest | Lightest shade of the primary brand color. | `#D1D2EE` |
[Table 4. Button and interactive element variables]

{#da-theme-variables__table_btw_rf2_zgc}  
{#da-theme-variables__table_rdk_yf2_zgc__entry__3}

| Variable | Description | Default |
|-|-|-|
| brand-warning-darker | Darker shade of UI warning state color. | `#AFA400` |
| brand-success-darker | Darker shade of color used for success states on the UI. | `#3B7F00` |
| brand-danger-darker | Darker shade of color used for danger states on the UI. | `#CC293C` |
| alert-warning-bg | Background color used for alerts and warnings. | `$state-warning-bg` |
| badge-color | Text color for badges on the UI. | `$text-white` |
[Table 5. Status and alert colors]

{#da-theme-variables__table_rdk_yf2_zgc}  
{#da-theme-variables__table_b1n_cg2_zgc__entry__3}

| Variable | Description | Default value |
|-|-|-|
| border-primary | Primary border color used for main UI elements. | `#8790A1` |
| border-secondary | Secondary border color used for less prominent UI elements. | `#ACB2BE` |
| border-tertiary | Tertiary border color used for background borders. | `#DADDE2` |
| border-width-xs | Extra-small border width used for UI elements like thin lines or light dividers. | `1px` |
| border-style-solid | Sets the border style to solid. | `solid` |
| border-radius-base | Base border radius for rounding corners of UI elements. | `4px` |
| input-border | Border style for input fields. | `$border-primary` |
[Table 6. Border and layout variables]

{#da-theme-variables__table_b1n_cg2_zgc}  
{#da-theme-variables__table_o2q_hg2_zgc__entry__3}

| Variable | Description | Default value |
|-|-|-|
| sp-space--xxl | Extra-extra-large spacing for wide gaps or larger layouts. | `32px` |
| sp-space--xl | Extra-large spacing for major sections. | `24px` |
| sp-space--lg | Large spacing for padding or margins. | `16px` |
| sp-space--md | Medium or standard spacing for most UI elements. | `12px` |
| sp-space--sm | Small spacing for compact layouts. | `8px` |
| sp-space--xs | Extra-small spacing for minimal gaps. | `4px` |
| sp-space--xxs | Extra-extra-small spacing for minimal UI gaps. | `2px` |
| panel-heading-padding | Padding applied to the heading section of a panel or card. | `$sp-space--xl` |
[Table 7. Spacing variables]

{#da-theme-variables__table_o2q_hg2_zgc}  
{#da-theme-variables__table_npr_kg2_zgc__entry__3}

| Variable | Description | Default value |
|-|-|-|
| Font weight variable |||
| font-weight-lg | Font weight used for large or bold text. | `600` This value is calculated using the ceil () function: `ceil(($font-weight-base * 1.5))`. |
| Shadow and effects variables |||
| sp-panel-box-shadow | Shadow styling for panel components. | `0 4px 8px 0 rgba(23, 40, 52, 0.08)` |
| sp-box-shadow--md | Medium box shadow effects for UI components. |   |
[Table 8. Font weight and shadow and effects variables]

{#da-theme-variables__table_npr_kg2_zgc}