Quick start

There's no npm package yet. Instead a site keeps one folder, design-system/, holding the stylesheet, the fonts and icons, the React components and the checker. The shortest start is a page beside that folder:

index.html

<link rel="stylesheet" href="design-system/assets/fonts/fonts.css">
<link rel="stylesheet" href="design-system/assets/phosphor/regular/style.css">
<link rel="stylesheet" href="design-system/css/simbolik.css">
<body data-theme="dark">
<button type="button" class="smbk-btn smbk-btn--tone-brand smbk-btn--size-md"><span class="smbk-btn__label">Create project</span></button>

The four steps below go through it.

Download the zip from the latest Release on GitHub (opens in a new tab) and unzip it into your site. It makes the design-system/ folder, which holds assets/, css/, components/, conformance/, output/, package.json and LICENSE, and a few files more.

To build the folder from the code instead, follow Installation.

Link the fonts, the icon font and the design system's stylesheet in the page's <head>:

index.html

<link rel="stylesheet" href="design-system/assets/fonts/fonts.css">
<link rel="stylesheet" href="design-system/assets/phosphor/regular/style.css">
<link rel="stylesheet" href="design-system/css/simbolik.css">

The fonts, Funnel Display, Geist and Geist Mono, and the icon font are in the folder's assets/, each with its license beside it. Keep the licenses with them. The first stylesheet holds every weight of the three fonts the system uses, so a page waits for one font file instead of one per font and weight.

The last stylesheet holds the design tokens and every component. It draws the components and nothing around them: the page's own background, text color and typeface come from your CSS, as Theme and density shows.

Write a component's markup with its classes. The block class names the component, a modifier class names each choice (smbk-<block>--<axis>-<value>), and a part class names each part (smbk-<block>__<part>). Every component's page has its markup to copy, in its Code section, for whatever you choose in its preview.

In React, import the component from its file in the folder instead. It sets the classes for you. The stylesheet still draws it, so keep the links from step 2. Installation sets up a React site.

<button type="button" class="smbk-btn smbk-btn--tone-brand smbk-btn--size-md"><span class="smbk-btn__label">Create project</span></button>

Behavior comes with React

The stylesheet draws every component, but some need a script to work: opening a dropdown or a modal, switching tabs. Their React components do that for you. In plain HTML, that part is yours, and each component's Accessibility notes say what it has to do.

The icons are the Phosphor icon font, in its regular weight. An icon is an <i> element with Phosphor's classes, ph and ph-<name>, and the icon's own classes for its size. In React, the Icon component takes the name. Phosphor's site (opens in a new tab) shows every icon with its name.

<i class="ph ph-rocket-launch smbk-icon smbk-icon--size-lg" aria-hidden="true"></i>

An icon is hidden from screen readers unless it has a name. Give it one, the label prop in React, when it means something on its own.

Menu

1. Get the code

2. Link the stylesheets

3. Add a component

4. Add icons