Primary Colors

Blueprint is supported by an extensive primary color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

Primary Color
Primary Color Light
Primary Color Dark
Primary Color Opacity 0.85%
 
<div class="bg-primary">Primary Color</div>
<div class="bg-primary-light">Primary Light Color</div>
<div class="bg-primary-dark">Primary Dark Color</div>
<div class="bg-primary--hero-opacity">Primary Color Opacity 0.85%</div>