Skip to content
Artsy's design system
TypeScript JavaScript Other
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update yarn orb to v2 Jul 18, 2019
.github/ISSUE_TEMPLATE Update Component Spec template to include web Zeplin link Jul 29, 2019
.vscode Restructure a bit Feb 1, 2019
.autorc Merge pull request #329 from ds300/fix-lerna-auto-setup Mar 14, 2019
.gitignore Add storybooks, visual testing with chromatic (#398) Apr 26, 2019
.yarnrc Remove quotes as per docs Oct 8, 2018 Update [skip ci] Aug 19, 2019
LICENSE Convert to MIT Sep 23, 2018 Adds comment to readme Aug 15, 2019
lerna.json Bump version to: 4.16.2 [skip ci] Aug 19, 2019
package.json Pin dependencies Apr 29, 2019
renovate.json Use lib workflow (#457) May 6, 2019
yarn.lock Adds ios Close and Check Circle Icons Aug 19, 2019

@artsy/palette CircleCI npm version Netlify Status

Artsy's Design System


What is Palette?

Palette is a collection of primitive, product-agnostic elements that help encapsulate Artsy's look and feel at base level. This project is intended to be used across our digital product portfolio.

Does my component belong in Palette?

If the component applies to Artsy as a brand and can/will be used across multiple digital products, then Palette is a great place for it. If it's highly product specific then it's best to leave the component where it's used. We can always move things later!

If the above guidance still doesn't give you a good sense of what to do, please join the bi-weekly design systems sync.

How to contribute

If you'd like to add a new component to Palette please create an issue using the component spec template. That'll give both design and engineering a chance to peek at the proposal and provide feedback before moving forward.

Local development

In the project root run the following:

$ yarn start
$ open http://localhost:8000/

Link with Emission

When developing components for Emission, boot the Simulator and from the Palette project root run:

$ yarn workspace @artsy/palette watch:emission

Since React Native doesn't support symlinks, this will copy changes directly to the Emission folder and hot-reload the app.

Linking and Unlinking with Reaction

To link your local palette with your local reaction, run:

$ yarn workspace @artsy/palette link && yarn workspace @artsy/palette watch
(wait until you see a message that X files have been successfully compiled before moving on)

$ cd ../reaction && yarn link @artsy/palette && yarn start

To _unlink_ your local palette from your local reaction, run (in **Reaction**):

$ yarn unlink @artsy/palette
$ yarn add @artsy/palette
$ yarn start

⚠️ Don't Forget About iOS!

When adding a new component to Palette, it's important to be aware that this library is used on the web as well as in React Native, via Emission, and therefore must follow a few rules in terms of structure, namely:

If a mobile component has platform-specific features, that code has to live in a Component.ios.tsx file. Or if a web component has browser-only features, then a Component.ios.tsx file must be created, or React Native will error out. If the code between a web and native component is identical, a .ios.tx file isn’t needed. If some code can be shared between platforms, then that shared code should live in a Component.shared.tsx file.



And from within /elements/index.tsx, we export our component:

export * from "./MyComponent";

When React Native imports @artsy/palette, it will automatically look for files with a .ios extension and import those first, and then secondarily import everything else. If a component contains web-only features but doesn't have a corresponding iOS file stub, React Native tooling will error out.

Deployment process

Commits and Deployments

Palette uses auto-release to automatically release on every PR. Every PR should have a label that matches one of the following

  • Version: Trivial
  • Version: Patch
  • Version: Minor
  • Version: Major

Major, minor, and patch will cause a new release to be generated. Use major for breaking changes, minor for new non-breaking features, and patch for bug fixes. Trivial will not cause a release and should be used when updating documentation or non-project code.

If you don't want to release on a particular PR but the changes aren't trivial then use the Skip Release tag along side the appropriate version tag.

Zeplin Plugin

Artsy uses Zeplin and we have developed a plugin that you can install to get Palette component JSX copied directly from Zeplin mocks.

Repos consuming Palette

You can’t perform that action at this time.