Brightspot CMS Developer Guide


Swatches provide a convenient way for site designers to select colors that conform to a site’s branding. You can configure a default swatch for all sites, and designers later customize the swatch for each site as necessary.

You configure the default swatch in the theme’s file styleguide/_colorPalette.config.json. The following snippet shows defaults for two colors in a swatch; you can define up to seven colors.

  "colorPalette": {
    "colorOne": {
      "type": "color",
      "displayName": "Color 1",
      "cms.ui.placeholder": "#ff1e3c"
    "colorTwo": {
      "type": "color",
      "displayName": "Color 2",
      "cms.ui.placeholder": "#202020"

At run time, when a designer opens the color picker, the swatch appears along with the hue and saturation controls.

Color palette.png Color palette.png
Color palette

Previous Topic
Theme fields
Next Topic
Building a theme
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Landing pages
Everything you need to manage and administer content within Brightspot CMS.

Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide for configuring different integrations to support a multitude of use cases.

Google Analytics
Apple News