Skip to main content

Visual System

Graphic Elements

Block U Logo Icon Branding and Style

Our visual system is based upon the geometry of the block U. We have distilled it to three flexible approaches to accommodate assorted communication channels.



Our fundamental visual approach, Slices, is based on our foundational principle “Caring now, pioneering the future.” We leverage the past, present, and future in both content and visuals. Slices allows us to do this figuratively. This approach leaves the “center well” open for copy and populates the margins with supportive imagery. Slices also uses streamlined arrow effects to suggest momentum. As the fundamental visual approach, Slices is the creative treatment used across communication types. Typography and design are articulate, restrained, and allow content to speak for itself through white space and legible type style. Color comes from photography. Read further to learn about our narrative approaches to photography.



Rising picks up on the principles of Slices, but performs more assertively in the marketplace. The slices, arrow and progress effects incline to a sharper diagonal to bring more energy in marketing campaigns and collateral, suggesting an upward trajectory. The diagonal is a metaphorical nod to the mountain West. Rising introduces a transparent red “film” for an injection of brand color. These visual effects make Rising stand out in a crowded field of look-alike creative and is therefore our approach for advertising campaigns. Typography becomes more contrasting to speak a little louder without shouting. Confident and concise messaging, coupled with precise design, allow us to stand out in cluttered channels from social media to other print and digital advertising platforms.

"Simplified U"


Simplified U is our most distilled approach to visual communication. It places the emphasis on the block U, and builds upon the red film visual from Rising to highlight hero images of patients and/or practitioners which, combined with the DNA helix, supports the patient-centric message central to the U of U Health brand. Because this is bold creative, it will be used in specific executions where we want to emphasize a clear brand message.

Graphic Examples


Brand & Style Guide vis-system-slices-1
Brand & Style Guide vis-system-slices-2
Brand & Style Guide photo-graphic-moves-1
Brand & Style Guide vis-system-slices-4
Brand & Style Guide vis-system-slices-5
Brand & Style Guide vis-system-slices-6
Brand & Style Guide vis-system-slices-7
Brand & Style Guide vis-system-slices-8
Brand & Style Guide vis-system-slices-9


Brand & Style Guide vis-system-rising-1
Brand & Style Guide vis-system-rising-5

"Simplified U"

Brand & Style Guide vis-system-simp-u-1
Brand & Style Guide vis-system-simp-u-2
Brand & Style Guide vis-system-simp-u-3
Brand & Style Guide vis-system-simp-u-4

Graphic Moves

Brand & Style Guide vis-system-slices-1
A prominent theme in the U of U Health brand is the idea of “the past, present, and future.” Each future breakthrough in science and medicine will be influenced by our accomplishments of the past, and our current goals to shape the future. You can bring this idea to life by bleeding content off the edge of the page, and repeating identical content, with one small change to each iteration.
Brand & Style Guide graphic-moves-2

This arrow and line device is used to lead the eye into body copy. It should always begin at the border of a page. Using this element gives the piece a feeling of forward momentum and progress. The line is also used to carry the reader across the page (as a timeline of sorts), highlighting content along the way.

Brand & Style Guide graphic-moves-3
Brand & Style Guide graphic-moves-4

Compartmentalization brings a level of organization and structure to the U of U Health brand. Use containers to highlight small bits of information, like a call to action, website, or statistic. Use rectangles with rounded corners (radius .0278 in for InDesign, and 4 px for web design) to soften the container and make it more inviting. To contrast with the body copy, the containers should be outlined in red, and the type within them should be in all caps.

Brand & Style Guide graphic-moves-5
Brand & Style Guide graphic-moves-6

Transparency can act as metaphor for the knowledge we convey as an acdemic medical center. Transparency can also act as a graphic device to inject communications with our brand color. It can also provide an even tone over photography to support information that can be reversed out in white.

Brand & Style Guide photo-graphic-moves-1
Brand & Style Guide photo-graphic-moves-2

To give viewers a glimpse into “slice-of-life” moments, you can compose slivers of images into a timeline-like series. Whether it’s a child playing, a doctor performing surgery, or a researcher collecting data, these moments are what make life—and our careers—worth it.

Brand & Style Guide photo-graphic-moves-3

You can show changes and progress through the use of sequential photography. Use a series of moment- by-moment photos, each one slightly different than the one before it. This photographic treatment shows how each small discovery and alteration makes a large difference over time, just like scientific research at U of U Health.

Icon System

Our icon system is simple, clear, and open. Each icon has a few key things in common with the rest of the set. They show objects from the front and use flattened perspective whenever possible. This standard icon set was created to enhance call outs in marketing materials, website, and advertisements.


Self-pay Discount

Accepting most insurance plans


Urgent care




Welcoming new patients

Virtual visits

Creating Icons

Standard icons must be created to spec to ensure they work with the existing set. For consistency, keep within these format dimensions. Line stroke weight should be 1pt with rounded corners and caps. 50% grey is preferred on white background, however red, black or white (on colored backgrounds) are accepted.


Brand and Style Guide icon square size


Brand and Style Guide icon vertical size


Brand and Style Guide icon horizontal size



Illustration can enhance communications. It can make infographics immediately comprehensible, illuminate publications and editorial content, visualize complex concepts, and so much more. A wide variety of illustrative approaches and styles are available. Following are some approaches we recommend, and contexts where different types of illustration perform best. Illustration may be commissioned by artists or designers, or even licensed from professional stock agencies. When illustration is procured, it must be done within full copyright compliance.


Brand & Style Guide illustration-flat-1
Brand & Style Guide illustration-flat-2
Brand & Style Guide illustration-flat-3

Flat illustration is minimalistic and modern. It uses clean lines and crisp edges, open space, bright colors and a two-dimensional effect. It allows complex objects to be conveyed in outline or silhouette while still making the subject instantly recognizable. This approach keeps the focus on content without distracting the audience with flashy visual effects.


Brand & Style Guide illustration-semiflat-1
Brand & Style Guide illustration-semiflat-2
Brand & Style Guide illustration-semiflat-3

Semi-flat illustration uses the same attributes as flat illustration, but incorporates subtle visual effects. It might use simple color blocking, tints and shades, modest gradients or color transitions, or subtle textures and patterns. Semi-flat design suggests realism without needing to render high-contrast shadows and highlights, 3D effects such as ultra-real textures and patterns, or painterly color and other embellishments. It brings a little more dimension and distinction to illustration while maintaining an ease of read.


Brand & Style Guide brand-conceptual-utah
Brand & Style Guide illustration-publications-2
Brand & Style Guide illustration-publications-3
Brand & Style Guide illustration-publications-4

Publications and editorial content might turn to more conceptual and expressive approaches, such as these samples from Algorithms for Innovation.


Brand & Style Guide illustration-medical-1
Brand & Style Guide illustration-medical-2

Realistic illustration is beneficial for educational content, such as these medical illustrations.