Match - Twilio Brand Design System

Match is a design system used to build accessible, consistent, and high quality public-facing experiences at Twilio.

Getting started

Prerequisites

1. You must have a valid, non-free Streamline license in order for the @twilio-labs/match-icons-twilio package to install. Ensure that your license key is present in the STREAMLINE_SECRET environment variable. We recommend setting this in your ~/.zshenv file. Alternatively, you may create a .env.local file in the root of the project.
2. Storybook and Gatsby will attempt to load on http://www.local.twilio.com. Please ensure that you have the following line in the /etc/hosts file on your machine: 127.0.0.1 www.local.twilio.com.

Clone the Match repository anywhere on your computer...

git clone git@github.com:twilio-labs/match.git

Install and bootstrap Match dependencies...

yarn & yarn bootstrap

Dev Container

Visual Studio Code's Dev Container is the quickest and most reliable way to get up and running with Match.

1. Install Visual Studio Code
2. Install Docker
3. Install the Remote Development Plugin

When opening the match folder in VSCode, you will be prompted to "Reopen in a Container". If you fail to click this button, just hit cmd + shift + p and type reopen then select "Remote-Containers: Reopen in Container". VSCode will build a Docker container with all of the Match dependencies installed and bootstrapped. Open a new terminal with ctrl + ` and run one of the following commands.