# Surface Color

## Essence

Background color for contained UI surfaces.

## Tokens

- Base: `--color-surface` = `#ffffff / rgb(255, 255, 255)`.
- Inverse: `--color-surface-inverse` = `--color-text` = `#191b1f / rgb(25, 27, 31)`.

## Internal Rules

- Use for component surfaces, not the page canvas or foreground text.
- Use the inverse token when a surface belongs to an inverse context.

## Accessibility Notes

Surface content must use a foreground token with sufficient contrast.

## Code Paths

- `packages/design-system/src/styles/tokens.css`