Brand Color Scales

Complementary Color Scales

Components

Brand

#3B82F6

Buttons

Badges

Badge Badge

Progress Bars

Text Highlights

This text includes a highlight with proper contrast.

Cards

Card

Automatic text contrast ensures readability.

Calendar Events

Sunday, November 30
Design system meeting
9 – 10 AM
PR Reviews
10 – 11 AM

Pricing Plans

Product Card

1 Boot

Image

Complementary

#F59E0B

Buttons

Badges

Badge Badge

Progress Bars

Text Highlights

This text includes a highlight with proper contrast.

Cards

Card

Automatic text contrast ensures readability.

Calendar Events

Sunday, November 30
Design system meeting
9 – 10 AM
PR Reviews
10 – 11 AM

Pricing Plans

Product Card

1 Boot

Image

brand Charts

Line Chart

Brand Line ChartA line chart showing variations over quarters using the brand color.Coolness LevelTime (Quarters)

Bar Chart

Brand Bar ChartA bar chart showing brand color intensity across four quarters.Power OutputQuartersQ1Q2Q3Q4

complementary Charts

Line Chart

Complementary Line ChartA line chart showing variations over quarters using the complementary color.Spice UnitsSeasons of Drama

Bar Chart

Complementary Bar ChartA bar chart showing complementary color intensity across four quarters.Flavor IntensityEmotional ArcsQ1Q2Q3Q4

dual Charts

Line Chart

Dual Color Line ChartA dual line chart comparing brand and complementary color trends.Dual ChaosParallel Timelines

Bar Chart

Dual Color Bar ChartA dual bar chart comparing brand and complementary color values.Entropy IndexCosmic MomentsQ1Q2Q3Q4

Icon Showcase

Stroked Icons

Stroked Icons

Color Export

For globals.css (Tailwind v4)

			@theme inline {
--color-brand-50: okclh(98.70% 0.004 274deg);
--color-brand-100: okclh(96.42% 0.008 270deg);
--color-brand-200: okclh(92.55% 0.016 266deg);
--color-brand-300: okclh(87.23% 0.027 263deg);
--color-brand-400: okclh(79.88% 0.044 258deg);
--color-brand-500: okclh(78.34% 0.048 257deg);
--color-brand-600: okclh(68.12% 0.065 252deg);
--color-brand-700: okclh(62.63% 0.060 252deg);
--color-brand-800: okclh(55.92% 0.053 252deg);
--color-brand-900: okclh(46.89% 0.045 252deg);
}
		

For globals.css (Tailwind v4)

			@theme inline {
--color-complementary-50: okclh(99.27% 0.002 60deg);
--color-complementary-100: okclh(98.05% 0.006 79deg);
--color-complementary-200: okclh(96.16% 0.014 85deg);
--color-complementary-300: okclh(93.52% 0.027 88deg);
--color-complementary-400: okclh(90.23% 0.047 92deg);
--color-complementary-500: okclh(86.74% 0.077 96deg);
--color-complementary-600: okclh(77.08% 0.069 96deg);
--color-complementary-700: okclh(68.86% 0.062 96deg);
--color-complementary-800: okclh(58.25% 0.053 97deg);
--color-complementary-900: okclh(40.46% 0.036 96deg);
}