Overview

Thykes — дизайн-система для веб-интерфейсов продуктов: дизайн-токены и готовые компоненты, которые подключаются двумя строками и пишутся обычным HTML.

В Thykes есть всё, из чего собирается экран приложения: кнопки, поля, меню, диалоги, таблицы, навигация, а также общие для них цвета, шрифты и отступы. Каждый компонент — custom element с префиксом tk-*, поэтому он работает и в чистом HTML, и в любом фреймворке.

Create project

Cancel

<tk-button variant="primary">Create project</tk-button>
<tk-button>Cancel</tk-button>

Система для тех, кто делает продуктовые интерфейсы в вебе: экраны приложений, настройки, формы, дашборды. Нативные мобильные приложения и маркетинговые сайты в неё не входят.

Что внутри

Токены: цвета, типографика, отступы, скругления, тени и анимация в виде CSS custom properties, например --surface-page или --space-16.
Компоненты: у каждого своя страница с примерами, API и заметками о доступности.
Три темы: светлая, тёмная и высококонтрастная, плюс выбор основного цвета. Берите высококонтрастную тему, если продукт должен соответствовать минимумам контраста WCAG 2.2 AA. В светлой и тёмной темах несколько пар до них не дотягивают, и страницы компонентов называют эти пары.
Доступность встроена: поддержка клавиатуры, кольца фокуса и имена для скринридеров уже есть в каждом компоненте. На каждой странице сказано, что остаётся сделать вам.

Как устроена документация

Начало работы: подключить библиотеку и собрать первую страницу.
Основы: цвет, типографика, отступы, скругления, тени, фокус, анимация, иконки и пропорции. Токены и правила их использования.
Компоненты: по странице на компонент, с вкладками про использование, API и доступность. Паттерны, например заголовок страницы, показывают, как сочетать компоненты.
Тексты: как писать слова в интерфейсе: голос и тон, подписи действий, сообщения, ошибки, пустые состояния и словарь.
Соглашения API: имена и приёмы, общие для всех компонентов, чтобы API можно было угадать раньше, чем откроешь его описание.