# Getting started

This is the five-minute version. For deeper reads, see [`for-designers.md`](./for-designers.md) or [`for-engineers.md`](./for-engineers.md).

## 1. Open the brand sheets

Two HTML files that render the visual system end-to-end:

```bash
open "brand-sheets/Ask Brand Sheet.html"      # the public-facing brand sheet
open "brand-sheets/Ask Design System.html"    # the full component reference
```

Both render directly from the filesystem — no build step.

## 2. Read the four documents that matter

In this order:

1. **[`brand/guidelines.md`](./brand/guidelines.md)** — the positioning. Who ASK is.
2. **[`brand/voice-and-tone.md`](./brand/voice-and-tone.md)** — how ASK speaks. Three attributes, three examples.
3. **[`brand/environments.md`](./brand/environments.md)** — the three execution environments (Chat / Notebook / Vertical) and how the UI signals which one you're in.
4. **[`brand/compliance-patterns.md`](./brand/compliance-patterns.md)** — mandatory. Patterns A–D.

Total reading time: ~20 minutes.

## 3. Pick your tool

| If you'll work in… | Set up |
|---|---|
| **Figma** | [`design-tokens/figma/IMPORT.md`](../design-tokens/figma/IMPORT.md) |
| **Next.js / Vite + shadcn** | [`design-tokens/README.md`](../design-tokens/README.md#shadcn--ui) |
| **Storybook** | [`design-tokens/README.md`](../design-tokens/README.md#storybook) |

## 4. Make a change

Don't open a PR before you've opened an issue. See [`CONTRIBUTING.md`](../CONTRIBUTING.md).

## 5. Questions

- General: [Discussions](https://github.com/mirai-srl/project-ask-design-system/discussions) or `#ask-design` in Slack.
- Brand or token decisions: Matteo Rizzo · matteo.rizzo@mir-ai.it.
- Security or compliance regressions: [`SECURITY.md`](../SECURITY.md).