# Zenbu UI color

The Zenbu palette is warm, quiet, and material-oriented. Paper neutrals carry
most surfaces; restrained natural colors provide emphasis without making the
interface feel synthetic or overly saturated.

## Reference colors

`reference.css` exposes the steps required by current themes and components:

- `--zenbu-ref-color-neutral-*`: paper, linen, charcoal, and ink;
- `--zenbu-ref-color-brand-*`: faded workwear and indigo;
- `--zenbu-ref-color-danger-*`: brick and iron oxide;
- `--zenbu-ref-color-success-*`: matcha and moss;
- `--zenbu-ref-color-warning-*`: persimmon and ochre.

Reference values do not change between themes. They are consumed by semantic
theme mappings, not directly by application components.

## Legacy material aliases

These compatibility aliases preserve existing visual names while migration is
in progress:

```css
var(--zen-color-paper)
var(--zen-color-washi)
var(--zen-color-linen)
var(--zen-color-sumi)
var(--zen-color-brick)
var(--zen-color-persimmon)
var(--zen-color-ochre)
var(--zen-color-moss)
var(--zen-color-patina)
var(--zen-color-indigo)
var(--zen-color-plum)
var(--zen-color-clay)
var(--zen-color-wood)
```

Do not use them in new component CSS; map the intended role through a
`--zenbu-sys-color-*` token instead.

## Semantic roles

Components should prefer semantic tokens because these adapt to the current
theme:

- surfaces: `--zenbu-sys-color-surface-*`;
- text and icons: `--zenbu-sys-color-text-*` and
  `--zenbu-sys-color-icon-*`;
- borders: `--zenbu-sys-color-border-*`;
- actions and states: `--zenbu-sys-color-action-*`;
- status: `--zenbu-sys-color-info-*`, `success-*`, `warning-*`, and
  `danger-*`;
- selection and focus: `--zenbu-sys-color-selection-*` and
  `--zenbu-sys-color-focus-*`.

Legacy `--zen-color-*` values remain compatibility aliases. New code uses the
`--zenbu-ref-*` / `--zenbu-sys-*` architecture.

Component and catalog styles may not contain raw color literals. Add or reuse a
token in `tokens.css`, then reference it with `var()`. The Bazel target
`//design_system/test:design_system_policy_test` rejects hex, functional, or
named colors anywhere else in the design-system source.

## Data colors

`--zen-color-data-1` through `--zen-color-data-10` remain the current
categorical compatibility palette.
They deliberately vary in both hue and lightness. Keep adjacent series in
numerical order and provide labels or patterns; color alone must never carry
meaning.

## Usage

```css
.repository-summary {
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-subtle);
  background: var(--zenbu-sys-color-surface-subtle);
  color: var(--zenbu-sys-color-text-primary);
}

.repository-summary strong {
  color: var(--zenbu-sys-color-text-link);
}
```