BUNN Design System

Getting started

Getting started with web projects is as easy as adding the following CSS reference to your project, as well as deploying font files to a /fonts directory on the web server. Licenced font files can be included with any project that is sponsored by BUNN® or hosted at bunn.com.

If you are using BUNN Design System as a dev depedency in your packages.json, the /fonts folder can be automatically copied with the use of something like this in your packages.json scripts:

rimraf ./public/fonts && shx cp -r ./node_modules/bunn-design-system/fonts ./public/fonts

This requires the npm packages rimraf and shx for the best cross platform support.

<link rel="stylesheet" href="https://resource.bunn.com/assets/common/design/v1.0.2/main.css"/>

Configuration

We've made slight adjustments to the tailwind.js configuration file that is unique to our design system; pimarily in the area of typography and color. Below is the current configuration file used for BUNN Design.

View the tailwind.config.js source file.