Globals Reference

Code Mode lets you edit a Descope style as raw JSON instead of using the GUI. This page lists globals object keys, which include the colors and typography keys that apply to every screen and component in a style.

For component-level keys, like badges, logos, and input states, see Components Reference.

Where to Edit These Values

Open the Styles tab in the Descope Console.
Select a style file, then toggle Code Mode on.
Edit globals.colors or globals.typography directly, or change a value in the GUI first to reveal its corresponding key in Code Mode.

Structure

Every style's globals follow this shape. Each block below is a real, complete example, not a placeholder:

{
  "globals": {
    "colors": {
      "primary": {
        "main": "#6D829CFF",
        "light": "#ACB8C7",
        "dark": "#404E5F",
        "highlight": "#EBEEF2",
        "contrast": "#FFFFFF"
      }
    },
    "fonts": {
      "font1": {
        "label": "Roboto",
        "family": ["Roboto", "ui-sans-serif", "system-ui", "Arial", "sans-serif"],
        "url": "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
      }
    },
    "typography": {
      "h1": {
        "font": "var(--descope-fonts-font2-family)",
        "size": "60px",
        "weight": "300"
      }
    },
    "spacing": { "xs": "2px", "sm": "4px", "md": "8px", "lg": "16px", "xl": "32px" },
    "radius": { "xs": "5px", "sm": "10px", "md": "15px", "lg": "20px", "xl": "25px", "2xl": "30px", "3xl": "35px" },
    "border": { "xs": "1px", "sm": "2px", "md": "3px", "lg": "4px", "xl": "5px" },
    "shadow": {
      "narrow": { "sm": "0 1px 2px -1px", "md": "0 2px 4px -2px", "lg": "0 4px 6px -4px", "xl": "0 8px 10px -6px", "2xl": "0 16px 16px -8px" }
    },
    "direction": "ltr"
  }
}

Colors

There are six color palettes. Each one maps to a section of the Colors panel in the GUI, and each uses the same five shade keys.

Key	GUI label	Typical use
`primary`	Primary	Your main brand color, used for buttons, links, and focus states
`secondary`	Secondary	Secondary actions and accents
`success`	Success	Success messages and confirmations
`warning`	Warning	Warnings and cautionary states
`error`	Error	Error messages and destructive actions
`surface`	Greys	Neutral tones used for backgrounds, borders, and surfaces

Each palette above takes the same five shade keys:

Shade key	Description
`main`	The base color for the palette
`light`	A lighter variant of `main`
`dark`	A darker variant of `main`
`highlight`	Used for hover and highlight states
`contrast`	A contrasting color, typically used for text or icons placed on top of `main`

Full path format: globals.colors.<palette>.<shade>. For example: globals.colors.primary.main.

{
  "globals": {
    "colors": {
      "primary": {
        "main": "#124990FF",
        "dark": "#0B2C56",
        "light": "#1966CA",
        "highlight": "#3D87E7",
        "contrast": "#FFFFFF"
      },
      "secondary": {
        "main": "#BCAECAFF",
        "dark": "#715988",
        "light": "#FFFFFF",
        "highlight": "#FFFFFF",
        "contrast": "#000000"
      },
      "surface": {
        "main": "#EBEBEBFF",
        "dark": "#8D8D8D",
        "light": "#FFFFFF",
        "highlight": "#FFFFFF",
        "contrast": "#000000"
      },
      "success": {
        "main": "#00B100FF",
        "dark": "#006A00",
        "light": "#00F800",
        "highlight": "#40FF40",
        "contrast": "#FFFFFF"
      },
      "warning": {
        "main": "#F8E71CFF",
        "dark": "#A19505",
        "light": "#FBF287",
        "highlight": "#FFFEF2",
        "contrast": "#000000"
      },
      "error": {
        "main": "#C71D12FF",
        "dark": "#77110B",
        "light": "#EE4C42",
        "highlight": "#F59892",
        "contrast": "#FFFFFF"
      }
    }
  }
}

Typography

Typography is built from two font family slots and seven preset text variants.

Font families

globals.fonts holds two slots, each a full object rather than a single value:

Property	Description
`label`	Display name shown in the GUI font picker
`family`	Ordered CSS font stack (the chosen font plus system fallbacks)
`url`	Only present for custom or Google-hosted fonts. A stylesheet URL the flow loads to fetch the font file

{
  "globals": {
    "fonts": {
      "font1": {
        "label": "Roboto",
        "family": ["Roboto", "ui-sans-serif", "system-ui", "Arial", "sans-serif"],
        "url": "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
      },
      "font2": {
        "label": "Sans Serif",
        "family": ["ui-sans-serif", "system-ui", "-apple-system", "Arial", "sans-serif"]
      }
    }
  }
}

Each slot's family array generates the --descope-fonts-font1-family and --descope-fonts-font2-family CSS variables. Typography and component tokens reference these with var(...). To add a custom font, follow the Custom Fonts steps in the GUI first. Code Mode only shows the result. It isn't the place to write new @font-face rules directly.

Text variants

Each variant accepts the same three properties: font, size, and weight.

JSON key	GUI label
`h1`	Heading 1
`h2`	Heading 2
`h3`	Heading 3
`subtitle1`	Subtitle 1
`subtitle2`	Subtitle 2
`body1`	Body 1
`body2`	Body 2

Property reference:

Property	Type	Example
`font`	CSS variable reference	`var(--descope-fonts-font2-family)`
`size`	Pixel value, as a string	`"60px"`
`weight`	CSS `font-weight` value, as a string	`"300"`

Font weight values

The GUI exposes nine named weight increments. In Code Mode, set the raw numeric value:

GUI label	`weight` value
Thin	`100`
Extra Light	`200`
Light	`300`
Regular	`400`
Medium	`500`
Semi Bold	`600`
Bold	`700`
Extra Bold	`800`
Black	`900`

A variant only needs the properties you're overriding. Anything you omit falls back to the style's default:

{
  "globals": {
    "fonts": {
      "font1": {
        "family": [
          "Poppins",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "Noto Sans",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji"
        ],
        "label": "Poppins",
        "url": "https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"
      },
      "font2": {
        "family": [
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "Noto Sans",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji"
        ],
        "label": "Sans Serif"
      }
    },
    "typography": {
      "h1": {
        "font": "var(--descope-fonts-font1-family)"
      },
      "h2": {
        "size": "40px",
        "weight": "700"
      },
      "h3": {
        "size": "30px"
      },
      "body1": {
        "size": "15px"
      },
      "body2": {
        "size": "12px"
      },
      "subtitle2": {
        "size": "22px"
      },
      "subtitle1": {
        "size": "24px"
      }
    }
  }
}

Spacing

globals.spacing defines five step sizes used for padding, gaps, and margins across components. Components use them as var(--descope-spacing-<key>):

Key	Value
`xs`	`2px`
`sm`	`4px`
`md`	`8px`
`lg`	`16px`
`xl`	`32px`

Corner Radius

globals.radius defines seven roundness steps, used as var(--descope-radius-<key>):

Key	Value
`xs`	`5px`
`sm`	`10px`
`md`	`15px`
`lg`	`20px`
`xl`	`25px`
`2xl`	`30px`
`3xl`	`35px`

Border Width

globals.border defines five stroke widths, used as var(--descope-border-<key>):

Key	Value
`xs`	`1px`
`sm`	`2px`
`md`	`3px`
`lg`	`4px`
`xl`	`5px`

Shadow

globals.shadow defines two families of shadow fragments, narrow and wide. Each one has five sizes: sm, md, lg, xl, and 2xl. These are partial box-shadow values (offset and blur, no color). A component combines one of these with its own -shadow-color variable when it renders:

{
  "globals": {
    "shadow": {
      "wide": { "sm": "0 2px 3px -0.5px", "md": "0 4px 6px -1px" },
      "narrow": { "sm": "0 1px 2px -1px", "md": "0 2px 4px -2px" }
    }
  }
}

A component typically layers both, for example:

"--descope-container-box-shadow": "var(--descope-shadow-wide-lg) var(--descope-container-shadow-color), var(--descope-shadow-narrow-lg) var(--descope-container-shadow-color)"

Direction

globals.direction is a single value, "ltr" or "rtl", that drives the --descope-direction variable most components inherit for host-direction. Set this once to flip layout for right-to-left languages, instead of overriding direction on each component.

Applying a Color to a Component

Colors defined in globals.colors are used elsewhere in the theme through CSS variable references, not hard-coded values. For example, a notification card references the error palette like this:

{
  "components": {
    "notificationCard": {
      "mode": {
        "error": {
          "--descope-notification-card-background-color": "var(--descope-colors-error-main)",
          "--descope-notification-card-border-color": "var(--descope-colors-error-light)"
        }
      }
    }
  }
}

This is why editing a globals.colors shade updates every component that references it. The color only lives in one place. See Advanced Styling Examples for more patterns like this at the component level.

Was this helpful?

On this page