wwnorton / design-system

The W. W. Norton & Company design system

The Norton Design System

A design system built by W. W. Norton & Company.

View all documentation at https://wwnorton.github.io/design-system.

Repository Structure

This repository uses workspaces to manage design system packages as a monorepo.

• @wwnds/core is an implementation of the design system's styles and foundations. It contains modular Sass declarations, mixins, functions, and design tokens (variables). It is the source of truth for the theming system and default styles.
• @wwnds/react is a React component library implementation of the design system. It has no styling and is designed to work well with @wwnds/core.
• website (https://wwnorton.github.io/design-system) contains the actual design system. It depends on both @wwnds/core and @wwnds/react and uses Docusaurus as its static site generator.

Contributing

Any and all contributions are welcome from anyone who would like to help. To learn more about contributing, please read the contribution guide.

Because this is a monorepo, a couple extra steps are required to get your local environment ready.

Environment Setup

The following assumes that you already have Node.js and Git installed locally.

1. Clone the repository.
2. Install all workspace dependencies via npm@7+.

git clone https://github.com/wwnorton/design-system.git
cd design-system
npm install

Developing

All development commands should be run from the root of the repository.

• npm run storybook: the Storybook server for @wwnds/react. Useful for component development.
• npm run dev:docs: start the Docusaurus server for the website. Useful for writing documentation or full design system development.
• npm run build: run a production build for each library package, outputting to packages/{package_name}/dist. Useful for testing production builds.
• npm run test: run unit tests.