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

<Meta title="Docs/Introduction" />

# @estiva-app/ui

The shared foundation of every Estiva app's interface: the **design tokens**
(colour, type, radius, shadow) and a **small set of primitives** built on
them.

**Tokens are the contract. Components are a convenience.** An app must not
diverge from the token names. It may fork any component, freely, and owes
nothing back — a fork is information about the seam, not a failure; say so
on the package's ticket, and never bend your view around a component.

## Start here

1. **[Getting started](?path=/docs/docs-getting-started--docs)** — wire a
   new app to the package, in six steps.
2. **[Choosing a component](?path=/docs/docs-choosing-a-component--docs)**
   — what to reach for, by what you need.
3. **[Design Tokens](?path=/docs/docs-design-tokens--docs)** — the
   vocabulary everything here is written in.
4. Every component's own page says **when** to use it, when **not** — with
   the alternative named — and **how**, with its stories live on the page.

Use the **Theme** toolbar anywhere in this Storybook to see every page
under each of the package's themes: the same token names, a different look.

## What belongs here

- In the package: components that know nothing about any product — built
  from tokens, generic over their content, with stories that need no app
  data.
- In your app: anything that knows your product's objects. Build it there,
  out of these parts, and keep its stories in your app's own Storybook.