Основы
Визуальный язык как данные: 211 токенов, прочитанных из установленного пакета и сгруппированных так же, как в нём. Каждая страница отвечает на два вопроса — зачем эта шкала и что в ней сегодня.
Система2
Как названы токены и как они доходят до компонента.
- ОбзорЧетыре слоя, и каждый из них — данные, а не решение, принятое внутри компонента. Примитивы задают шкалы, роли придают им смысл, производные следуют за ролями по формуле, а покомпонентные токены настраивают один компонент, не трогая остальные.
- ТокеныПолный справочник: все токены, которые публикует пакет, сгруппированные так же, как в источнике. Своя группировка дала бы страницу красивее и бесполезнее — токен не нашёлся бы по имени, увиденному в коде.
Цвет, шрифт, иконки3
Цветовые роли с контрастом, шкала шрифта, набор иконок.
- ЦветЦвет — то место, где дизайн-систему чаще всего принимают за палитру. Здесь нет цветов, здесь роли: поверхность, текст на ней, заливка, текст на заливке. Одна и та же роль несёт в каждом режиме своё значение, и оба стоят в таблице.
- ТипографикаДва семейства, одна шкала кеглей и отдельная шкала для контролов. Вторая существует потому, что у кнопки и абзаца нет общего ритма: текст читают, в контрол целятся, и размеры отвечают на разные вопросы.
- ИконкиШкала размеров, а не набор иконок. Свои иконки — стрелку селекта, крестик очистки, галочку, спиннер — пакет компилирует в сборку; ваши приходят либо Vue-компонентом, либо классом, который порождает ваша сборка.
Геометрия4
Отступы, скругления, тени и шкала слоёв.
- ОтступыОдна шкала на все зазоры, отступы и смещения системы. Шаг намеренно нелинейный: у нуля глаз различает два пикселя, у сорока — уже нет, и линейная шкала потратила бы половину значений там, где их никто не отличит.
- СкругленияДевять радиусов, и один из них — радиус контрола: значение, которым кнопка, поле и селект держатся одной семьёй. Меняется оно — меняется весь набор контролов сразу.
- ТениЧетыре уровня, и они семантические, а не декоративные: тень говорит, что над чем. Выпадающая панель выше карточки, модальное окно выше страницы — уровень следует за слоем, а не за настроением.
- СлоиШкала слоёв с шагом пятьдесят. Шаг и есть смысл: между соседними слоями остаётся место чужому виджету, баннеру согласия или чату, которому нужно встать между ними, — и ничего не приходится перенумеровывать.
Поведение3
Состояния, движение и то, как раскладка отвечает на ширину.
- СостоянияHover, active, disabled, invalid. Ни одно из этих значений не записано: каждое — формула от роли, поэтому перекрашенная роль тянет свои состояния за собой. Таблица ниже показывает формулу и то, во что она превращается в обоих режимах.
- ДвижениеДлительности и кривые, и одно правило, которое закрывает остальное: система уважает «уменьшить движение» целиком, одним блоком в базовом слое, а не покомпонентно.
- АдаптивностьТочки останова и ширины контейнеров. Система не раскладывает ваши страницы — она даёт одни и те же числа всем компонентам, которым нужно знать, что стало узко, чтобы таблица и боковая панель понимали «узко» одинаково.
Темы4
Полные наборы значений тех же токенов: выбираются на сборке, режимы переключаются в рантайме.
- ЧертёжПлоская точность: заливка, линия и шрифт. Без теней и бликов; главный сигнал — линия хода по нижней кромке.
- ГлинаТёплая бумага, графитовые чернила и одна глиняная точка на экран.
- СланецХолодные нейтрали шкалы slate, индиго-акцент и контраст, выверенный по AA в обоих режимах.
- ТактильнаяКнопка как предмет: свет сверху, тень цвета тона снизу, подъём под указателем и пружина в отклике.
Здесь ничего не нашлось. Попробуйте поиск по всему сайту — ⌘K.
Значения приходят из темы slate пакета @feugene/granularity-tokens — на нём стоит ядро 3.7.2. Ни одно из них не набрано руками.