# DASH — HASH Design

> DASH is the design system used across HASH projects. This site documents its brands, foundations, React components, patterns, and package releases for designers, engineers, and coding agents.

Use https://hash.design as the canonical documentation origin. Start with the pages relevant to the task, then read their linked references.

## Reading the documentation

- Append `.mdx` to a documentation page path to read its Markdown. For example, https://hash.design/components/button.mdx is the text version of the Button page.
- Read individual pages first to keep context focused. The optional full-text document below combines the site's published documentation.
- Open the HTML page when you need interactive examples, token playgrounds, or artwork. Those experiences may be represented by component references in the Markdown.
- Follow the links on the Components directory to find documented APIs. Tiles marked "No docs yet" are illustrations; confirm the implementation in the installed package before using it.

## Building with DASH

1. Read the Libraries page and the setup section on the DASH page. Check the package versions installed in the target project and use their exports, types, and setup instructions. Documentation examples and the latest changelog can refer to different package versions.
2. Read the relevant component pages for props, states, composition, and examples. DASH components use React, Ark UI, and PandaCSS. Prefer the shared components and semantic tokens when implementing HASH interfaces.
3. Follow the target project's Panda configuration, generated stylesheet, and font setup. Token names, import paths, and component props must match the installed packages.
4. Read the pattern guide for the task and preserve the component's keyboard, focus, and accessibility behavior. Check the completed screen in both themes, at narrow widths, and with reduced motion.
5. Treat the status on each page as part of its guidance. Verify package support before treating a proposed model as an available API.
6. Use the supplied brand assets and their usage guidance. Cite the documentation pages used to explain implementation choices. State when a required API or behavior could not be verified.

## Start here

- [DASH](https://hash.design/foundations/design-system.mdx): Read the architecture and principles, configure Panda, load generated styles, and use token values.
- [Libraries](https://hash.design/libs.mdx): Find the packages and their setup documentation.
- [Foundations](https://hash.design/foundations): Browse color, typography, spacing, motion, and other shared guidance.
- [Components](https://hash.design/components): Find available component pages and their API examples.
- [Patterns](https://hash.design/patterns): Find guidance for common interface tasks.
- [Tone & Voice](https://hash.design/foundations/tone-and-voice.mdx): Write product, developer, sales, and marketing copy for the right audience; keep claims accurate and next actions clear.
- [Accessibility](https://hash.design/foundations/accessibility.mdx): Review keyboard access, focus, contrast, forms, and layout.
- [Brands](https://hash.design/brands): Choose the brand assets and read the terms of use.
- [Changelog](https://hash.design/changelog.mdx): Review package releases when adopting or upgrading DASH.
- [Agent Skills](https://hash.design/foundations/skills.mdx): Install and use the DASH coding-agent skill.
- [DASH skill](https://hash.design/skills/dash/SKILL.md): Read the focused workflow and load its setup, implementation, or review references only as needed.
- [Skill download](https://hash.design/skills/dash.zip): Download the complete skill folder and supporting references.

## Optional

- [Full documentation](https://hash.design/llms-full.txt): Read all published pages as one text document when broader context is needed.
- [Sitemap](https://hash.design/sitemap.xml): Discover the site's current page URLs.