Project label

The pill that names the project a piece of communication belongs to (an e-mail thread, a chat, a call, a manual contact record) on a company, person or project card and in every list that shows communication. It is not a new pill variant and it has no CSS of its own: it is the canonical Pill (.acrm-pill sm) with a leading project icon. React ProjectPill (apps/web/src/components/projects/ProjectPill.tsx), styles apps/web/src/ds.css.

Owner-approved 8 Oct 2026 (prototype proto/komunikace-karta, variant A); AD review FA258.

When to use

  • A row of communication that is assigned to a realisation project (Komunikace tab of a company, a person, a project; the mail list).
  • Always in the tags slot of Item list, next to the row’s other labels.

When not to use

  • The project as a record in its own right (a project card, a reference to a project) — that is an entity reference.
  • A state or a category that is not a project — that is a plain Pill with a dot.
  • A row that belongs to no project: draw nothing, no placeholder pill.

Anatomy

  • span.acrm-pill.sm + leading <Icon> + the project name. Nothing else — there is no size option, the label is always .sm (ProjectPill has no size prop since acrm !4964).
  • The colour is carried by the icon, not by a dot. This is the one deliberate exception to "colour = dot" of Pill, and it is a general rule of Pill, not a special style: a pill with a direct leading icon has no dot and .acrm-pill > .ti { color: var(--pill-dot, var(--ic-grey)) } colours the icon with the tone.
  • Tone from the palette = the tone class on the pill (.blue, .green, …); an own colour (#rrggbb) goes into --pill-dot directly.
  • Icon and colour are the project’s own and are set on the project detail with the same picker as a segment (SegmentIconPicker, noun="projektu"), with a live preview of this pill. Default when unset: briefcase + grey.
  • A project that the AI only suggested (not confirmed by a person) has ? after the name and a title that says so; confirming it in the row action removes the mark.
  • Long names truncate with an ellipsis; the full name is in title.

Best practices

Do

  • Put it in the tags slot; never in cols or meta.
  • Show at most one project per row — a piece of communication has one project link.
  • Let the project’s icon and colour be edited in one place, the project detail, so the pill looks the same on every card.

Don't

  • Add a dot next to the icon, a fill, or a second icon.
  • Style it with a local class (.is-project and similar were rejected by the AD — the general Pill rule is enough).
  • Use an arbitrary colour for emphasis; the colour is the project’s identity.

Content

  • The project name as it is in the Projects module, no prefix such as "Projekt:".
  • Sentence case as typed; do not shorten it by hand (CSS truncation does that).
  • pill — the primitive and the leading-icon rule.
  • item-list — the tags slot where it lives.
  • avatar, entity-reference — other ways to point at a record.

Source: docs/status/project-label.usage.md · GitLab