Entity mark
canonThe 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. titlecarries 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
inline16 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