HamburgerHamburger Icon

Quilt: The Buffy Design System

Quilt, the Buffy Design System, is a reusable component library that helps engineers build UIs faster and closer to overall brand guidelines. It also offers an opportunity for designers and other digital product contributers an opportunity to stay up to date on the look of our digital experiences. The goal is to have one unified source of truth for all digital UI components for rapid development of new features.

It's Built On A Grid

The Engineering Grid layout system, Lattice, was created to provide a framework that supports all of the digital designs of the Creative Team. It is a 12-column layout page design that acts as a skeleton to create the many variations of pages and experiences that Buffy provide to customers.

Here's a demo of the type of page we're building, with grid lines to show how our goal is for content to fit neatly within the grid:

Lattice is maintained on Github.

Rapid Development

We also use Gatsby to build our web experiences. Gatsby is a tool to create static website and applications that are meant for speed and performance. Buffy has a Gatsby starter site that you can get setup in minutes. In your terminal, just type:

gatsby new new-buffy-site https://github.com/buffyco/buffy-gatsby-starter-app.git
Copy

This will install all the libraries and packages needed to get started on a new app. For more info, head to the starter app repository.