> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synti.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> How to assign colors to labels, statuses, and other entities in Synti using system tokens or custom values.

Color is how Synti tells your workspace items apart at a glance. Labels, statuses, and other configurable entities each carry a `color` field, and Synti resolves that field the same way everywhere — so a green "Done" status and a green "Shipped" label pull from the same underlying value and stay in sync when you switch themes.

You can pick from a small set of semantic system colors, dim any of them with an opacity modifier, or supply a fully custom color with separate light- and dark-mode values.

## System colors

Synti ships with five semantic color tokens. Because they map to your active theme's [semantic tokens](/customisation/themes), they automatically adapt when you switch between light and dark mode or change themes.

| Token         | Typical use                             |
| ------------- | --------------------------------------- |
| `accent`      | Brand and primary emphasis              |
| `info`        | Attention, review, informational states |
| `success`     | Completion, connected, healthy states   |
| `destructive` | Errors, deletions, blocking issues      |
| `foreground`  | Neutral text-colored states             |

Set one by name in an entity's config:

```json theme={null}
{
  "id": "bug",
  "name": "Bug",
  "color": "destructive"
}
```

<Note>
  System color names are case-sensitive. Use `accent`, not `Accent`.
</Note>

### Opacity modifiers

Append `/{opacity}` to any system token to dim it, where opacity is `0`–`100`. This is the idiomatic way to render muted or secondary states without introducing a new color.

```json theme={null}
{
  "id": "backlog",
  "name": "Backlog",
  "color": "foreground/50"
}
```

## Custom colors

When the system palette isn't enough, provide an object with a `light` value and an optional `dark` value. Each accepts any CSS color format — hex (with or without alpha), `rgb()`, `hsl()`, or `oklch()`.

```json theme={null}
{
  "id": "feature",
  "name": "Feature",
  "color": { "light": "#6366F1", "dark": "#818CF8" }
}
```

If you omit `dark`, Synti derives a dark-mode value by brightening the light hex toward white. That heuristic works well for hex, but for `rgb()`, `hsl()`, or `oklch()` inputs you should specify `dark` explicitly to keep contrast predictable.

<Tip>
  Prefer `oklch()` for custom colors. Because it separates lightness from hue and chroma, an OKLCH value tends to stay legible across both light and dark backgrounds. The format is `oklch(lightness chroma hue)` with lightness `0`–`1`, chroma `0`–`0.4`, and hue `0`–`360`.
</Tip>

## Defaults

Anything you don't color falls back to a sensible default:

* **Labels** without a `color` render as a muted foreground circle.
* **Statuses** use built-in defaults — `backlog`, `todo`, and `cancelled` are muted (`foreground/50`), `in-progress` is `success`, `needs-review` is `info`, and `done` is `accent`.

You can override any of these at any time by setting the entity's `color` field.

## Where colors show up

* [Labels](/labels/overview) display as colored dots beside sessions.
* [Statuses](/statuses/overview) pair their color with an [icon](/customisation/icons).
* Both draw from the semantic tokens defined by your [theme](/customisation/themes), so recoloring the theme recolors every entity that uses a system token.

<CardGroup cols={2}>
  <Card title="Themes" icon="palette" href="/customisation/themes">
    Define the semantic tokens that system colors resolve to.
  </Card>

  <Card title="Icons" icon="image" href="/customisation/icons">
    Pair colors with emoji or SVG icons on sources, skills, and statuses.
  </Card>
</CardGroup>