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
Bar Chart
complementary Charts
Line Chart
Bar Chart
dual Charts
Line Chart
Bar Chart
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);
}