# Localintel design system — boutique

The live catalogue of the tokens, components and composition patterns the Localintel web apps are
built from. Every specimen renders the real component, in light and dark side by side, so nothing
here can drift from what ships.

> Note for automated readers: every page below is rendered on the server, so a plain fetch returns the
> finished HTML — no browser or JavaScript needed. The two files under "Machine-readable" carry the
> same facts as structured data, which is usually quicker to read than the pages.

## Machine-readable

- [/design-system.json](/design-system.json): every token with its declared value and whether a
  utility class exists for it, plus every lib.fashion component with its inputs, outputs and variant
  unions. 113 colour tokens, 23 type steps,
  34 components.
- [/docs/design-contract.md](/docs/design-contract.md): what we ask of a design delivery and why —
  the scales, the breakpoint rule, the states matrix, what we add afterwards. Written for designers,
  readable as plain markdown.

## Pages

- /buttons
- /contract
- /forms
- /frame/card-grid
- /frame/navigation
- /frame/preview
- /frame/toolbar
- /navigation
- /overlays
- /patterns
- /table
- /tokens

## If you are producing a design for this system

Read this section first; it is the whole procedure.

1. **Build from the inventory.** Every component is in `design-system.json` under `components`,
   with its inputs, its variant unions, and — where one exists — a `limits` array stating what it
   cannot do. Composing these is free; extending one is usually minutes; anything else is new work
   and should be called out as such rather than assumed.
2. **Take every value from `tokens`.** A colour is named, never a hex: each token carries a light
   and a dark value and survives a per-client re-theme. Type, radius and spacing come from their
   scales; a value between two steps is outside the system, not near it.
3. **Respect the one breakpoint rule.** `md` at 768px, and:
   *Across breakpoints, keep the same elements in the same containers. Change size, direction, order and visibility as freely as you like. Do not re-parent an element, and do not split one group into two.*
   Size, direction, order and visibility are nearly free. Re-parenting means the same control is
   built twice, once per breakpoint, and the two copies drift.
4. **Design the states, not just the happy path.** Every control needs default, hover, active, focus,
   disabled and loading; every list needs loading, empty, error, one item and many.
5. **Use the longest realistic content**, and say what happens when it does not fit — wrap, truncate,
   or scroll. All three are buildable; a guess is not.
6. **Check yourself against `checklist`** in `design-system.json` before handing anything over.
   Those 6 questions are what the implementer will ask.

Accessibility, focus rings, hit targets and safe-area insets are added by the implementers and are
not yours to specify — but leave room: a focus ring needs about 2px of clearance, and mobile hit
targets grow toward 44px.

The full reasoning behind all of the above is [/docs/design-contract.md](/docs/design-contract.md).

## Components

- `lib-anchored-panel` — 5 inputs, 1 outputs
- `lib-avatar` — 4 inputs
- `lib-badge` — 1 inputs
- `lib-breadcrumb` — 4 inputs
- `lib-button` — 12 inputs, 1 outputs
- `lib-card` — 0 inputs
- `lib-checkbox` — 6 inputs
- `lib-color-picker` — 3 inputs
- `lib-confirm-dialog` — 0 inputs
- `lib-dialog` — 7 inputs
- `lib-divider` — 1 inputs
- `lib-drawer` — 3 inputs, 1 outputs
- `lib-file-upload` — 8 inputs, 1 outputs
- `lib-icon-field` — 1 inputs
- `lib-input-group` — 0 inputs
- `lib-input-group-addon` — 0 inputs
- `lib-input-icon` — 0 inputs
- `lib-input-number` — 9 inputs
- `lib-menu` — 5 inputs
- `lib-multi-select` — 19 inputs
- `lib-panel` — 3 inputs
- `lib-panel-menu` — 3 inputs
- `lib-picklist` — 12 inputs
- `lib-popover` — 2 inputs, 2 outputs
- `lib-progress-spinner` — 0 inputs
- `lib-radio-button` — 5 inputs
- `lib-select` — 24 inputs
- `lib-select-button` — 8 inputs
- `lib-skeleton` — 2 inputs
- `lib-skeleton-wrapper` — 0 inputs
- `lib-slider` — 5 inputs
- `lib-table` — 13 inputs
- `lib-tabs` — 2 inputs
- `lib-toast` — 0 inputs