Custom colors in UI

Run locally for transcripts

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.