# Background Secondary Color

## Essence

Secondary page/background color token for grouped repeated-content regions.

`Background Secondary Color` provides a quiet light-grey background for areas such as `Card Grid`, where repeated children need a subtle shared field without becoming a framed surface or interactive state.

## Hook

Use when a region needs a calm secondary background behind repeated or grouped content.

## Internal Rules

- Base token: `--color-bg-secondary`.
- Base value: `#eeeeee / rgb(238, 238, 238)`.
- Inverse token: `--color-bg-secondary-inverse`.
- Inverse value resolves to `--color-text`.
- Use for background fields, not text, borders, hover states, or selected states.
- Do not use this token to imply that content is clickable.

## Use When

- A repeated-content region needs subtle separation from the main page background.
- A grid or grouped block needs visible space between child surfaces.

## Do Not Use When

- A component needs a card/surface background; use `--color-surface`.
- A component needs a border; use `--color-line`.
- A component needs an interaction state; use `Interaction States`.
- The color is only decorative.

## Related Components And Patterns

- `Colors`: owns the approved color whitelist.
- `Card Grid`: uses this token as its region background.
- `Surface`: remains the card/framed-object background.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `packages/design-system/src/components/CardGrid.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`