import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Documentation/Introduction" />

![Arrow Design System](./arrow-logo.png)

<br />

## Purpose

Arrow Design System is a design system built to equip Aptible engineers with the tools they need to build quality, consistent user experiences across Aptible products. This unified design language gives us the ability to build and learn quickly while establishing trust with our end users.

## Getting Started

Arrow DS provides two primary toolsets:

#### Components

The majority of needed UI changes can be accomplished with the various components included in Arrow DS. Continue exploring this storybook to view them all.

#### CSS Utility Classes

Arrow Design System also provides a full set of utility classes for composing UI in the product and for making small adjustments to existing components. Utility classes are CSS classes designed to modify a minimal number of css rules (usually one) and can be used inline in HTML without the need for the product engineer to create a separate stylesheet. These utility classes are generated using [tokens](https://github.com/aptible/arrow-ds/blob/master/tailwind.config.js) and [Tailwind CSS](https://tailwindcss.com/docs/utility-first). For example, if you need to make a heading a different color, you would apply the Arrow DS utility class for changing text color to the `Heading` Arrow component.

```jsx
import { Heading } from "@aptible/arrow-ds";

<Heading.H1 className="text-brandGreen-400"></Heading.H1>;
```

More detailed documentation on how to use these utility classes is forthcoming, but for now please consult Tailwind's documentation for more examples. It is helpful to search their documentation by the CSS rule you would normally use, and then determine the appropriate utility class.