Introduction to DASH

Background

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

Status

To date, we've been busy fleshing out token structures and component sets in Figma and in code.

Architecture

• Token definitions are synced between Figma and Storybook (currently hosted separately at tokens.hash.design).
• The component library has been built atop accessible, unstyled Ark UI components, with Panda CSS providing utility-first styling.

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

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

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.

The package setup documentation 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:

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