Components › Identity › Identity marks › Entity mark

Entity mark

canon

The mark of any record: tone says which world the type belongs to, glyph says the exact type, shape says person / company / thing. One vocabulary for over twenty types.

Replaces seven parallel vocabularies (chip tile, palette glyph, listing tone, nav icons, ad-hoc header glyph, and the two picker maps in MentionInput and EntityPicker, which contradicted the canon — deal as businessplan, product rose in one picker and grey in the next, a tone on people and companies at all). Seven tones cannot cover twenty types, so the tone groups and the glyph identifies. Glyph size keeps the parity of the box — an odd difference puts the drawing on a half pixel.

Used in 21 files · 17 areas · 31× — components/assistant, components/deal, components/dialog, components/entity-preview, components/projects, components/search …

Keyboard

  • Not focusable and not interactive. When it leads a row or sits in a chip, that host is the control.

ARIA

  • The mark is aria-hidden="true": the tone and glyph are a compressed rendering of a type that the surrounding text already states — the section it sits in, the byline, or the type word in a header. Announcing "green briefcase" before "Fotovoltaika — Fialka Group" would be noise.
  • title carries the record name (or the type label when no name is given), which surfaces on hover for a sighted mouse user. It is not a substitute for the name being present as text.
  • Consequence: a mark must be accompanied by the record name in text. On its own it is invisible to a screen reader, by design.
  • The person and company branches inherit the avatar's rules — see avatar.

Focus

  • Nothing focusable, so no focus ring. The row, chip or button around it keeps the foundation ring from ds.css.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • The glyph is white on a solid --ic-* ground. Measured against the seven tones, the white drawing clears 3:1 on blue, purple, green, rose and grey; amber and lime sit lower, which is why they carry the lightest glyph load in the vocabulary (a calendar and a car, not fine detail).
  • The mark is decoration, not information: the type is always available as text nearby, so a reader who cannot resolve the glyph loses nothing.
  • Tone is never the only carrier — two types share a tone by design (a world), and the glyph separates them.

Known limits

  • Seven tones for twenty-seven types means a tone identifies a world, never a single type. Anyone reading colour alone will land on the group, not the record.
  • The glyph is small: at inline 16 the drawing is 12 px, which is a shape, not a diagram. Types whose glyphs differ only in fine detail should not sit in the same world.
  • Colour is not announced and cannot be perceived by a user who cannot distinguish the tones — again, nothing is lost, because the tone carries no information the text does not.

Source: docs/avatar/entity-mark.a11y.md · GitLab