Artsy

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.

Palette Storybook
Note that we use React Storybooks for developing Palette components; check it out here.

While Storybooks doesn't provide live code examples, it's often a more complete representation of what features are available via props.

For more info, see our development guide.

Getting Started

To add Palette into your app, install it as a package:

$ yarn add @artsy/palette

And at the root of your component tree instantiate <GlobalStyles /> and add the <Theme> provider:

import { Theme, injectGlobalStyles } from "@artsy/palette"

const { GlobalStyles } = injectGlobalStyles(`
  // overrides and additions
`)

export const App = (props) => {
  return (
    <Theme theme="v3">
      <>
        <GlobalStyles />
        ...
      </>
    </Theme>
  )
}

From there you should be able to access the values from Palette's Theme.tsx file:

import { BorderBox, Flex, Text } from '@artsy/palette

const Artworks = props => {
  return (
    <Flex>
      <BorderBox p={2}>
        <Text variant='md'>
          About the work
        </Text>
      </BorderBox>

      <BorderBox ml={2}>
        <Text variant='sm'>
          Details
        </Text>
      </BorderBox>
    </Flex>
  )
}

Adding Fonts

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:

<head>
  <link
    href="https://webfonts.artsy.net/all-webfonts.css"
    rel="stylesheet"
    type="text/css"
  />
</head>

Using react-head:

import { HeadProvider, Link } from "react-head"

const App = () => (
  <HeadProvider>
    <Link
      href="https://webfonts.artsy.net/all-webfonts.css"
      rel="stylesheet"
      type="text/css"
    />
  </HeadProvider>
)

Using React Helmet:

import { Helmet } from "react-helmet"

const App = () => (
  <Helmet>
    <link
      href="https://webfonts.artsy.net/all-webfonts.css"
      rel="stylesheet"
      type="text/css"
    />
  </Helmet>
)

If you're using Next.js, Gatsby or any other framework the patterns should be similar.

On this page
Getting Started
Adding Fonts