Custom colors in UI

1. Add custom theme colors

Start by extending the Tailwind theme with the raw color tokens.

You can do this in the

file.

export default {
	theme: {
		extend: {
			colors: {
				// Add the colors here...
			},
		},
	},
}

There should be 14 new colors added to the theme:

Update the UI to use the color tokens to match the design.

Remember, we'll change to semantic design tookens later — but let's get the UI right first with these new colors in place.