# PRODUCT.md — Arbor Design System

> Strategic design context for Arbor. Machine-read by the Impeccable design skill.
> Companion: https://arbor.linktr.ee/DESIGN.md (the visual system). Canonical source: generated
> from this repo's design system — do not hand-edit the served copy.

## Register

product

Arbor is **internal tooling for Linktree engineers and designers**, not a marketing
surface. Design here SERVES the product: it should disappear into the task. The bar is
earned familiarity — a Linktree builder should trust every component the way they trust
Linear, Stripe, or Figma, and never pause at a subtly-off control.

## Platform

web

Arbor ships React components for web. (A React Native token package,
`@linktr.ee/arbor-native`, exists for the Cerberus mobile app, but the generation surface
here is web.)

## Users

Linktree engineers and designers building product UI — settings panels, editor surfaces,
dashboards, forms, onboarding. They are in a task, not browsing a marketing page.

## Purpose

Let a builder ship low/medium-complexity UI that is consistent with Arbor without a
per-change designer and without losing quality. Every screen reinforces one claim: this
looks and behaves like the rest of Linktree's product.

## Brand personality

Empowering, direct, encouraging, inclusive — see the Linktree voice chart
(`docs/content/voice-chart.md`) and house style (`docs/content/house-style.md`) for the
full guidance. Confident and quiet; the interface makes the builder capable, it does not
show off. Use sentence case for all UI text; buttons are active imperative verb + object
("Save changes", not "Submit").

## Anti-references

- Over-decorated product UI: gratuitous gradients, glassmorphism, decorative motion,
  display fonts in labels / buttons / data.
- Reinvented standard affordances (custom scrollbars, non-standard modals, invented
  controls for standard tasks).
- Modal-as-first-thought — exhaust inline / progressive disclosure first.
- Inconsistent component vocabulary across screens.

## Accessibility

WCAG 2.1 AA is the floor. Every interactive element ships with default / hover / focus /
active / disabled / loading / error states, a visible focus ring, keyboard navigation, and
a screen-reader label. Informative text uses at least `foreground-secondary` contrast
(`foreground-tertiary` fails AA for normal text).