# Color reference

Package: @commenda/pathfinder@0.1.0
Page: /docs/foundations/color-reference

Choose a scale by its role, then check the foreground and background together. Each swatch below uses the actual exported color.

100–300 are fills; 400–600 are borders; 700–800 are solid fills; 900–1000 are text and icons. Check contrast for the actual foreground/background pair. Amber and orange solid fills require dark text; a scale step alone does not guarantee accessible contrast.

`--pf-color-background-subtle` aliases Soft Pearl 100. Dark values are not defined yet.

## Background surfaces [#background-surfaces]

<ColorPalette scale="background" />

Use white for surfaces and Soft Pearl 100 for a subtle canvas. Keep text outside decorative swatches so the reference stays readable.

## Soft pearl [#soft-pearl]

<ColorPalette scale="soft-pearl" />

<details>
<summary>Token values and CSS variables</summary>

| Token           | CSS variable                 | Hex       |
| --------------- | ---------------------------- | --------- |
| soft-pearl-100  | `--pf-color-soft-pearl-100`  | `#fcfbf8` |
| soft-pearl-200  | `--pf-color-soft-pearl-200`  | `#f8f6f1` |
| soft-pearl-300  | `--pf-color-soft-pearl-300`  | `#edeae3` |
| soft-pearl-400  | `--pf-color-soft-pearl-400`  | `#dedbd4` |
| soft-pearl-500  | `--pf-color-soft-pearl-500`  | `#c8c4be` |
| soft-pearl-600  | `--pf-color-soft-pearl-600`  | `#a6a29c` |
| soft-pearl-700  | `--pf-color-soft-pearl-700`  | `#8f8b85` |
| soft-pearl-800  | `--pf-color-soft-pearl-800`  | `#6d6963` |
| soft-pearl-900  | `--pf-color-soft-pearl-900`  | `#57524d` |
| soft-pearl-1000 | `--pf-color-soft-pearl-1000` | `#14120f` |

</details>

## Blue [#blue]

<ColorPalette scale="blue" />

<details>
<summary>Token values and CSS variables</summary>

| Token     | CSS variable           | Hex       |
| --------- | ---------------------- | --------- |
| blue-100  | `--pf-color-blue-100`  | `#f1f8ff` |
| blue-200  | `--pf-color-blue-200`  | `#e5f2ff` |
| blue-300  | `--pf-color-blue-300`  | `#d4e9ff` |
| blue-400  | `--pf-color-blue-400`  | `#bcddff` |
| blue-500  | `--pf-color-blue-500`  | `#93c8fd` |
| blue-600  | `--pf-color-blue-600`  | `#63aaed` |
| blue-700  | `--pf-color-blue-700`  | `#026eb9` |
| blue-800  | `--pf-color-blue-800`  | `#005a9c` |
| blue-900  | `--pf-color-blue-900`  | `#014679` |
| blue-1000 | `--pf-color-blue-1000` | `#012543` |

</details>

## Red [#red]

<ColorPalette scale="red" />

<details>
<summary>Token values and CSS variables</summary>

| Token    | CSS variable          | Hex       |
| -------- | --------------------- | --------- |
| red-100  | `--pf-color-red-100`  | `#fff4f2` |
| red-200  | `--pf-color-red-200`  | `#feebe8` |
| red-300  | `--pf-color-red-300`  | `#feded8` |
| red-400  | `--pf-color-red-400`  | `#ffcbc2` |
| red-500  | `--pf-color-red-500`  | `#ffa99b` |
| red-600  | `--pf-color-red-600`  | `#f77a68` |
| red-700  | `--pf-color-red-700`  | `#c93829` |
| red-800  | `--pf-color-red-800`  | `#b01b0f` |
| red-900  | `--pf-color-red-900`  | `#920a02` |
| red-1000 | `--pf-color-red-1000` | `#520d07` |

</details>

## Amber [#amber]

<ColorPalette scale="amber" />

<details>
<summary>Token values and CSS variables</summary>

| Token      | CSS variable            | Hex       |
| ---------- | ----------------------- | --------- |
| amber-100  | `--pf-color-amber-100`  | `#fff5ed` |
| amber-200  | `--pf-color-amber-200`  | `#feedde` |
| amber-300  | `--pf-color-amber-300`  | `#fde0c8` |
| amber-400  | `--pf-color-amber-400`  | `#fbd0ab` |
| amber-500  | `--pf-color-amber-500`  | `#f1b47e` |
| amber-600  | `--pf-color-amber-600`  | `#de9145` |
| amber-700  | `--pf-color-amber-700`  | `#d87e09` |
| amber-800  | `--pf-color-amber-800`  | `#bb6c07` |
| amber-900  | `--pf-color-amber-900`  | `#864c02` |
| amber-1000 | `--pf-color-amber-1000` | `#452501` |

</details>

## Green [#green]

<ColorPalette scale="green" />

<details>
<summary>Token values and CSS variables</summary>

| Token      | CSS variable            | Hex       |
| ---------- | ----------------------- | --------- |
| green-100  | `--pf-color-green-100`  | `#f1f9f1` |
| green-200  | `--pf-color-green-200`  | `#e7f5e6` |
| green-300  | `--pf-color-green-300`  | `#d6eed6` |
| green-400  | `--pf-color-green-400`  | `#c1e4c0` |
| green-500  | `--pf-color-green-500`  | `#a0d29f` |
| green-600  | `--pf-color-green-600`  | `#75b876` |
| green-700  | `--pf-color-green-700`  | `#36863a` |
| green-800  | `--pf-color-green-800`  | `#1e7125` |
| green-900  | `--pf-color-green-900`  | `#0f5b18` |
| green-1000 | `--pf-color-green-1000` | `#0c320f` |

</details>

## Purple [#purple]

<ColorPalette scale="purple" />

<details>
<summary>Token values and CSS variables</summary>

| Token       | CSS variable             | Hex       |
| ----------- | ------------------------ | --------- |
| purple-100  | `--pf-color-purple-100`  | `#f9f5fe` |
| purple-200  | `--pf-color-purple-200`  | `#f5ecfc` |
| purple-300  | `--pf-color-purple-300`  | `#eee0fa` |
| purple-400  | `--pf-color-purple-400`  | `#e4cff7` |
| purple-500  | `--pf-color-purple-500`  | `#d3b4ec` |
| purple-600  | `--pf-color-purple-600`  | `#b991d8` |
| purple-700  | `--pf-color-purple-700`  | `#8c5eae` |
| purple-800  | `--pf-color-purple-800`  | `#774a98` |
| purple-900  | `--pf-color-purple-900`  | `#61397d` |
| purple-1000 | `--pf-color-purple-1000` | `#372147` |

</details>

## Rose [#rose]

<ColorPalette scale="rose" />

<details>
<summary>Token values and CSS variables</summary>

| Token     | CSS variable           | Hex       |
| --------- | ---------------------- | --------- |
| rose-100  | `--pf-color-rose-100`  | `#fff3f6` |
| rose-200  | `--pf-color-rose-200`  | `#ffeaef` |
| rose-300  | `--pf-color-rose-300`  | `#fedce4` |
| rose-400  | `--pf-color-rose-400`  | `#ffc8d5` |
| rose-500  | `--pf-color-rose-500`  | `#fda5bc` |
| rose-600  | `--pf-color-rose-600`  | `#eb7d9d` |
| rose-700  | `--pf-color-rose-700`  | `#ce507a` |
| rose-800  | `--pf-color-rose-800`  | `#b63966` |
| rose-900  | `--pf-color-rose-900`  | `#982b53` |
| rose-1000 | `--pf-color-rose-1000` | `#50152a` |

</details>

## Orange [#orange]

<ColorPalette scale="orange" />

<details>
<summary>Token values and CSS variables</summary>

| Token       | CSS variable             | Hex       |
| ----------- | ------------------------ | --------- |
| orange-100  | `--pf-color-orange-100`  | `#fff4f0` |
| orange-200  | `--pf-color-orange-200`  | `#feece4` |
| orange-300  | `--pf-color-orange-300`  | `#fedfd2` |
| orange-400  | `--pf-color-orange-400`  | `#ffccb7` |
| orange-500  | `--pf-color-orange-500`  | `#feab88` |
| orange-600  | `--pf-color-orange-600`  | `#f3804c` |
| orange-700  | `--pf-color-orange-700`  | `#ef6820` |
| orange-800  | `--pf-color-orange-800`  | `#d35502` |
| orange-900  | `--pf-color-orange-900`  | `#983b02` |
| orange-1000 | `--pf-color-orange-1000` | `#501b00` |

</details>

Background: `--pf-color-background: #ffffff`. Subtle: `--pf-color-background-subtle` → `--pf-color-soft-pearl-100`.

## Avatar tones [#avatar-tones]

Only for avatar initials; these are matched background/foreground pairs, not general-purpose status colors.

<ColorPalette avatars />

| Tone    | Background | Foreground |
| ------- | ---------- | ---------- |
| clay    | #fee0d8    | #804536    |
| apricot | #fae3d1    | #7a4b21    |
| ochre   | #f3e7ce    | #6e5414    |
| olive   | #e7ebd1    | #575d1f    |
| sage    | #d8efdc    | #31653e    |
| dusk    | #d5ebfe    | #2a5c84    |
| plum    | #f3e1f7    | #6d4875    |
| rose    | #fedfe2    | #80424d    |

CSS variables: `--pf-color-avatar-{tone}-bg` and `--pf-color-avatar-{tone}-fg`.

## Design guidance [#design-guidance]

Read [Design principles](/docs/foundations/design-rules) for shared usage guidance and motion recipes.

Source: [The System](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System). Snapshot: 2026-10-12.