Palette is Artsy's design system. This is a collection of primitive, product-agnostic elements that help ensure consistency and quality across Artsy's products, both in look and feel and overall user experience. This project is a collaborative effort between design and engineering, intended to be used across all Artsy's product ecosystem.
Have questions? Join us in #design-system on slack, we're always happy to help.
To add Palette into your app, install it as a package:
And at the root of your component tree instantiate
<GlobalStyles /> and add
From there you should be able to access the values from Palette's Theme.tsx file:
In order to use Artsy's fonts, you'll also want to add our webfont file to the CSS in the header of your app. Here are a few common examples:
Add to the
head of your document:
Using React Helmet:
If you're using Next.js, Gatsby or any other framework the patterns should be similar.