GAJSIN
Design system

Цвета, типографика, компоненты и размеры интерфейса.

Скачать HTML tokens.json tokens.css

Палитра

Основа

Светлая тема

Тёмная тема

Состояния · светлая тема

Состояния · тёмная тема

Шкала данных · светлая тема

Шкала данных · тёмная тема

Типографика

St Marie ThinНазвание проекта в кейсе80 / 88 px · 100До 720 px — 48 / 54 px--g-type-display · -0.025em

Aa 012345

St Marie ThinНазвание в карточке и переходе к соседнему кейсу40 / 46 px · 100--g-type-title · -0.025em

Project name

Martian MonoЗаголовки страниц и разделов32 / 42 px · 500До 720 px — 26 / 36 px--g-type-heading · -0.03em

Создаю цифровые продукты.

Martian MonoОсновной текст и подзаголовки16 / 26 px · 400--g-type-body · 0

Автоматизация и интеграции. От задачи и архитектуры до работающего продукта.

Martian MonoПодписи, меню, вторичные кнопки и поля; минимальный размер13 / 20 px · 400--g-type-caption · 0

Описание проекта и технологии

Martian MonoОсновная кнопка и выбранные пункты13 / 20 px · 500--g-type-control · 0

Обсудить задачу

Martian MonoДлинный текст кейса на телефоне16 / 26 px · ширина 87,5%--g-font-width-text

Разбираюсь в задаче, проектирую архитектуру и довожу продукт до запуска.

St Marie Thin · латиница

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz · 0123456789

Martian Mono · кириллица и латиница

Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм
Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ Ъъ Ыы Ьь Ээ Юю Яя

Кнопки и ссылки

Основная

Заливка · главное действие

Вторичная

Контур · дополнительное действие

Внешняя ссылка

GitHub

Текст 13 px · стрелка 16 px · новая вкладка

Ссылка

Типографика →Меню

В тексте подчёркнута · в меню и футере — при наведении

Иконка

48 × 48 px

Категория · раскрывает список

Тема

Без рамки · 20 px · тема, закрыть

Вкладки

Инструкции для работы над проектом.

Общая линия · текущая подчёркнута 2 px

Высота: 48 px
Рамка: 1 px
Фокус: 2 px
Радиус: 4 px
Внутри: 0 / 16 px
Между: 8 px
Шрифт: 13 / 20 px

Кнопка	Обычно	Наведение	Фокус	Нажатие	Недоступно	Загрузка
Основная
Вторичная
Фильтр

Основная запускает главное действие. Вторичная сопровождает его. Фильтр меняет выбор в списке. Наведение меняет фон сразу.

Карточки и поверхности

Информационная

Заголовок карточки

Короткое описание содержимого без отдельного действия.

Интерактивная

Открыть раздел

Вся карточка — одна ссылка. Наведение меняет поверхность и контур.

Карточка проекта · сетка

Обложка · 1:1

Alpha

Короткое описание проекта.

Категория

Обложка · 1:1

Beta

Короткое описание проекта.

Категория

Обложка · 1:1

Gamma

Короткое описание проекта.

Категория

Обложка 1:1 сверху, название 40 px. 3 колонки на компьютере, 2 на планшете, 1 на телефоне.

Карточка проекта · список

AlphaКороткое описание проекта.Категория · Стек BetaКороткое описание проекта.Категория · Стек

Миниатюра 96 px слева, на телефоне 72 px; название, описание, все категории и стек.

Внутри: 24 px
Между блоками: 24 px
Радиус: 4 px
Линия: 1 px
Медиа: 1:1

Перестройка карточек

Обложка · 1:1

Alpha

Короткое описание проекта.

Категория

Обложка · 1:1

Beta

Короткое описание проекта.

Категория

Обложка · 1:1

Gamma

Короткое описание проекта.

Категория

Метки стека

Python
FastAPI
PostgreSQL

Поверхность, радиус 4 px, 8 × 12 px внутри.

Раскрывающийся список

grillingТребования ещё не согласованы

Содержимое раскрывается вместе с изменением высоты.

spec-reviewНужно проверить изменения

Знак плюса превращается в минус за то же время.

Поведение компонентов

Компонент	Геометрия	Состояния и управление
Шапка	80 / 128 / 176 px; контейнер 1200 px	Общая шапка остаётся у верхнего края на всех экранах; якоря учитывают её высоту и безопасную область. Текущий пункт обозначен начертанием и aria-current. Ссылки доступны во время перехода; последний выбор не теряется.
Иконки	16 и 20 px; штрих 1.5 px; зона 48 px	Декоративные SVG скрыты от скринридера; у кнопки без текста есть доступное имя. Внешняя ссылка отмечена стрелкой. Иконки браузера генерируются из одного логотипа и следуют теме документа.
Раскрытие	Строка не ниже 48 px; зазор у знака 16 px; текст до 560 px с внутренней прокруткой	Enter / Space открывает и закрывает. Плюс рядом с подписью становится минусом. Вложенная панель не запускает второй переход у родителя.
Список выбора	Поле 48 px; зазор 8 px; меню до 260 px	Открывается вверх, если снизу мало места. Стрелки, Home / End и набор по названию выбирают вариант; Enter применяет; Escape закрывает. Прокручивается меню, а не страница.
Вкладки	Высота 48 px; нижняя линия 2 px; расстояние 24 px	Выбранный пункт отмечен aria-pressed; новое содержимое появляется за M. Адрес сохраняет выбор; действия не ждут завершения перехода.
Окно презентации	До 1200 px; от края 16 px; радиус 4 px; затемнение 60%	Нативное модальное окно: фокус внутри; Escape, закрытие и клик по затемнению возвращают фокус к кнопке открытия. Iframe сохраняется до конца ухода и затем выгружается. Ширина ограничена geometry.contentMax.
Обратная связь	Подпись 13 / 20 px; значок 20 px	Подтверждение копирования — текст role=status и галочка; ошибка остаётся сообщением с понятным действием. Загрузка отмечена aria-busy; недоступность — disabled, а не только цветом.
Исходный код	Поле 400 px; отступ 24 px; UI-шрифт	Код загружается по открытию; файлы переключаются за M. Есть копирование, ZIP, ошибка и повтор загрузки; содержимое без принудительной горизонтальной прокрутки страницы.
Изображения	Обложка 1:1; миниатюра 96 / 72 px	Фиксированное соотношение резервирует место. Обложка заполняет блок; скриншот интерфейса открывается в полном размере. Следующие изображения загружаются по мере приближения к экрану.

Доступность

Навигация клавишей Tab, видимый фокус и смысловые HTML-элементы.
Открытие Enter или Space; Escape закрывает список и окно; стрелки выбирают вариант в списке.
Движение не задерживает действие. Повторный клик прерывает переход с текущего кадра.
Reduced motion действует сразу при изменении настройки; содержимое и действия остаются доступны.
Минимальная цель касания geometry.touchTarget; основные контролы geometry.controlHeight.

Фон страницы--g-backgroundОснова без отдельной панели

Поверхность--g-surfaceФильтры и поля

Карточка--g-background · линия 1 pxСодержимое отделено контуром

Поля и состояния

ОбычноКороткая подсказка под полем

Наведение

Фокус

Недоступно

ОшибкаВведите адрес в формате name@example.com.

Категория

Высота: 48 px
Рамка: 1 px
Фокус: 2 px
Радиус: 4 px
Шеврон: 16 px
От края до шеврона: 16 px

Отступы

4 px · Подсказка

Между полем и пояснением

--g-space-unit

8 px · Связь

Иконка и текст; метка и поле

--g-space-tight

12 px · Компактный ряд

Вертикальный отступ строк и небольших элементов

--g-space-compact

16 px · Кнопка

От контура до текста слева и справа

--g-space-control-x

24 px · Содержимое

Между блоками карточки и между колонками

--g-space-content

24 px · Карточка

От края до содержимого карточки

--g-space-card

32 px · Группа

Заголовок и содержимое; группы полей

--g-space-group

32 px · Страница

Минимальное поле с каждой стороны

--g-page-desktop

48 px · Крупная группа

От шапки до содержимого; блоки каталога

--g-space-block

64 px · Сцена

Крупный промежуток внутри отдельной сцены

--g-space-wide

80 px · Разделы

Между самостоятельными блоками; до 720 px — 48 px

--g-space-section

96 px · Контакты

Вертикальное поле экрана контактов

--g-space-contact

Подсказка под полем

Значение

4 pxКороткое пояснение

4 px от поля до подсказки. От метки до поля — 8 px.

Иконка и текст

Промежуток 8 px, иконка 16 px.

Внутри кнопки

Действие

padding-inline: 16px

Padding слева и справа. Высота кнопки — 48 px.

Анатомия карточки

24 px24 px24 px24 px

Заголовок

Описание содержимого

24 px с четырёх сторон и 24 px между заголовком, текстом и действием.

Между разделами

Первый раздел

80 px

Следующий раздел

Вертикальный промежуток 80 px, на телефоне 48 px.

Страница и контейнер

32 px

Контент

32 px

Минимальное поле страницы — 32 px. На телефоне — 24 px.

После достижения 1200 px контейнер остаётся по центру, а боковые поля растут.

4 px — шаг сетки и малый зазор. Радиус 4 px — отдельное свойство формы; он показан в следующем разделе.

Радиусы

0 px · изображение

4 px · компонент

50% · индикатор

Глубина

00 · Фон

01 · Поверхность

02 · Контур

03 · Затемнение · --g-ink 60 %

Шапка: z-index 30
Заставка: 9999
Ссылка пропуска: 10000
Модальное окно: Нативный top layer

Плоские поверхности. Без теней и размытия. Затемнение лежит только под окном презентации.

Адаптивность

Экран	Ширина	Сетка	Название	Заголовок	Разделы	Край
Телефон	До 720 px	Одна колонка	48 / 54 px	26 / 36 px	48 px	24 px
Планшет	721–1023 px	Две колонки	80 / 88 px	32 / 42 px	80 px	32 px
Компьютер	От 1024 px	Три колонки	80 / 88 px	32 / 42 px	80 px	32 px

375

768

1024

1440

Шапка: 80 px, закреплена
До 720 px: 128 px, закреплена
До 374 px: Меню в две строки, 176 px
До 900 px: Кнопки портрета — иконки; «Обо мне» — текст над изображением
Полоса прокрутки: 8 px · бегунок цвета линии

Высота кнопок 48 px на всех экранах. Широкие таблицы прокручиваются внутри блока.

Движение

S · 160 мс: Стрелки, галочка копирования, список фильтра, фон и контур карточки при наведении, уход страницы
M · 280 мс: Смена содержимого на месте, надпись кнопки, окно презентации, проявление сцены
L · 480 мс: Раскрытия и знак «+», перестройка сетки, вход страницы, появление при прокрутке, смена темы
Кривая: cubic-bezier(0.25,1,0.5,1)
Сдвиги: 4 и 16 px

Движение	Время	Где
Нажатие	0 мс	Кнопка смещается на 1 px вниз; фон кнопки меняется сразу
Стрелка ссылки и карточки	S · 160 мс	Карточка: 2 px вправо; внешняя ссылка: 2 / -2 px
Фон и контур карточки	S · 160 мс	Поверхность и контур при наведении
Подтверждение	S · 160 мс	Значок копирования сменяется галочкой
Список фильтра	S · 160 мс	Выпадает от поля и уходит обратно со сдвигом 4 px
Уход страницы	S · 160 мс	Текущая страница гаснет; клик в это время меняет цель, а не ждёт
Смена содержимого	M · 280 мс	Вкладки, сцены и список технологий проявляются и поднимаются на 16 px
Надпись кнопки	M · 280 мс	Новая надпись проявляется со сдвигом 4 px, как только кнопка нажата
Окно	M · 280 мс	Презентация и затемнение проявляются и гаснут, окно — от масштаба 0,98
Сцена	M · 280 мс	Анимация на странице проявляется, когда нарисована
Раскрытия и знак «+»	L · 480 мс	Одинаковое изменение полной высоты при открытии и закрытии. Повторный клик продолжает с текущей высоты; рамки и отступы входят в расчёт; загрузившийся текст раскрывается тем же механизмом.
Сетка, список, фильтр	L · 480 мс	Карточки переезжают на новые места, новые проявляются
Вход страницы	L · 480 мс	Новая страница проявляется и поднимается на 16 px; меню доступно сразу
Появление при прокрутке	L · 480 мс · шаг 60 мс	Карточки и блоки поднимаются на 16 px, в ряду — по колонкам
Смена темы	L · 480 мс	Один общий круговой переход на сайте и в автономном HTML; повторные клики сохраняют последний выбор
Иконка темы	Пружина Morphicons · snappy	На сайте: морфинг солнца и луны до равновесия. Автономный пример меняет SVG сразу; круговой переход темы одинаковый.
Прокрутка к якорю	Нативная плавность браузера	Время определяет браузер; при reduced motion — сразу
Загрузка	800 мс · linear	Spinner 12 px
Буквы заголовка	450 / 650 мс · шаг 40 мс	Контакты: -20 px, -12°, кривая outExpo
Сборка 404	1100 мс · строки 40 мс · цифры 60 мс	cubic-bezier(0.22,1,0.36,1)
Сообщение копирования	1600 мс	Время видимого подтверждения, не задержка действия
Заставка	800 + 200 мс, уход 120 мс	Знак при каждом открытии документа

При prefers-reduced-motion: reduce — нет заставки, кругового раскрытия темы, входа страницы, появления при прокрутке и смены содержимого; активные раскрытия, перестройки и буквы завершаются сразу при изменении настройки. Декоративные сцены выключены; содержание, действия и список технологий доступны.

Переходы и прерывание

Повторный ввод	Один механизм для сетки, списка и фильтров. Повторный переход начинается с текущих визуальных координат; карточки не масштабируются. Новые элементы проявляются, видимые сохраняют непрерывность. При смене размера и reduced motion переход завершается.
Быстрая навигация	Последняя нажатая ссылка остаётся целью, даже если предыдущая страница ещё загружается. Назад и вперёд сохраняют обычную навигацию.
Размер экрана	При изменении ширины текущая перестройка завершается, координаты измеряются заново; элементы не остаются между раскладками.
Отключение движения	Нет заставки, кругового раскрытия темы, входа страницы, появления при прокрутке и смены содержимого; активные раскрытия, перестройки и буквы завершаются сразу при изменении настройки. Декоративные сцены выключены; содержание, действия и список технологий доступны.
Непрерывные сцены	Непрерывные Canvas/WebGL-сцены имеют собственные физические параметры в скачиваемых исходниках. Общая шкала S/M/L управляет интерфейсом, а не скоростью физической симуляции. Сцены останавливаются вне экрана и в скрытой вкладке; reduced motion сохраняет содержимое без запуска сцен.

CSS-переменные

Переменная	Значение
`--g-paper`	`#E4E5DF`
`--g-ink`	`#171717`
`--g-font-display`	`StMarie, serif`
`--g-font-ui`	`Martian, monospace`
`--g-font-width`	`100%`
`--g-font-width-text`	`87.5%`
`--g-space-unit`	`4px`
`--g-space-tight`	`8px`
`--g-space-control-x`	`16px`
`--g-space-card`	`24px`
`--g-space-content`	`24px`
`--g-space-section`	`80px / 48px`
`--g-space-compact`	`12px`
`--g-space-group`	`32px`
`--g-space-block`	`48px`
`--g-space-wide`	`64px`
`--g-space-contact`	`96px`
`--g-page-desktop`	`32px`
`--g-page-mobile`	`24px`
`--g-radius`	`4px`
`--g-border`	`1px`
`--g-focus`	`2px`
`--g-touch-target`	`44px`
`--g-control-height`	`48px`
`--g-icon`	`16px`
`--g-icon-large`	`20px`
`--g-brand`	`28px`
`--g-focus-offset`	`3px`
`--g-scrollbar`	`8px`
`--g-icon-stroke`	`1.5`
`--g-content-max`	`1200px`
`--g-disabled-opacity`	`0.38`
`--g-spinner-size`	`12px`
`--g-spinner-stroke`	`1.5px`
`--g-motion-s`	`160ms`
`--g-motion-m`	`280ms`
`--g-motion-l`	`480ms`
`--g-motion-ease`	`cubic-bezier(0.25,1,0.5,1)`
`--g-motion-shift-s`	`4px`
`--g-motion-shift-l`	`16px`
`--g-motion-stagger`	`60ms`
`--g-motion-dialog-scale`	`0.98`
`--g-motion-spinner`	`800ms`
`--g-motion-spinner-ease`	`linear`
`--g-motion-press-y`	`1px`
`--g-motion-link-x`	`2px`
`--g-motion-link-y`	`-2px`
`--g-motion-icon-scale`	`0.6`
`--g-motion-feedback`	`1600ms`
`--g-motion-letters-rise`	`450ms`
`--g-motion-letters-return`	`650ms`
`--g-motion-letters-stagger`	`40ms`
`--g-motion-letters-y`	`-20px`
`--g-motion-letters-rotation`	`-12deg`
`--g-motion-letters-ease`	`outExpo`
`--g-motion-logo-draw`	`800ms`
`--g-motion-logo-fill`	`200ms`
`--g-motion-logo-exit`	`120ms`
`--g-motion-logo-ease`	`cubic-bezier(0.16,1,0.3,1)`
`--g-motion-not-found`	`1100ms`
`--g-motion-not-found-row-stagger`	`40ms`
`--g-motion-not-found-digit-stagger`	`60ms`
`--g-motion-not-found-ease`	`cubic-bezier(0.22,1,0.36,1)`
`--g-layer-header`	`30`
`--g-layer-intro`	`9999`
`--g-layer-skip-link`	`10000`
`--g-reference-header`	`72px`
`--g-reference-header-mobile`	`64px`
`--g-logo-size`	`128px`
`--g-header`	`80px`
`--g-header-mobile`	`128px`
`--g-header-compact`	`176px`
`--g-text-measure`	`70ch`
`--g-layout-columns`	`3 / 2 / 1`
`--g-card-media-ratio`	`1 / 1`
`--g-card-thumbnail`	`96px`
`--g-card-thumbnail-mobile`	`72px`
`--g-menu-max-height`	`260px`
`--g-skill-text-max-height`	`560px`
`--g-source-code-height`	`400px`
`--g-dialog-inset`	`16px`
`--g-dialog-backdrop-opacity`	`60%`
`--g-type-display`	`80px / 48px`
`--g-leading-display`	`88px / 54px`
`--g-weight-display`	`100`
`--g-tracking-display`	`-0.025em`
`--g-type-title`	`40px`
`--g-leading-title`	`46px`
`--g-weight-title`	`100`
`--g-tracking-title`	`-0.025em`
`--g-type-heading`	`32px / 26px`
`--g-leading-heading`	`42px / 36px`
`--g-weight-heading`	`500`
`--g-tracking-heading`	`-0.03em`
`--g-type-body`	`16px`
`--g-leading-body`	`26px`
`--g-weight-body`	`400`
`--g-tracking-body`	`0`
`--g-type-caption`	`13px`
`--g-leading-caption`	`20px`
`--g-weight-caption`	`400`
`--g-tracking-caption`	`0`
`--g-type-control`	`13px`
`--g-leading-control`	`20px`
`--g-weight-control`	`500`
`--g-tracking-control`	`0`
`--g-background`	`#E4E5DF / #171717`
`--g-text`	`#171717 / #E4E5DF`
`--g-line`	`#A7A7A7 / #545454`
`--g-muted`	`#555555 / #B9B9B9`
`--g-surface`	`#D3D3D3 / #272727`
`--ds-primary-hover`	`#3D3D3D / #B9B9B9`
`--ds-primary-pressed`	`#555555 / #A7A7A7`
`--ds-secondary-hover`	`#C4C4C4 / #3D3D3D`
`--ds-secondary-pressed`	`#B9B9B9 / #545454`
`--ds-filter-hover`	`#B9B9B9 / #484848`
`--ds-filter-pressed`	`#A7A7A7 / #545454`
`--g-ramp-0`	`#D3D3D3 / #272727`
`--g-ramp-1`	`#B9B9B9 / #484848`
`--g-ramp-2`	`#8C8C8C / #747474`
`--g-ramp-3`	`#5F5F5F / #A7A7A7`
`--g-ramp-4`	`#171717 / #E4E5DF`