Color

Color is important for expressing the Hudl brand and well as expressing the identities of our users; especially athletes, teams and brands. Color also plays an important utility role in our interface design to convey specific meaning.

Color conveys meaning in different ways.

With respect to our own brand, our users’ identities and UI meaning, we are subtle by default so when we are loud it counts. This is consistent with the Uniform personality traits understated and confident.

For Hudl brand colors, see brand guidelines. For athlete, individual and organization colors, see Identity Colors. For color used in tagging interfaces, see Tagging Colors.


UI Colors

The UI Colors are designed as a system of colors to make color choice easy and cohesive for a distributed team of designers creating software interfaces with a wide range of complexity.

UI Colors

Instead of existing in isolation, each UI Color has a particular meaning within the system. When the rules of the system are followed, UI Colors work together to create hierarchy, relationships, and provides subtle elegance.

Additionally, accessibility contrast was considered at the system’s inception. Proper use of each UI Color within your interface guarantees appropriate WCAG 2.0 compliance.

Consistent Color Meaning

Because the system focuses on creating meaning for each UI Color, the name of each color is consistent across UI Environments, even if the value of the color changes (say from light grey to dark grey). We refer to these corresponding colors.

Corresponding Colors

There are some cases where corresponding colors share a value along with a consistent name. For instance, layer metaphors use dark shadows in both environments.


UI Environments

An environment can be thought of as a set of UI Colors designed for specific interface experiences. Our system currently has two environments: Light and Dark.

Light Environment & Dark Environment

The Light Environment is our default environment and suitable for most Hudl interfaces. Light Environment characteristics are intended to be smart, reliable and understated.

The Dark Environment is a secondary environment and suitable for focused, immersive content experiences.

Light Environment (LE) — browsing experiences for everyday work
[such as: viewing, managing information]

Dark Environment (DE) — immersive content experiences
[such as: video editing, tagging]

Only one environment should be used per interface. If you are unsure which environment is right, use Light.


Switching Environments

Switching environments is an event. It is a dramatic interface change with experience consequences.

While this “mode shift” can be an effective experience tool, the event can be a disorienting user experience. The decision to transition between environments must be carefully considered.

Dos and Don'ts of Environment Switching

Switching environments is like entering a different room. The Light Environment is the office and the Dark Environment is the movie theater.

Tangential tasks should maintain the same environment as the primary activity. For instance, editing a tag in a video watching experience should maintain the video player Dark Environment.


Environment Levels

Levels are background colors for regions. These regions create grouping and separation of interface elements. Each environment has four levels. Each level has one accent.

Environments Levels


LE Bg Level0

rgba(255, 255, 255, 1.0)

LE Bg Level0 Accent

rgba(237, 240, 242, 1.0)

LE Bg Level1

rgba(249, 250, 251, 1.0)

LE Bg Level1 Accent

rgba(228, 231, 235, 1.0)

LE Bg Level2

rgba(242, 245, 247, 1.0)

LE Bg Level2 Accent

rgba(220, 225, 230, 1.0)

LE Bg Level3

rgba(235, 239, 242, 1.0)

LE Bg Level3 Accent

rgba(211, 216, 222, 1.0)

DE Bg Level0

rgba(16, 20, 23, 1.0)

DE Bg Level0 Accent

rgba(35, 42, 49, 1.0)

DE Bg Level1

rgba(25, 31, 36, 1.0)

DE Bg Level1 Accent

rgba(44, 53, 62, 1.0)

DE Bg Level2

rgba(35, 42, 49, 1.0)

DE Bg Level2 Accent

rgba(49, 59, 69, 1.0)

DE Bg Level3

rgba(53, 63, 74, 1.0)

DE Bg Level3 Accent

rgba(69, 82, 94, 1.0)


Using Levels

Use levels to compartmentalize your layout. As a rule of thumb, start with Level 0 and increase one level at a time.

Using Levels

Level 0 is for primary content. Level 0 is the most dominant region because it provides the most potential contrast in either environment.

Level 1 and Level 2 are for supporting regions. The min-spectrum values of Level 1 and Level 2 add nuanced grouping.

Level 3 is reserved for unique states that require special attention. Level 3 is a jump in the contrast spectrum to highlight a particular region.

Leves with cardsCard

In cases where the primary content is a floating region, use Level 1 as the screen background to allow the primary content to be Level 0.

Using Level Accents

Using Level Accents

Each level has one accent color. The level accent is used for visual enhancements through subtle graphics (such as fine lines or small regions).

Level Accents should only be used with their respective Level (i.e., only use a Level 1 Accent on a Level 1).


Border Color

When adjacent Levels are separated by a fine line (usually a border), use the Level Accent of the region with the border. In cases where the line belongs to neither Level, either Level Accent color is acceptable.


Levels vs. Layering

One important point is that these Levels and layering are related but separate concepts.

Levels are background colors for two-dimensional regions on the same plane as their peers — they do not cast shadows by default.

On the other hand, layering is a three-dimensional metaphor. Layered elements do cast shadows. Layering is reserved for interface elements that overlap and obstruct other interface elements (such as toasts, drawers, tooltips or modals).

Levels vs. Layering


Content Colors

Content Colors are neutral interface colors for typography, iconography and supporting graphics. Content Colors are semantically named for their hierarchical purposes. Content Color decisions translate between environments as corresponding colors.


LE Content Contrast

rgba(19, 41, 63, 1.0)

LE Content Default

rgba(19, 41, 63, 0.80)

LE Content Subtle

rgba(19, 41, 63, 0.65)

LE Content Nonessential

rgba(19, 41, 63, 0.4)

DE Content Contrast

rgba(230, 242, 255, 1.0)

DE Content Default

rgba(230, 242, 255, 0.80)

DE Content Subtle

rgba(230, 242, 255, 0.65)

DE Content Nonessential

rgba(230, 242, 255, 0.40)


Using Content Colors

In each environment, Content Colors vary only in transparency—maintaining consistent hue, brightness and saturation.

Content Colors

Contrast differs most from its background in luminance of all the Content Colors. Contrast is fully opaque. Use Contrast for most important or dominant elements.

Default is the starting point for Content Colors. Default is semi-transparent at 80%. If you aren’t sure which Content Color to use, choose Default.

Subtle has the least contrast of the accessibility compliment Content Colors. Subtle is semi-transparent at 65%. Use Subtle for supporting elements.

Nonessential provides the least contrast of the Content Colors. With a semi-transparency value of 40%, Nonessential does not pass accessibility standards. As the name implies, Nonessential should only be used for additional supportive elements.

Content Colors

Choosing a Content Color should be based on content hierarchy. Clear content hierarchy makes interfaces efficient and easy to understand.

We are understated, so when we’re loud it counts. Higher contrast elements draw attention thus should be used for most important or dominant elements. Supporting elements should be subdued. This allows for easier scanning of information, especially important on dense interfaces.

Of course, color contrast isn’t the only way to create content hierarchy. Thickness (boldness), color saturation, supporting whitespace and element size should all be used in conjunction with color contrast to create a harmonious layout to guide the user’s attention.


Content Color Accessibility

Contrast, Default and Subtle can be used confidently as they pass WCAG 2.0 contrast accessibility standards on all Levels. Nonessential does not reliably pass accessibility standards and thus should not be used for essential information.

Content Colors


Content Color Transparency

All Content Colors are the same hue with alpha transparency. Transparency provides additional contrast on higher levels.

Transparent Type

Transparent elements also take on characteristics of background colors. This prevents colors from clashing, giving a more refined look.

Transparent Type Characteristics


Divider Colors

Divider is for thin lines that imply distinct separation between groups of content.

Dividers and Level Accents

If a less overt division is appropriate for thin lines, the respective level accent is an understated alternative to Divider.


LE Divider

rgba(167, 174, 181, 0.60)

DE Divider

rgba(122, 138, 153, 0.60)


Utility Colors

Utility colors provide specific meaning to a UI element. It is important to use the colors for their specific purpose to maintain the intended meaning.

Content Colors

Action is used to promote action. It is reserved for a view’s primary action. There should very rarely be more than one primary action per interface.

Success is used as a positive response to a successful action.

Warning is used to call attention to important information that doesn’t prevent further action.

Critical is used to alert of major errors, vital information, or potentially damaging or destructive actions.


Utility Accent Colors

Utility Accent Colors are the full intensity version of Utility Colors. These colors are intended to express meaning through the hues themselves.


LE Utility Accent Action

rgba(0, 156, 227, 1.0)

LE Utility Accent Success

rgba(120, 161, 0, 1.0)

LE Utility Accent Warning

rgba(242, 182, 0, 1.0)

LE Utility Accent Critical

rgba(232, 28, 0, 1.0)

DE Utility Accent Action

rgba(0, 156, 227, 1.0)

DE Utility Accent Success

rgba(120, 161, 0, 1.0)

DE Utility Accent Warning

rgba(242, 182, 0, 1.0)

DE Utility Accent Critical

rgba(232, 28, 0, 1.0)


Using Utility Accent Colors

Utility Accent Colors do not reliably pass accessibility standards. Therefore, usage should be limited to graphic flourishes (such as a stripe) unless explicitly outlined in documentation for an element, pattern or component.

Corresponding colors for Utility Accents are the same value in both environments.


Accessibility

We value color contrast accessibility standards for two main reasons. 1) It’s the right thing to do. 2) Accessibility standards help everyone—not just the visually impaired.

Our products are often viewed on mobile devices in bright daylight and as projected images on walls. Holding ourselves to accessibility standards ensures our products will be viewed reliably in the most possible lighting situations.

We strive to meet WCAG 2.0 contrast standards. This means for regular text a contrast ratio of 4.5:1 or more (WCAG 2.0 AA) and for large (18px+) or bold text (14px+) a contrast ratio of 3:1 or more (WCAG 2.0 Large Text). However, we do allow a contrast ratio less 3:1 for nonessential supporting text (fails WCAG 2.0).


Implementation

All of these Colors are available in our Uniform UI Libraries.

Uniform UI for Web

We have these colors optimized for web-specific usage available as Sass variables. They are outlined in the Uniform UI for Web Documentation, and can be used within your styles through the Uniform UI npm package.

Uniform UI for React Native

We have a these colors available for use in React Native projects. They can be found in the Colors section of the React Native Uniform UI Library.

Uniform UI for iOS

We have a these colors optimized for iOS app usage available as UIColor functions. They can be found in the UniformUIColors class in the Uniform UI for iOS cocoapod.

Uniform UI for Android

We have a these colors optimized for Android app usage available as and XML resource. They can be found in the Uniform UI section of the Android Framework.


Uniform Color Swatches

A Sketch file with color swatches for the Uniform color system.