From efaa35d331cbfd62213a164bd984774bab97725c Mon Sep 17 00:00:00 2001 From: Andrew Frueh Date: Mon, 30 Mar 2026 14:45:32 -0600 Subject: [PATCH] docs(ui-colors): updated brand colors --- .../brand-color-demo.component.html | 44 ++++++++++++------- .../foundations/foundations-routes.module.ts | 14 +++--- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/app/foundations/brand-colors/brand-color-demo.component.html b/src/app/foundations/brand-colors/brand-color-demo.component.html index f53ac9baa..7131a1df9 100644 --- a/src/app/foundations/brand-colors/brand-color-demo.component.html +++ b/src/app/foundations/brand-colors/brand-color-demo.component.html @@ -13,9 +13,25 @@
Overview
Color Palette
-

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.

-

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.

-

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.

+

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.

+

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.

+

Cost & Operational Efficiency

+
+ + + + + +
+

Clinical Quality

+
+ + + + + +
+

Consumer Experience

@@ -23,6 +39,14 @@
Color Palette
+ + + +
Accent Colors
+

+ 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. +

@@ -30,20 +54,6 @@
Color Palette
-
- - - - - -
-
- - - - - -
diff --git a/src/app/foundations/foundations-routes.module.ts b/src/app/foundations/foundations-routes.module.ts index d15fc9703..130365489 100644 --- a/src/app/foundations/foundations-routes.module.ts +++ b/src/app/foundations/foundations-routes.module.ts @@ -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, @@ -81,7 +81,7 @@ const routes: Routes = [ }, { path: '**', - redirectTo: 'color' + redirectTo: 'brand-colors' } ] }