XX
Vaccinations
Style Guide - System Theme Color Usage
Available Background Colors
Black
Black is a rarely used color for page design. It can be used for a visual break, and a non patient-care focused call to action.
Black Brain Rock Pattern
Black Community Pattern
Black Particle Pattern
Dark Gray
Dark Gray is a color that can be used to draw attention to a primary Call To Action. The color should rarely be used for body content sections.
Dark Gray Brain Rock Pattern
Dark Gray Community Pattern
Dark Gray Particle Pattern
Gold
Gold is the go-to color for a call to action section. It can occasionally be used fo help a piece of body content stand out, and is the primary go-to color for separating a section of links from content.
Gold
Gold Community Pattern
Gold Pattern Particle
Secondary
Light Gray
Light gray is the best alternative to white for body content. It can be used to separate sections of pages, and represents a pivot in focus, likely starting with a new section heading (h2).
Light Gray Community Pattern
Light Gray Community Pattern
Gray Brain Rock Pattern
White
White is the standard color for body content sections. A pattern can be used if that body content section is being treated as more of an info-graphic section, including facts, callouts, or graphics.
White Brain Rock Pattern
White Community Pattern
White Particle Pattern
Standard Body Content Color Usage
For traditional body content sections across all website pages, the standard color used within the area should be limited to standard white, or standard light gray.
All pages should begin with the standard white, and should remain fully white if the content on that page is short, focused, and not representing multiple content sections.
But you can pivot colors to light gray
If the content on the page could benefit from a visual break to recognize a shift in content focus within that page.
This likely will lead with a subhead (h2) as the opening element of the newly colored content section, and represent a new thought.
This approach can continue with a toggle back to...
A white content color section
If that light gray color section's content closes, and there is a new subheading representing a new transition in thought and page focus.
Prominent Body Content Section
On occasion, usually leading a page, or noting a transition mid-page, a narrow section of body content can be elevated with the use of a callout color. This should either be gold, or dark gray.
The content is usually formatted with the lead style font to increase the boldness of that section, and serves as a visual anchor to the page. An example is showed below:
UI Hospitals & Clinics provides world-class family-centered health care, extensive medical research, and comprehensive teaching programs for many health care professions.
Example uses of color backgrounds in body content
Using gold to catch the eye
Gold can help draw the eye to a key call to action. This can be placed on the call to action component itself (gold background on a text card for instance. Or it could simply be used to wrap a row of content, and provide that visual draw, as shown here.
This is a vibrant color, so avoid pairing a gold component with another prominent color or pattern choice.
A subtle pattern that creates an "infographic" treatment
While not meant for standard body content sections, the community pattern on white, and light gray, can help elevate a content section. This is particularly useful for info-graphic style treatments that include facts, charts, or pull quotes.
Shown here a WISIWYG is accompanied by a fact to tell a "story."