# Quick start

A page drawn with the design system in four steps, with nothing but a browser and a text editor.

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:

```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.

## 1. Get the code

Download the zip from the [latest Release on GitHub](https://github.com/simbolik-lab/simbolik-design-system/releases/latest) 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](https://design.simbolik.ai/docs/installation/).

## 2. Link the stylesheets

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

index.html:

```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](https://design.simbolik.ai/docs/theme-and-density/) shows.

## 3. Add a component

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](https://design.simbolik.ai/docs/installation/#react) sets up a React site.

HTML, index.html:

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

React, example.tsx:

```tsx
import { Button } from './design-system/components/button/button.js';

<Button>Create project</Button>
```

> [!IMPORTANT]
> **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.

## 4. Add icons

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](https://phosphoricons.com) shows every icon with its name.

HTML, index.html:

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

React, example.tsx:

```tsx
import { Icon } from './design-system/components/icon/icon.js';

<Icon name="RocketLaunch" size="lg" />
```

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.

Next: [Installation](https://design.simbolik.ai/docs/installation/): Build the design-system folder from the code, and set up a React site to use its components.