Размер, пространство, текст и форма
Эта часть описывает все величины SIMAI Framework, кроме цвета: размеры, отступы, кегль и высоту строки, толщину границы, радиус угла, кольцо фокуса. Сюда же входят две вещи, которые меняют геометрию и слова интерфейса: направление письма и язык страницы.
Главное правило всей части: ни одна величина не придумывается на месте. Каждое число берётся из общей шкалы, а шкалы связаны между собой. Высота кнопки получается из высоты строки текста, отступ поля — из той же высоты, радиус блока — из ступени его отступа. Поэтому достаточно поменять одно звено, и вся цепочка изменится вместе с ним. Величина, выбранная «на глаз», заметна на экране, даже когда никто не может сказать, что именно не так.
Цвет описан в части «Токены, цвет и темы». Как записывать эти величины классами (p-4, md:gap-2,
text-3) — в части «Утилиты и раскладка». Как компоненты пользуются лестницей размеров — в Размер: одна лестница для всех компонентов.
- Шкалы и базовая единица
- Адаптивные размеры и справочник «Значения вертикальных размеров»
- Одна лестница размеров
- Пространство и справочник «Значения интервалов»
- Типографика и Текст по умолчанию
- Границы, скругления и высота
- Фокус
- Направление текста
- Язык интерфейса и памятка «Языки»
- Геометрия: стандарт и проверка
- Движение — длительности и кривые переходов