The four logo colors that drive the look and feel of most pages: blue, green, orange and red. Each has a darker version for accents or when a second shade of the same color is needed, and one pale card and panel surface shared by both.
Headings render #2D7BA9
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Headings render #007DAB
Display heading (reduced size)
Heading 2
Heading 3
Headings render charcoal with a green underline
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Headings render charcoal with a orange underline
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Headings render charcoal with a darkorange underline
Display heading (reduced size)
Heading 2
Heading 3
Headings render #DF2E1B
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Secondary colors
Use only when the four primary colors are not enough, for example the twelve curriculum topics. Same structure: a color, its darker version and a shared pale surface.
Headings render charcoal with a yellow underline
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Headings render charcoal with a darkyellow underline
Display heading (reduced size)
Heading 2
Heading 3
Headings render #9B59B6
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Headings render #7F5AB0
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Headings render #167A83
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Headings render #B5484B
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Tertiary colors: grays
Grays for accents, color bars and neutral text. Every gray has a pale card and panel surface. The three lightest grays are not for headings.
Not for headings. Too light to read as text; use for bars, borders and backgrounds.
Card and panel surfaces
Not for headings. Too light to read as text; use for bars, borders and backgrounds.
Card and panel surfaces
Not for headings. Too light to read as text; use for bars, borders and backgrounds.
Card and panel surfaces
Headings render #6F767D
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Guide colors
Deep, muted colors that bring the guide frameworks (CALPADS error guides, compliance, directories, HR and similar) into the shared palette. Use them for professional-treatment pages and for a solution area's color scheme. Each has heading classes and a pale card and panel surface.
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
Card and panel surfaces
Display heading (reduced size)
Heading 2
Heading 3
We use cookies and similar technologies to improve your experience on our website.
