<div class="content-main pb-5">
<div class="container pb-5">
<h1>Colors</h1>
<p>The "<span class="text-primary">St. Jude Cloud Blue</span>" in the top navigation area is the most
recognizable branding element for St. Jude Cloud applications. In addition, the colors below are
officially-approved St. Jude brand colors. For more detailed information and <strong>print</strong> color
versions, see the St. Jude and St. Jude Cloud Branding Guide</a>.
</p>
<p>Adding any of these color variables at the end of a class <code>bg-</code> will make the background-color use
that color variable.</p>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>St. Jude <small class="text-muted">stjude.org</small></h3>
</div>
</div>
<hr />
<div class="row mb-4 card-deck">
<div class="col-6">
<div class="card bg-red h-100 py-3">
<h4 class="card-title text-white">St. Jude Red</h4>
<p class="card-text text-white">#C10F3A <small>$red</small></p>
</div>
</div>
<div class="col-6">
<div class="card bg-red-dark h-100 py-3">
<h4 class="card-title text-white">St. Jude Red Dark</h4>
<p class="card-text text-white">#911938 <small>$red-dark</small></p>
</div>
</div>
<div class="col-3">
<!-- Blank space -->
</div>
<div class="col-3">
<!-- Blank space -->
</div>
</div>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>St. Jude Cloud <small class="text-muted">stjude.cloud</small></h3>
</div>
</div>
<hr />
<!-- Row 1 -->
<div class="row mb-4 card-deck">
<div class="col-3">
<div class="card bg-blue h-100 py-3">
<h4 class="card-title text-white">Blue</h4>
<p class="card-text text-white">#1874DC <small>$primary / $blue</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-navy h-100 py-3">
<h4 class="card-title text-white">Dark Blue</h4>
<p class="card-text text-white">#002856 <small>$secondary / $navy</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-gray-dark h-100 py-3">
<h4 class="card-title text-dark">Gray</h4>
<p class="card-text">#AEB2B5 <small>$gray-dark</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-gray h-100 py-3">
<h4 class="card-title text-dark">Gray Light</h4>
<p class="card-text">#F2F2F2 <small>$gray</small></p>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row mb-4 card-deck card-deck">
<div class="col-3">
<!-- Blank space -->
</div>
<div class="col-3">
<div class="card bg-navy-dark h-100 py-3">
<h4 class="card-title text-white">Darkest Blue</h4>
<p class="card-text text-white">#002044 <small>$navy-dark</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-gray-darkest h-100 py-3">
<h4 class="card-title text-white">Gray Darkest</h4>
<p class="card-text text-white">#333333 <small>$gray-darkest</small></p>
</div>
</div>
<div class="col-3">
<!-- Blank space -->
</div>
</div>
<!-- Row 3 -->
<div class="row mb-4 card-deck">
<div class="col-3">
<div class="card bg-green h-100 py-3">
<h4 class="card-title text-white">Green</h4>
<p class="card-text text-white">#62bb46 <small>$green</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-peach h-100 py-3">
<h4 class="card-title text-white">Peach</h4>
<p class="card-text text-white">#FD5339 <small>$peach</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-yellow h-100 py-3">
<h4 class="card-title text-dark">Yellow</h4>
<p class="card-text">#FFD100 <small>$yellow</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-aqua h-100 py-3">
<h4 class="card-title text-dark">Aqua</h4>
<p class="card-text">#7AD0E4 <small>$aqua</small></p>
</div>
</div>
</div>
<!-- Row 4 -->
<div class="row mb-4 card-deck">
<div class="col-3">
<div class="card bg-green-dark h-100 py-3">
<h4 class="card-title text-white">Green Dark</h4>
<p class="card-text text-white">#5CA132 <small>$success / $pediatric-cancer / $green-dark</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-peach-dark h-100 py-3">
<h4 class="card-title text-white">Peach Dark</h4>
<p class="card-text text-white">#EB4E36 <small>$peach-dark / $danger / $cancer-survivorship</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-yellow-dark h-100 py-3">
<h4 class="card-title text-dark">Yellow Dark</h4>
<p class="card-text">#FFC32C <small>$yellow-dark</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-aqua-dark h-100 py-3">
<h4 class="card-title text-white">Aqua Dark</h4>
<p class="card-text text-white">#17818f <small>$aqua-dark</small></p>
</div>
</div>
</div>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>St. Jude Cloud <small class="text-muted">Domains</small></h3>
</div>
</div>
<hr />
<!-- Row 1 -->
<div class="row mb-4 card-deck">
<div class="col-4">
<div class="card bg-green-dark h-100 py-3">
<h4 class="card-title text-white">Pediatric Cancer</h4>
<p class="card-text text-white">#5CA132 <small>$pediatric-cancer</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-peach-dark h-100 py-3">
<h4 class="card-title text-white">Cancer Survivorship</h4>
<p class="card-text text-white">#EB4E36 <small>$cancer-survivorship</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-purple h-100 py-3">
<h4 class="card-title text-white">Nnon-Cancerous Diseases</h4>
<p class="card-text text-white">#8332A7 <small>$non-cancerous-diseases</small></p>
</div>
</div>
</div>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>Visualization Community <small class="text-muted">viz.stjude.cloud</small></h3>
</div>
</div>
<hr />
<!-- Row 1 -->
<div class="row mb-4 card-deck">
<div class="col-4">
<div class="card bg-blue h-100 py-3">
<h4 class="card-title text-white">Blue</h4>
<p class="card-text text-white">#1874DC <small>$primary / $blue</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-blue-light h-100 py-3">
<h4 class="card-title text-dark">Blue Light</h4>
<p class="card-text">#ECF2FA <small>$blue-light</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-tan h-100 py-3">
<h4 class="card-title text-dark">Tan</h4>
<p class="card-text">#EFEEEA <small>$Tan</small></p>
</div>
</div>
<div class="col-3">
<!-- Blank space -->
</div>
</div>
<!-- Row 2 -->
<div class="row mb-4 card-deck">
<div class="col-4">
<div class="card bg-teal h-100 py-3">
<h4 class="card-title text-white">Teal</h4>
<p class="card-text text-white">#35A7D3 <small>$teal</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-yellow h-100 py-3">
<h4 class="card-title text-dark">Yellow</h4>
<p class="card-text">#FFD100 <small>$yellow</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-purple h-100 py-3">
<h4 class="card-title text-white">Purple</h4>
<p class="card-text text-white">#8332A7 <small>$purple / $info / $non-cancerous-diseases</small></p>
</div>
</div>
<div class="col-3">
<!-- Blank space -->
</div>
</div>
<!-- Row 3 -->
<div class="row mb-4 card-deck">
<div class="col-4">
<div class="card bg-teal-light h-100 py-3">
<h4 class="card-title text-dark">Teal Light</h4>
<p class="card-text">#EAF6FA</p>
</div>
</div>
<div class="col-4">
<div class="card bg-yellow-light h-100 py-3">
<h4 class="card-title text-dark">Yellow Light</h4>
<p class="card-text">#FEF7E8 <small>$yellow-light</small></p>
</div>
</div>
<div class="col-4">
<div class="card bg-purple-light h-100 py-3">
<h4 class="card-title text-dark">Purple Light</h4>
<p class="card-text">#F2EBF4 <small>$purple-light</small></p>
</div>
</div>
<div class="col-3">
<!-- Blank space -->
</div>
</div>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>Platform <small class="text-muted">platform.stjude.cloud</small></h3>
</div>
</div>
<hr />
<!-- Row 1 -->
<div class="row mb-4">
<div class="col-3">
<div class="card bg-blue h-100 py-3">
<h4 class="card-title text-white">Blue</h4>
<p class="card-text text-white">#1874DC <small>$primary / $blue</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-navy h-100 py-3">
<h4 class="card-title text-white">Dark Blue</h4>
<p class="card-text text-white">#002856 <small>$secondary / $navy</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-green-dark h-100 py-3">
<h4 class="card-title text-white">Green Dark</h4>
<p class="card-text text-white">#5CA132 <small>$success / $pediatric-cancer / $green-dark</small></p>
</div>
</div>
<div class="col-3">
<div class="card bg-yellow-dark h-100 py-3">
<h4 class="card-title text-dark">Yellow Dark</h4>
<p class="card-text">#FFC32C <small>$yellow-dark</small></p>
</div>
</div>
</div>
<div class="row my-4 pt-5">
<div class="col-12">
<h3>PeCan <small class="text-muted">pecan.stjude.cloud</small></h3>
</div>
</div>
<hr />
<!-- Row 1 -->
<div class="row mb-4 card-deck">
<div class="card bg-gray col-3">
<div class="card-body">
<h4 class="card-title text-dark">COMING SOON</h4>
<p class="card-text"># <small>$</small></p>
</div>
</div>
</div>
</div>
</div>
No notes defined.