Skip to main content
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, they automatically adapt when you switch between light and dark mode or change themes. Set one by name in an entity’s config:
System color names are case-sensitive. Use accent, not Accent.

​
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.

​
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().
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.
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.

​
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 display as colored dots beside sessions.
  • Statuses pair their color with an icon.
  • Both draw from the semantic tokens defined by your theme, so recoloring the theme recolors every entity that uses a system token.

Themes

Define the semantic tokens that system colors resolve to.

Icons

Pair colors with emoji or SVG icons on sources, skills, and statuses.