# Introduction to DASH (/foundations/design-system)



## Background [#background]

**DASH** is intended to provide a comprehensive array of components, and reliable mechanisms for composing them, usable by AI agents.

## Status [#status]

To date, we've been busy fleshing out [token structures](/foundations/design-system#tokens) and [component sets](/components) in Figma and in code.

## Architecture [#architecture]

* Token definitions are synced between [Figma](https://figma.com) and [Storybook](https://storybook.js.org/) (currently hosted separately at [tokens.hash.design](https://tokens.hash.design)).
* The component library has been built atop accessible, unstyled [Ark UI](https://ark-ui.com/) components, with [Panda CSS](https://panda-css.com/) providing utility-first styling.

## Foundations in practice [#foundations-in-practice]

DASH foundations guide the appearance and behavior of our interfaces. We apply them through shared values, automated checks, and decisions made during design and review.

* **Tokens** encode many visual foundations in the Panda setup, including colors, typography, spacing, border radii, shadows, and motion durations. Use the shared tokens when composing components and screens.
* **Lint rules** can enforce some requirements, including checks for [accessibility](/foundations/accessibility) issues such as missing labels or invalid ARIA attributes. Run the checks configured for your project, and test the complete interface with a keyboard and assistive technology.
* **Principles** require judgment: a clear hierarchy, understandable language, and predictable feedback depend on the task and the people using the interface. Keep these principles in mind as you design, implement, and review each flow.

## Tokens [#tokens]

Design tokens give shared names to colors, typography, spacing, radii, shadows, and durations. The token definitions and Panda preset are owned by `@hashintel/ds-components`; `@hashintel/ds-helpers` provides the generated styling and token lookup helpers.

### Use the foundations [#use-the-foundations]

| Topic                              | Start here                                    |
| ---------------------------------- | --------------------------------------------- |
| [Colors](/foundations/colors)      | Choose semantic roles and palettes.           |
| [Typography](/foundations/type)    | Apply type styles, families, and weights.     |
| [Spacing](/foundations/spacing)    | Set gaps, padding, and density.               |
| [Border Radii](/foundations/radii) | Choose corners and roundness.                 |
| [Shadows](/foundations/shadows)    | Distinguish overlapping elements.             |
| [Motion](/foundations/motion)      | Choose durations and reduced-motion behavior. |

## Source and setup [#source-and-setup]

The examples in these pages were checked against `@hashintel/ds-components` 0.5.0 and `@hashintel/ds-helpers` 0.2.2. Check the versions installed in your application when adopting or updating them.

* Import the preset from `@hashintel/ds-components/preset` in your Panda configuration.
* Set Panda's `importMap` to `@hashintel/ds-helpers`, and include your application source files and the component package's published `panda.buildinfo.json` when extracting styles.
* Generate and load the resulting stylesheet. Importing the `css` function creates class names; the application still needs their generated CSS.
* Load the font families used by your theme and provide their font variables. See [Typography](/foundations/type#font-stacks).

The [package setup documentation](https://www.npmjs.com/package/@hashintel/ds-components/v/0.5.0) covers the preset and published build information.

Use short names in style properties, such as `padding: "4"` or `borderRadius: "lg"`. Use a full category path with the token helper:

```tsx
import { token } from "@hashintel/ds-helpers/tokens";

export const panelStyle = {
  padding: token.var("spacing.4"),
  borderRadius: token.var("radii.lg"),
};
```

`token.var` preserves a CSS variable reference, including its theme or density behavior.

## Packages [#packages]

<Cards>
  <Card href="https://hash.dev/docs/libs/ds-components" title="DS Components">
    DASH React components
  </Card>

  <Card href="https://hash.dev/docs/libs/ds-helpers" title="DS Helpers">
    DASH PandaCSS styled system
  </Card>

  <Card href="https://hash.dev/docs/libs/ds-icons" title="DS Icons">
    DASH animated SVG icon set
  </Card>

  <Card href="https://hash.dev/docs/libs/refractive" title="Refractive">
    Performant, cross-browser, realistic refraction
  </Card>
</Cards>