Configuring brand colors

You can manage your brand colors at https://localhost:3000/brands/colors (opens in a new tab). Any changes made via the GUI will be saved to the Nova Manifest.

Do it manually

Or, if you'd prefer to do it manually, inside of /style-guide/brands/${brand-name}/${brand-name}.json you'll see an array of color definitions.

{
	"colors": [
		{
			"description": "IndieWire Blue",
			"type": "brand",
			"value": "#265DF5",
			"variable": "--indiewire--color--blue"
		}
	]
}

• description - Name of the color.
• type - Taxonomical category for the color. Not actually used for anything yet.
• value - Hex value of the color.
• variable - The custom CSS variable for this color. Follow the format --brand-name--color--color-name.

Note: Nova's colors (opens in a new tab) can be used on any brand. They are considered universal.

Follow the examples for Nova or IndieWire (opens in a new tab).