Avatar

Опознавательный знак сущности — человека, организации, страны, счёта. Статичен по устройству: в макете у него нет ни наведения, ни нажатия, ни фокуса.

Размеры

коллекция переменных «❖ Avatar» — на канве оси размера нет вовсе
Круг
WW xs · 24
WW sm · 32
WW md · 40
WW lg · 48
WW xl · 56
кегль растёт не вровень с плиткой: 12 · 12 · 14 · 16 · 18

Форма

ось Square — Off даёт круг, On скруглённый квадрат
Square = On
WW радиус 4
WW радиус 6
WW радиус 8
WW радиус 10
WW радиус 12
лестница радиусов 4 / 6 / 8 / 10 / 12 — своя, ступени 10 в шкале --ds-radius-* нет

Семантика

восемь декоративных семейств — различают сущности, а не статусы
Инициалы
WW WW WW WW WW WW WW WW
Иконка
порядок: neutral · gold · dodger · sage · violet · coral · pink · olive
Квадрат
WW WW WW WW WW WW WW WW

Содержимое

ось Type — у фото, флага и логотипа заливки нет: картинка закрывает плитку целиком
WW Initials
Icon
Photo
Flag
Logotype
Photo, квадрат
Картинки — заглушки, те же, что в истории Types Storybook; в продукте src — настоящее фото, флаг или логотип

Заливка и контраст

оси Fiil и High contrast — обе есть только у Neutral
WW Fiil = On
WW Fiil = Off
WW High contrast = On
Fiil = Off, иконка
High contrast перекрывает семантику — так собран набор, а не так решено здесь

Точка и кольцо

булевы пропы Badge и Border
Круг
WW WW WW WW WW
Квадрат
WW WW WW WW WW
точка одинакова на всех размерах: ядро 8, кольцо 1. У круга садится заподлицо в угол, у квадрата вынесена наружу на 2 — кадр «Badge places» 2558:24930

Стек

набор Group — ось Quantity 1–4 плюс счётчик остатка
Количество
AABB AABBCC AABBCCDD
Со счётчиком остатка
AABBCCDD+5
наезд задаёт отрицательный Gap: −8 · −10 · −12 · −14 · −16 по размеру
Размеры
AABBCC+3 AABBCC+3 AABBCC+3 AABBCC+3 AABBCC+3

Пара

набор Pair — два аватара по диагонали внутри обычной плитки
AB xs · вложенный 16
AB sm · 20
AB md · 24
AB lg · 32
AB xl · 40
задний в правом верхнем углу, передний в левом нижнем и лежит поверх

Размерности

коллекция «❖ Avatar» — источник, не канва
Переменная FigmaXSSMMDLGXL
Width-Height2432404856
Square Radius4681012
Text Style/Size1212141618
Text Style/Line Height1414202024
Icon/Width-Height1620242432
Icon/Stroke1.52222
Stroke — кольцо11222
Точка — ядро (из кадра «Badge places»)88888
Точка — вынос за угол у квадрата22222
Gap — стек−8−10−12−14−16
Item/Width-Height — пара1620243240
Item/Padding — пара01200

Точка — единственная величина, которая от размера не зависит: ядро 8, кольцо 1, вынос 2 одинаковы на всех пяти. Источник — кадр «Badge places» (2558:24930), собранный владельцем 2026-08-31: десять инстансов, пять размеров × два типа содержимого. В таблице переменных при этом объявлены пятиступенчатые ряды Dot/Width-Height (8/10/10/12/12) и Dot/Padding (0/2/2/4/4), но привязок у них ровно ноль (у остальных десяти — от 16 до 1012), и элементу они не соответствуют. Здесь стояла таблица по этим рядам: они сходились с замером на MD, и я принял совпадение на одном размере за ось. Совпадение на одном размере осью не является.

Так и не так

границы применения

Так

  • Знак принадлежности: чей это счёт, кто автор, чья организация
  • Цвет семейства закреплён за сущностью и не меняется от её состояния
  • Стек — когда участников много, а важно их число, а не имена
  • Пара — отношение двух равноправных сущностей: перевод, валютная пара
  • Всегда с доступным именем: инициалы скринридер прочтёт как две буквы

Не так

  • Восемь семейств для индикации состояния данных — это intent-токены, не эти
  • Кликабельный аватар без обёртки: состояний у него нет, нажатие нечем показать
  • Счётчик или статус у элемента интерфейса — это Badge, у аватара точка без числа
  • Картинка в карточке, не обозначающая владельца — обычный img
  • Стек длиннее четырёх без счётчика — ось Quantity в макете кончается на 4

State Explorer

Интерактивный тест состояний