Create a pattern library


A pattern library is a web page that defines the color palette, the typography and the components for your web project's design system. It serves as the single source of truth for anything related to design, but it does not necessarily have to contain the whole truth - you can start with a very basic pattern library and slowly introduce Warhol's style checking to your project.

Building and hosting a pattern library #

The simplest possible pattern library defines just a color palette with some super-simple HTML:

<div class="colorExample" style="background: navy">Primary color</div>
<div class="colorExample" style="background: #EEE">Secondary color</div>
<div class="colorExample" style="background: rgba(255, 0, 0, 0.5)">
  Error color
</div>

This does not look like much, but it is a serviceable color palette for all practical purposes:

To make a pattern library useful for Warhol (and your team) it needs to be hosted somewhere. This, again, does not require any bells and whistles. You can upload the HTML file on a service like Netlify, serve it from your own computer or from a proper web server. All that matters is that the pattern library is hosted somewhere.

For the purposes of this tutorial we can use this static HTML page, or you can create and host your own pattern library and play around with it while going through this tutorial.

Connecting Warhol to the pattern library #

Finally we need to tell Warhol where to find the pattern library, what screen size to use and how to identify the color elements:

  1. Go to app.warhol.io and log in
  2. Navigate to the Pattern Libraries Tab and click Add a new Pattern Lib
  3. Fill in a name for your new pattern library and select a team that this pattern library is assigned to
  4. Fill in your pattern library's URL as the Base URL

The other fields contain the finer details of pattern library configuration and can all be set to null for now... apart from the theme field! To point Warhol in the general direction of the color examples we can paste the following JSON there:

{
  "colors": {
    "sources": ".colorExample"
  }
}

This configuration instructs Warhol to source the color palette from elements that match the CSS selector .colorExample on the pattern library base URL with screen sizes set to the breakpoints as configured (or just 1000 if the breakpoints field is set to null).

Now don't forget to click Save pattern library and that's it: you have just set up your first pattern library for Warhol! Congratulations 🎉!

Warhol's automated services will immediately download and analyze that pattern library, which will take only a few seconds with our very simple example. This is all we needed to start debugging with the browser extension!

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.