Skip to content

Updated Brand Colors #2493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrew-frueh merged 2 commits into from
Mar 30, 2026
Merged

Updated Brand Colors #2493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efaa35d
docs(ui-colors): updated brand colors
andrew-frueh Mar 30, 2026
64eb6fd
Merge pull request #2492 from andrew-frueh/ui-colors-brand-update
andrew-frueh Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 27 additions & 17 deletions src/app/foundations/brand-colors/brand-color-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,47 @@ <h5 id="overview">Overview</h5>

<hc-tile>
<h5 id="brand-palette">Color Palette</h5>
<p>Our brand palette is based on four primary colors with a range of shades of each color. There are five color shades of purple, orange, blue, and green that can be used. When choosing colors consider the tone that the design will be communicating.</p>
<p>Our palette covers a wide range from solid dark colors to vibrant mid tones, when choosing what color pairing to make follow the guide in this section and refer back to approved designs.</p>
<p>Most of our assets will have a base color in the blue family, accented with other colors. Each color has a light shade which is located in the furthest right column, these should be used sparingly and as accents.</p>
<p>Our brand palette is based on three primary colors with a range of shades of each color. There are five color shades of purple, blue, and green that can be used.</p>
<p>Each of our color families is associated with one of Health Catalyst's focus domains. For consistency, it's important to use the right color family when presenting content in a given domain.</p>
<h3>Cost & Operational Efficiency</h3>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#04473A" name="Green 500" rgb="4, 71, 58" cmyk="90, 46, 73, 48" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#068252" name="Green 400" rgb="6, 130, 82" cmyk="87, 25, 85, 11" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#48C186" name="Green 300" rgb="72, 193, 134" cmyk="67, 0, 64, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#AAF0CE" name="Green 200" rgb="170, 240, 206" cmyk="31, 0, 27, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#CDFCE1" name="Green 100" rgb="205, 252, 225" cmyk="17, 0, 17, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
<h3>Clinical Quality</h3>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#052533" name="Blue 500" rgb="5, 37, 51" cmyk="93, 72, 54, 62" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#003D66" name="Blue 400" rgb="0, 61, 102" cmyk="100, 79, 36, 23" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#005CB7" name="Blue 300" rgb="0, 92, 183" cmyk="91, 68, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#0BC0FF" name="Blue 200" rgb="11, 192, 255" cmyk="63, 6, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#D2F2FF" name="Blue 100" rgb="210, 242, 255" cmyk="16, 0, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
<h3>Consumer Experience</h3>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#222238" name="Purple 500" rgb="34, 34, 56" cmyk="85, 81, 49, 57" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#2F2968" name="Purple 400" rgb="47, 41, 104" cmyk="98, 98, 28, 17" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#5139A8" name="Purple 300" rgb="81, 57, 168" cmyk="82, 88, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#8661F7" name="Purple 200" rgb="134, 97, 247" cmyk="63, 67, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#DDD9FF" name="Purple 100" rgb="221, 217, 255" cmyk="11, 13, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
</hc-tile>

<hc-tile>
<h5 id="corporate-website-palette">Accent Colors</h5>
<p>
Accent colors are primarily in small amounts to emphasize certain elements of a layout.
They act as a contrast to the primary colors to stand out.
</p>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#601A12" name="Orange 500" rgb="96, 26, 18" cmyk="35, 91, 90, 54" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#A5230E" name="Orange 400" rgb="165, 35, 14" cmyk="23, 97, 100, 18" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#E84D2E" name="Orange 300" rgb="232, 77, 46" cmyk="3, 85, 93, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#FF8843" name="Orange 200" rgb="255, 136, 67" cmyk="0, 57, 79, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#FFDCB3" name="Orange 100" rgb="255, 220, 179" cmyk="0, 15, 31, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#052533" name="Blue 500" rgb="5, 37, 51" cmyk="93, 72, 54, 62" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#003D66" name="Blue 400" rgb="0, 61, 102" cmyk="100, 79, 36, 23" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#005CB7" name="Blue 300" rgb="0, 92, 183" cmyk="91, 68, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#0BC0FF" name="Blue 200" rgb="11, 192, 255" cmyk="63, 6, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#D2F2FF" name="Blue 100" rgb="210, 242, 255" cmyk="16, 0, 0, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
<div class="palette-row primary">
<hc-swatch-demo-component hex="#04473A" name="Green 500" rgb="4, 71, 58" cmyk="90, 46, 73, 48" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#068252" name="Green 400" rgb="6, 130, 82" cmyk="87, 25, 85, 11" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#48C186" name="Green 300" rgb="72, 193, 134" cmyk="67, 0, 64, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#AAF0CE" name="Green 200" rgb="170, 240, 206" cmyk="31, 0, 27, 0" [isLarge]="true"></hc-swatch-demo-component>
<hc-swatch-demo-component hex="#CDFCE1" name="Green 100" rgb="205, 252, 225" cmyk="17, 0, 17, 0" [isLarge]="true"></hc-swatch-demo-component>
</div>
</hc-tile>

<hc-tile>
Expand Down
14 changes: 7 additions & 7 deletions src/app/foundations/foundations-routes.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ const routes: Routes = [
{
path: 'foundations',
component: FoundationsComponent,
children: [
{
path: 'color',
component: ColorDemoComponent,
data: {title: 'UI Colors', category: 'Colors'}
},
children: [
{
path: 'brand-colors',
component: BrandColorDemoComponent,
data: {title: 'Brand Colors', category: 'Colors'}
},
{
path: 'color',
component: ColorDemoComponent,
data: {title: 'UI Colors', category: 'Colors'}
},
{
path: 'fonts',
component: FontsDemoComponent,
Expand Down Expand Up @@ -81,7 +81,7 @@ const routes: Routes = [
},
{
path: '**',
redirectTo: 'color'
redirectTo: 'brand-colors'
}
]
}
Expand Down
Loading