Recent Releases

Notes for each release are recorded here. Ask questions, express concerns and make requests in the #bet-uniform Slack channel.


25 Oct. 2017 - Single Selects and Lookups

We defined Selects and provided general guidelines, as well as details specific to two of the three possible types: Single Selects and Lookups.

Single Selects are perfect for short lists. Use them when you don’t need typeahead.

Lookups are single selects with typeahead to filter a much longer list of options.

Implementation for both is live on Uniform UI Components.

We’ll cover the third and final type (Multi-Lookups) in an upcoming sprint.


29 Sept. 2017 - Media Playback Icons

We updated media playback icons for two reasons:

  • Every icon in our library should match the Uniform style
  • We wanted to improve the durability of each icon

Fortunately, the existing metaphors already matched industry standards, so everything should feel similar to existing V3 video interfaces. The tweaks are minor—we gave icons a more consistent weight and we paid close attention to where pixels land at smaller sizes.

You can find the updates in Uniform UI Components.


1 Sept. 2017 - Toasts

Yeah, Toasts! The simple alerts have been defined and implemented in Uniform UI Components and Uniform UI CSS (v0.12.2).


25 Aug. 2017 - Layering and Modals

We defined Layering and Modals, with guidelines on using both.

Pay special attention to the Stack Order in Layering; as we define more of those elements, we’ll be sure to link everything under Shadows. Remember to layer with the updated z-index variables.

For more on Modals, check out Uniform UI Components—style details live in Uniform UI CSS (v0.12.1).


11 Aug. 2017 - Microcopy Guidelines, New z-index Variables

Word nerds, rejoice! We put together guidelines for the most common microcopy—because a well-written button can work wonders. It’s all right here, sorted under UI Labels and Non-Label UI Text.

These rules will evolve over time. If you see anything weird or have ideas for additions, let us know.

On the dev front, we added new z-index variables to Uniform UI CSS (v0.12.0). Stick to these the next time you need to stack things in your interface.


28 July 2017 - New Icons, UI Controls, Avatars in Sketch

We added the previously defined Avatars to Sketch. Check ‘em out.

We also showed icons some love. Add and Remove are your two newest regular icons, while UI controls were updated to include Dismiss, Expand, Collapse and More.

Notifications, Notifications Off, and Messages rep the existing icons that received an update.

You can find everything in Sketch, as well as implementation for React, iOS and Android.


30 June 2017 - Avatars

This release defines Avatars in Uniform. The design guidelines are appropriate for all platforms.

A React component for Avatars is available. A React Native version of this component is coming soon. Documentation of the CSS is available in the UI CSS library.


This release defines Links and Content Selection in Uniform.

Links are only implemented (and only appropriate) in Uniform UI for Web. Classes are available in the Uniform UI CSS library. A Link React component is available in the Uniform UI Components.

Content Selection is design guidelines applicable for all platforms. The color values for Select Background, Select Edge and Select Outline are available for web, iOS, Android and React Native. The Select Mark icon is available in Sketch.

Also in this release are 3 new icons: User, User Add, and User Groups. Each comes in a filled and outlined variant. These new icons are available in the Uniform Icons Sketch file and as React components.


27 March 2017 - Color, v2

This is fairly large release that has been in the works since last year. See: Color.

It takes the initial work we did in creating the Uniform Colors and completes a large refactor based on a lot of feedback we got from designers after they attempted to use those initial colors in their UIs.

All of these new colors are implemented in our Uniform UI libraries as variables for use in your interfaces. Note that this release comes with a lot of deprecations, so be sure to keep an eye on your variable naming.

For Uniform UI for Web, we have v0.11.0 of uniform-ui-css. It is documented in the Uniform UI Docs, and pay special attention to the deprecation guide since, as mentioned, there are a lot of variable deprecations. In addition, for the Web we have v2.4.0 of uniform-ui-components which provide a Level and Environment component. For Uniform UI for Android, we have v0.3.0 of the Android Framework. For Uniform UI for iOS, we have v1.1.0 of ios-uniform-ui.

And lastly, we now have Uniform UI for React Native. This is a new library, and the initial release of v1.0.0 contains these new color variables for use in your React Native project.

There is also an updated “Uniform Color Swatches” Sketch file in the Assets repo.


27 Oct. 2016 - Space

This release defines spacing in Uniform. It includes guidelines for using space and a space scale. See: Space

Implementation for space on the web is documented in Uniform UI for space classes, space mixin and space variable.

Also in this release are 17 new icons along with their outlined counterpart. These new icons are available in the Uniform Icons Sketch file and as React components.


30 Sept. 2016 - Forms

This release defines base HTML Forms in Uniform — specifically Text Inputs, Text Areas, Selects, Radios, Checkboxes, and their various styles, sizes, options, and states. See: Forms

These Button definitions are implemented in Uniform UI CSS v0.9.0, along with Uniform UI Components v1.1.0 for use in web interfaces.


20 Sept. 2016 - Added New Wallpapers

With the recently announced brand refresh, we wanted to make some wallpapers available for use on your desktops and phones so you can show off this new Hudl style. You can find them in Downloads.


9 Sept. 2016 - Brand Logos and Guidelines

The Brand page was updated to list the official Hudl logos in use, and the guidelines for using them. There are also links to the respective logo assets to be used in marketing materials. See: Brand.


26 Aug. 2016 - Iconography and Buttons

With the definition of Iconography, this release completes the “Big Three” stylistic tenants of our design language (color, typography, iconography). See: Iconography.

This release also defines Buttons. See: Buttons. These Button definitions are implemented in Uniform UI CSS v0.8.0 for use in web interfaces.

Uniform UI Components are now a thing! Both Icons and Buttons are now available as React components.

The information architecture of this website (design.hudl.com) has been updated to keep our growing design language organized. With the addition of Buttons, Identity Color and Tagging Color are now categorized as “Elements”.


22 July 2016 - Typography

This release defines Typography in Uniform. Specifically style guidelines for Headings, Subheads, Text, Item Titles. See: Typography. Also included is a Typography Sketch asset added to downloads.

These definitions are implemented in Uniform UI CSS v0.7.0 for use in web interfaces.


29 June 2016 - Identity and Tagging Colors

This release defines Identity Colors (Teams, Team Members, Athletes, and Brands) and Tagging Colors in Uniform. See: Identity Color and Tagging Color.

These definitions are implemented in Uniform UI CSS v0.5.0 for use in web interfaces.


7 June 2016 - Colors for Dividers and Borders

After releasing Colors, we immediately realized we needed variations for hairlines and borders. This release defines Tints and Shades of background colors to address this. See Color. More about this on Sync.

These definitions are implemented in Uniform UI CSS v0.3.1 for use in web interfaces.


18 May 2016 - Colors

This release defines Colors in Uniform. See: Color. There are 31 color swatches in four categories (Base Brand, Utility, Light Environment and Dark Environment) along with guidelines for when to use each color. More about this on Sync.

These definitions are implemented in Uniform UI CSS v0.3.0 for use in web interfaces.


22 April 2016 - Hello world!

What’s new? Everything! This is the beta launch of Hudl’s Design System. The purpose of this release is to set the stage for what’s to come.

Included in this release:

This site is built using Jekyll and hosted on GitHub Pages.