A · Текущий
#EE9B3A / #5A0507
Яркий оранжевый. В светлой теме — нынешний бордовый.
Библиотека компонентов Ruleholder
Брендбук и компоненты
Переключайте тему в шапке сайта. Сравнивайте элементы на узком экране. Нажмите Tab, чтобы проверить фокус. Наведение и нажатие проверяются на самих образцах. Это публичный справочник визуального языка Ruleholder с живыми интерактивными образцами.
Визуальный язык
Основной акцент
--rh-runeПоверхность
--rh-surfaceФон поля
--rh-controlОсновной текст
--rh-text-strongПодтверждение
--rh-button-success-foregroundОпасное действие
--rh-button-danger-foregroundИнтерфейс · Mulish
Правила для ваших приключений
Текст интерфейса остаётся читаемым в обеих темах. Размеры и отступы следуют общему ритму.
Заголовки правил · Roboto Condensed
Заклинания, существа и сокровища
Книжные страницы могут сохранять собственную типографику и художественное оформление.
Обычный контрол — 32 px, скругление — 6 px. Компактные размеры — 24 и 28 px, крупный — 36 px. Основной шаг отступов — 4 px.
Адаптивность и слои окон
Меняйте ширину окна и переключайте тему. В узком блоке заголовок становится компактнее, а оригинальное имя и источник переходят на строку ниже.
Камень власти над элементалями земли
Ничего не найдено. Попробуйте изменить поиск или фильтры.
Та же пагинация с настоящими ссылками для серверной выдачи.
Сравнение акцентного цвета
Одни и те же компоненты и состояния в трёх палитрах. Поиск, фильтр и избранное синхронизированы для сравнения. Переключайте тему в шапке и наведите курсор на кнопки. Выбран вариант A. Варианты B и C сохранены как история сравнения.
B · Золотистый RPGLab
#C4954A
Более спокойный, тёплый акцент с золотистым оттенком.
C · Цвет скроллбара
#9F9275
Приглушённый бежево-золотистый из нашей тёмной темы.
Для вариантов B и C заливка одинакова в обеих темах, а текстовые акценты в светлой теме затемнены для читаемости. Нейтральные рамки, золотистый фокус полей, цвета успеха и ошибок сохранены. Цвет B взят с RPGLab.
Составные элементы
Сегментированный переключатель — общая подложка и выбранный сегмент.
Здесь находится содержание блока. Состояние раскрытия хранит вызывающий компонент.
Плотные индикаторы карусели · слайд 1
Кнопки поверх изображения
ОбНеРеКрЛеАрПредметные метки редкости используют общую геометрию Badge.
Триггер сложного выбора · disabled
Образец подгрузки: 6 из 24
Поля и выбор значений
По умолчанию рамка приглушённая и нейтральная. При наведении, фокусе и открытом списке она становится бежево-золотистой, без свечения. Ошибка сохраняет красную рамку, недоступное поле не реагирует на наведение.
Введите адрес электронной почты.
Выберите выпуск из списка.
То же поле выбора с другим набором значений.
Раскрывающийся поиск
Кнопка поиска использует нейтральную заливку панели инструментов.
Поповер и диалог
Подсказки
Наведите указатель или перейдите к элементу клавишей Tab. Escape закрывает подсказку. Метки источников и значок статуса перевода также открываются нажатием.
Карточки и бейджи
Обычная поверхность с приглушённой рамкой
Виджет с внутренними действиями: тонкая рамка сохраняет границы блока.
Кликабельная карточка. Наведение усиливает рамку, Tab показывает фокус.Карточка карты: нейтральная рамка, общий фокусРамки изображений не используют цвет полей или золотое «выделение». Наведение и клавиатурный фокус показывают возможность перехода; состояния выбора у ссылки нет.
Нейтральная меткаPHBКомпактнаяКнига
Метки из карточек каталогов используют тот же Badge.
Действие60 футовКонцентрация
PHBПоиск и фильтры каталога
Панель каталога: постоянный поиск, выбор сортировки, группировки и вида. На телефоне поиск занимает отдельную строку, фильтры открываются в панели. Образец показывает состояние контролов; живой каталог — по ссылке «Заклинания».
Запрос: не заданСортировка: nameГруппа: levelВид: balancedУсловий: 0
Заголовок карточки
ХарактеристикаНавык
Original title on a separate row
Иконки выровнены по строке названия. Три состояния фильтра различаются значком, цветом и доступным описанием.
Метки страниц подробностей
Свойства предмета
Фехтовальное
Черты и сверхъестественные дары
Ссылки тем и метаданные класса
Ссылки сохраняют переход и видимый клавиатурный фокус.
Компактный предпросмотр
Таблица каталога
Архив дракона | Приключение | 1 |
Астральный потоп | Заклинание | 3 |
Архив дракона
ПриключениеУровень: 1
Астральный потоп
ЗаклинаниеУровень: 3
Пагинация с большим количеством страниц
Таблицы правил
| Круг | Заклинание | Дистанция |
|---|---|---|
| 1 | Лечащее слово | 60 футов |
| 3 | Астральный потоп | 120 футов |
| Круг | Заклинание | Дистанция |
|---|---|---|
| 1 | Лечащее слово | 60 футов |
| 3 | Астральный потоп | 120 футов |