# Tokens in Tailwind and code

The design tokens as Tailwind utilities, and read from TypeScript and JSON.

The design tokens reach more than the stylesheet. A Tailwind site gets them as utilities, and a program reads them from the files in `output/`.

## Tailwind

A site on Tailwind CSS version 4 imports the Tailwind theme beside the design system's stylesheet. The theme gives the tokens utility names and holds no value of its own, so a utility draws the same color as the component next to it.

CSS, app.css:

```css
@import "tailwindcss";
@import "./design-system/css/simbolik.css";
@import "./design-system/css/tailwind.css";
```

HTML, index.html:

```html
<p class="bg-surface-canvas text-text-default">Text on the page's own colors</p>
```

## TypeScript and JSON

The TypeScript module names each token's custom property, so code never types a `--smbk-` name by hand. The JSON file lists every token with its type, its value in each theme or setting and the custom property it makes.

TypeScript, theme.ts:

```ts
import { cssVariables } from './design-system/output/tokens.js';

const name = cssVariables['color.surface.canvas']; // "--smbk-color-surface-canvas"
element.style.backgroundColor = `var(${name})`;
```

JSON, design-system/output/tokens.json:

```json
{
  "path": "color.surface.canvas",
  "type": "color",
  "tier": "semantic",
  "category": "color",
  "emitted": true,
  "css": "--smbk-color-surface-canvas",
  "axis": "theme",
  "value": {
    "light": "#e7ebf0",
    "dark": "#111213"
  },
  "reference": "{color.grey.200}",
  "description": "Page background."
}
```

Next: [Check your site](https://design.simbolik.ai/docs/check-your-site/): The conformance checker lists every value written by hand and every component rebuilt by hand.