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.
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><BorderBoxp={2}><Textvariant='md'>
About the work
</Text></BorderBox><BorderBoxml={2}><Textvariant='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: