Shopify Design Foundations

About this repo | Projects | How to use this repo | Technical details | Contribute to our explorations | Resources

About this repo

The experience platform for Shopify. This repository is focused on centralizing foundational design system resources.

Projects

A public version of our Github Project will be coming soon!

Development

Make sure Git and Node.js are installed on your computer, then run the following commands in your terminal to get started:

$ git clone https://github.com/Shopify/foundational-design-system-proto.git    # git clone repository
$ cd foundational-design-system-proto                                          # access the files
$ npm install                                                                  # install dependencies
$ npm run dev                                                                  # run locally

Technical details

As we continue to iterate and evolve, these technologies are subject to change. Currently, the foundations are built using the following technologies as part of our React TypeScript stack:

• Sprinkles, a CSS framework for vanilla-extract
• vanilla-extract, a CSS-in-JS library
• ViteJS, a frontend build tool

For questions about our tech stack, go to #polaris

Contribute to our explorations

We'd love to hear what you think. Start a conversation in Github Discussions!

Resources

Documentation

• Design tokens
• React components

NPM packages

@shopify/layout-experimental

An NPM package of experimental React components for layout, including abstractions for flexbox and grid, built with Vanilla Extract and Sprinkles.

Install locally

1. Add the dependency:

NPM

npm install @shopify/layout-experimental

Yarn

yarn add @shopify/layout-experimental

2. Import the foundation styles at the base of your app:

import '@shopify/layout-experimental/dist/style.css';

3. Read the component API documentation

Explore the sandbox

We have created a sandbox utilizing the experimental release of our foundational layout components: Box, Grid, Flex, and more. Check it out to see examples of how the components can be used and try them out yourself!