Hudl Design System

Last Modified:June 21, 2017

Variables

Variables are a foundational building block of Uniform. Using uniform-ui-css (uniCSS) variables within your project ensures values are updated as they are updated or tweaked in accordance with Uniform’s guidelines. Keeping the uniCSS NPM package that lives within your project updated to the latest version helps ensure your interface stays compliant, reducing the amount of work you need to do.

The v0.11.0 release of uniCSS made some wholesale changes to the naming convention for variables. All deprecated variables are outlined here. In most cases, we’ve also provided a reference to the new appropriate companion variable. However, there are some places where direct mapping does not exist, which will likely force you to make a difficult design decision or two.

# Brand

The Brand Colors exist to represent Hudl. Generally speaking these colors are intended for marketing and other representations of the Hudl brand. Usage within the product itself, should be carefully considered. Learn more about the philosophy behind Uniform color.

Variable Name RGBa
 
$color-brand-orange rgba(255, 99, 0, 1.0)
 
$color-brand-electric rgba(0, 156, 227, 1.0)
 
$color-brand-ink rgba(35, 42, 49, 1.0)
 
$color-brand-evening rgba(56, 67, 79, 1.0)
 
$color-brand-slate rgba(78, 93, 108, 1.0)

# Identity

Learn more about usage and application of Identity color from Uniform.

Variable Name RGBa
 
$color-identity-maroon rgba(121, 6, 34, 1.0)
 
$color-identity-scarlet rgba(208, 0, 0, 1.0)
 
$color-identity-apple rgba(255, 30, 30, 1.0)
 
$color-identity-orange rgba(255, 140, 0, 1.0)
 
$color-identity-gold rgba(237, 180, 7, 1.0)
 
$color-identity-yellow rgba(255, 221, 0, 1.0)
 
$color-identity-forest rgba(36, 89, 0, 1.0)
 
$color-identity-kelly rgba(62, 150, 0, 1.0)
 
$color-identity-sky rgba(83, 188, 239, 1.0)
 
$color-identity-royal rgba(8, 77, 163, 1.0)
 
$color-identity-navy rgba(12, 57, 112, 1.0)
 
$color-identity-purple rgba(98, 18, 150, 1.0)
 
$color-identity-white rgba(250, 250, 250, 1.0)
 
$color-identity-silver rgba(215, 217, 221, 1.0)
 
$color-identity-grey rgba(100, 101, 102, 1.0)
 
$color-identity-black rgba(34, 34, 34, 1.0)
 
$color-identity-default rgba(56, 67, 79, 1.0)

# Tagging

Learn more about usage and application of Tagging color from Uniform.

Variable Name RGBa
 
$color-tagging-white rgba(252, 251, 252, 1.0)
 
$color-tagging-white-shade rgba(197, 197, 197, 1.0)
 
$color-tagging-grey rgba(114, 116, 118, 1.0)
 
$color-tagging-grey-shade rgba(89, 90, 92, 1.0)
 
$color-tagging-black rgba(60, 60, 60, 1.0)
 
$color-tagging-black-shade rgba(41, 41, 41, 1.0)
 
$color-tagging-yellow rgba(255, 221, 0, 1.0)
 
$color-tagging-yellow-shade rgba(227, 192, 0, 1.0)
 
$color-tagging-orange rgba(255, 144, 0, 1.0)
 
$color-tagging-orange-shade rgba(219, 123, 0, 1.0)
 
$color-tagging-red rgba(201, 26, 26, 1.0)
 
$color-tagging-red-shade rgba(160, 20, 20, 1.0)
 
$color-tagging-green rgba(85, 167, 52, 1.0)
 
$color-tagging-green-shade rgba(59, 131, 29, 1.0)
 
$color-tagging-blue rgba(45, 131, 201, 1.0)
 
$color-tagging-blue-shade rgba(36, 104, 160, 1.0)
 
$color-tagging-purple rgba(98, 18, 150, 1.0)
 
$color-tagging-purple-shade rgba(72, 11, 111, 1.0)

# Base

Using the base color variables keeps you from spreading `#ffffff` or `#000000` all over your projects. Additionally, should Uniform ever define pure black as having a value other than purest of black, you'll automatically get that change, rather than hunting through your project to change every hard-coded `#000000` throughout your style files.

Variable Name RGBa
 
$color-base-white rgba(255, 255, 255, 1.0)
 
$color-base-black rgba(0, 0, 0, 1.0)

# Background

The most effective method of using these variables is to use the uniCSS classes in your markup. Levels work in conjunction with Environments to automatically set the appropriate background color based on environment.

Variable Name RGBa
 
$color-le-bg-level0 rgba(255, 255, 255, 1.0)
 
$color-le-bg-level0-accent rgba(237, 240, 242, 1.0)
 
$color-le-bg-level1 rgba(249, 250, 251, 1.0)
 
$color-le-bg-level1-accent rgba(228, 231, 235, 1.0)
 
$color-le-bg-level2 rgba(242, 245, 247, 1.0)
 
$color-le-bg-level2-accent rgba(220, 225, 230, 1.0)
 
$color-le-bg-level3 rgba(235, 239, 242, 1.0)
 
$color-le-bg-level3-accent rgba(211, 216, 222, 1.0)
 
$color-de-bg-level0 rgba(16, 20, 23, 1.0)
 
$color-de-bg-level0-accent rgba(35, 42, 49, 1.0)
 
$color-de-bg-level1 rgba(25, 31, 36, 1.0)
 
$color-de-bg-level1-accent rgba(44, 53, 62, 1.0)
 
$color-de-bg-level2 rgba(35, 42, 49, 1.0)
 
$color-de-bg-level2-accent rgba(49, 59, 69, 1.0)
 
$color-de-bg-level3 rgba(53, 63, 74, 1.0)
 
$color-de-bg-level3-accent rgba(69, 82, 94, 1.0)

# Text

Text colors are for ... wait for it ... type. There are a few siginifcant changes to test colors. The naming conventions are now parallel between environments. If you're using `color-le-text-subtle`, there's no doubt of its dark environment companion. Additionally, rgb color is the same in a given environment, and it's the alpha channel that changes from variable to variable. This gives us some better accessibility grading in terms of the contrast ratio.

Variable Name RGBa
 
$color-le-text-contrast rgba(19, 41, 63, 1.0)
 
$color-le-text-default rgba(19, 41, 63, 0.80)
 
$color-le-text-subtle rgba(19, 41, 63, 0.65)
 
$color-le-text-nonessential rgba(19, 41, 63, 0.4)
 
$color-de-text-contrast rgba(230, 242, 255, 1.0)
 
$color-de-text-default rgba(230, 242, 255, 0.80)
 
$color-de-text-subtle rgba(230, 242, 255, 0.65)
 
$color-de-text-nonessential rgba(230, 242, 255, 0.40)

# Icon

Icon colors are for ... you guessed it ... icons. The reason to use these variables, rather than text colors variables is that over time, we might define more nuanced values for how an icon might look in comparison to a piece of type.

Variable Name RGBa
 
$color-le-icon-contrast rgba(19, 41, 63, 1.0)
 
$color-le-icon-default rgba(19, 41, 63, 0.80)
 
$color-le-icon-subtle rgba(19, 41, 63, 0.65)
 
$color-le-icon-nonessential rgba(19, 41, 63, 0.4)
 
$color-de-icon-contrast rgba(230, 242, 255, 1.0)
 
$color-de-icon-default rgba(230, 242, 255, 0.80)
 
$color-de-icon-subtle rgba(230, 242, 255, 0.65)
 
$color-de-icon-nonessential rgba(230, 242, 255, 0.40)

# Divider

Variable Name RGBa
 
$color-le-divider rgba(167, 174, 181, 0.60)
 
$color-de-divider rgba(122, 138, 153, 0.60)

# Utility

These utility colors serve as building blocks. Uniform will take these building block colors and use them to define more semantic, targeted usages that are more appropriate than these generalized starting points.

Variable Name RGBa
 
$color-utility-action rgba(0, 156, 227, 1.0)
 
$color-utility-action-tint rgba(77, 185, 235, 1.0)
 
$color-utility-action-shade rgba(0, 124, 181, 1.0)
 
$color-utility-success rgba(120, 161, 0, 1.0)
 
$color-utility-success-tint rgba(169, 201, 77, 1.0)
 
$color-utility-success-shade rgba(92, 124, 0, 1.0)
 
$color-utility-warning rgba(242, 182, 0, 1.0)
 
$color-utility-warning-tint rgba(237, 197, 77, 1.0)
 
$color-utility-warning-shade rgba(166, 124, 4, 1.0)
 
$color-utility-critical rgba(232, 28, 0, 1.0)
 
$color-utility-critical-tint rgba(255, 75, 51, 1.0)
 
$color-utility-critical-shade rgba(185, 24, 4, 1.0)

# Utility-Accent

Utility accent colors.

Variable Name RGBa
 
$color-le-utility-accent-action rgba(0, 156, 227, 1.0)
 
$color-le-utility-accent-success rgba(120, 161, 0, 1.0)
 
$color-le-utility-accent-warning rgba(242, 182, 0, 1.0)
 
$color-le-utility-accent-critical rgba(232, 28, 0, 1.0)
 
$color-de-utility-accent-action rgba(0, 156, 227, 1.0)
 
$color-de-utility-accent-success rgba(120, 161, 0, 1.0)
 
$color-de-utility-accent-warning rgba(242, 182, 0, 1.0)
 
$color-de-utility-accent-critical rgba(232, 28, 0, 1.0)

# Selection

Content Selection colors are used in interfaces to indicate content items a user has selected. Read the design philosophy at Design.hudl.com

Variable Name RGBa
 
$color-le-selection-outline rgba(0, 156, 227, 1.0)
 
$color-le-selection-outline-hover rgba(0, 156, 227, 0.5)
 
$color-le-selection-bg rgba(230, 247, 255, 1.0)
 
$color-le-selection-bg-hover rgba(240, 250, 255, 1.0)
 
$color-le-selection-edge rgba(0, 156, 227, 1.0)
 
$color-le-selection-edge-hover rgba(127, 215, 255, 1.0)
 
$color-de-selection-outline rgba(0, 156, 227, 1.0)
 
$color-de-selection-outline-hover rgba(0, 156, 227, 0.5)
 
$color-de-selection-bg rgba(0, 56, 82, 1.0)
 
$color-de-selection-bg-hover rgba(0, 44, 64, 1.0)
 
$color-de-selection-edge rgba(0, 156, 227, 1.0)
 
$color-de-selection-edge-hover rgba(0, 103, 150, 1.0)

# Space

These space variables can be used for padding and margin values as you author SCSS. You can add these values to your own rules, or use the space mixin. Alternately, we also provide sets of modifier classes you can add directly to your html elements.

Variable Value Usage
$space-eighth 0.125rem 2px
$space-quarter 0.25rem 4px
$space-half 0.50rem 8px
$space-one 1rem 16px
$space-one-and-half 1.5rem 24px
$space-two 2rem 32px
$space-three 3rem 48px
$space-four 4rem 64px

# Shadows

Overall, Hudl is flat. The concept of dimension is created with color and/or space. However, in specific instances, dimension is created with shadows. This makes elements appear to hover above the rest of a given interface. In most cases, you’ll not need to use these variables, as they are or will be baked into components such as Modals, Toasts, Alerts, etc. This sync page illustrates the shadow system.

Variable Value Usage
$elevation-shadow1 0 2px 3px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.2); Drop downs, Popover Menus
$elevation-shadow2 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.2); Prompt, Toast
$elevation-shadow3 $0 16px 32px rgba(0, 0, 0, 0.3), 0 0 64px rgba(0, 0 ,0, 0.2); Modal, Alert

# Type

At first glance, you might notice redundancy in these variables, since they all map back to the same fonts. However, should we readopt unique typography for either Brand usage or for display type within the product, these separate variables make that change seamless, proivded you are using these accordingly.

Font Fallbacks

Variable Value
$font-sans-fallback Helvetica, Arial, sans-serif
$font-brand $font-sans-fallback
$font-body $font-sans-fallback
$font-display $font-sans-fallback

Applying fonts

Variable Value Usage
$font-body $font-sans-fallback Use for body copy
$font-display $font-brand, $font-sans-fallback Use for display type

Font Weights

Variable Value Usage
$font-weight-light 300 Light weight type
$font-weight-reg normal Normal weight type
$font-weight-bold bold Use for bold type