Muriel’s color palette
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
builders
data Introduce Hot Purple Nov 20, 2018
dist
docs-source Add README Nov 15, 2018
docs
extensions/sketch
utilities
.gitignore
CHANGELOG.md
LICENSE.md
README.md
package.json
webpack.config.js
yarn.lock

README.md

Color Studio

The computational color palette for Muriel, our design language system.

What’s Inside

Color Studio generates the following:

Also:

The Palette

Color palette preview

Using Color Studio as a Dependency

yarn add automattic/color-studio

This package is dependency-free.

SCSS

@import "~color-studio/dist/color-variables";

button {
  background: $muriel-hot-pink-500;
  color: $muriel-white;
}

JavaScript

const PALETTE = require('color-studio')

The above imports the contents of the JSON file.

Development

# Generate the JSON file, the stylesheet partial, and the Sketch palette file.
yarn palette

# Build the documentation assets from `docs-source`
yarn docs
yarn docs:watch

# Build and link the Sketch extension
yarn sketch
yarn sketch:watch

# Generate the preview image (by taking a screenshot of the documentation)
yarn meta

All those commands run automatically before every commit and so does the linter.

License

Color Studio is licensed under GNU General Public License v2.0 (or later).