Uniform Design system

  • visual design
  • UI / UX Design
  • Training
  • Front-end development
  • CSS Architecture

The Uniform UI CSS Documentation site was the earliest deliverable of the Uniform system.

Learn to walk before we run

In 2015, Hudl had a successful, growing product.

But without a design system, the product was beginning to drift away from coherency and was beginning to wrestle with technical debt.

The Uniform Design Team (we were originally called Kickoff) spun up in mid-August 2015. I joined Hudl in early July, hoping to become one of the four people to comprise the first interation of our design systems team. Thankfully, the team was established, and I was able to join. This “officially” started my design system journey.

As our team spun up we identified some immediate opportunities to create impact and provide value. We knew we wanted and needed to evolve the visual language, but first we needed to lay some technical foundations to set the stage for our future design system aspirations.

My early focus centered on a few key areas:

  • Empowering and teaching product teams to write better, more performant CSS

  • Creating a distributed source of truth for CSS-related concerns.

  • Improving the quality of HTML across the product with semantic HTML.

Lunch and learn sessions would cover a wide variety of front-end best practices.

Empowering with education

In the early days of the Uniform team, I spent time developing a more opinionated perspective on writing scalable, performant CSS.

I wrote wiki posts and led a number of lunch and learns that covered the gamut from general CSS authoring practices to working with our distributed uniform-ui-css npm package

All examples in the UniDocs clearly displayed the system status: Stable, In Development or Deprecated.

hello

Before Uniform had React components, the UniDocs site offered copy/pasted examples of the markup design system consumers could use in their Apps.

One of the early philosophies of the Uniform was multiple points of entry to the system. Whether React components, Uniform UI CSS class or SCSS mixin, we strived to provide multiple opportunities to connect to the system, and the guidance how.

Uniform UI Docs

The Uniform UI Docs site (UniDocs) was a labor of love for me. I wrote the documentation. Maintained the site’s development and added features as the emerging Uniform design system evolved.

The UniDocs blog often demostrated how to achieve real-life product needs, using both uniform-ui-css classes or SCSS mixins from the corresponsing NPM package.

Each React component (or HTML) example demostrated how the component looked in both Light and Dark Environments, as well as the Layers within each of those environments. The code for the example was displayed and could be copy and pasted into App code, if needed.

Establishing a first class home for documentation

The UniDocs site was always considered to be a temporary solution. In 2016, we the Uniform design lanauage evolved and we began bulding a React component library and better Sketch resources, we knew it was time to establish a better home for documentation.

As a first step, I evaluated a few static site generators. I tested Jekyll (our solution for UniDocs), Gatsby, Hugo and Hexo.

We had a few core needs our next site generator needed to address:

  • Something that would allow us to host all (or most of) design system documentation.

  • Seemless integration with our React components.

  • Well supported open source ecosystem surrounding the technology.

  • The ability to scale to meet the needs of the system.

Gatsby (hey, it was 2016) seemed like the slam dunk option to build upon.

The second iteration of the Uniform Design System created a documentation platform that still exists today.

Each component specification page can easily be toggled between Design and Code, giving designers and engineers easy access to both disciplines.

Component groups have a distinctive landing page. These help designers or engineers identify similar options that might be more relevant to their use case

In creating Uniform we were always looking toward the future. Initially, Uniform only supported Web, but we built the framework for future Android, React Native and iOS into our initial site build

These four examples show how the site looks in 2025 but represents the functionality created during the 2017 build of the site.