Color system

The magic transformation

Define one color, get a complete design system:

Result: Complete CSS variables + utilities for theming, components, and dark mode — no manual shade calculation needed.

Extended range beyond Bootstrap

Bootstrap gives you 9 shades (100-900). Bravo generates 13 shades (25-975) with extra-light and extra-dark variations perfect for modern interfaces:

Smart override system

Simple approach: Just provide your brand color and get the full spectrum:

$custom-colors: (
  "brand": #5e3896
);

Advanced approach: Define key anchor points and Bravo calculates the gaps:

$custom-colors: (
  "brand": (
    300: #8a64c2,  // lighter accent
    500: #5e3896,  // main brand color  
    700: #4a2a7a,  // darker variant
  )
);

Perfect for: Brand systems where you need specific shades but want the full spectrum generated automatically.

CSS variables you actually get

All Bootstrap defaults (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray…) plus your custom colors are exported to CSS:

:root {
  /* examples (pattern repeats for every color) */
  --bs-blue-25:  …;
  --bs-blue-50:  …;
  …
  --bs-blue-500: …; /* true blue */
  …
  --bs-blue-975: …;

  --bs-brand-25:  …;
  …
  --bs-brand-500: #5e3896;
  …
  --bs-brand-975: …;
}

Use them anywhere:

.card {
  background: var(--bs-gray-50);
  border-color: var(--bs-gray-200);
  color: var(--bs-gray-900);
}

Utilities from the same source (no hand-wiring)

All shade utilities are generated from the same map:

<!-- text -->
<p class="text-blue-300">Light text</p>
<p class="text-blue-500">Base text</p>
<p class="text-blue-900">Dark text</p>

<!-- backgrounds -->
<div class="bg-brand-100">Brand subtle</div>
<div class="bg-brand-500 text-white">Brand solid</div>

<!-- borders -->
<div class="border border-green-700">Strong border</div>

Because the variables and utilities share one source, utilities always line up with the CSS vars you'd use in components.

About dark mode

Bravo doesn't ship a dark-mode algorithm. If you use Bootstrap's [data-bs-theme="dark"], pick the shade numbers you want for dark contexts (e.g. 100 vs 900) and set them in your theme or component CSS. The point: the right shades exist without you hand-crafting them.

Why this matters (dev POV)

What changed vs Bootstrap