KisGo · Бангкок MVP · th / en / ru

Встретил кота и подружился. Ловить его не нужно.

Базовый слой дизайн-системы: токены цвета, типографики, отступов, форм, анимации и тактильной отдачи, а также примитивы на их основе. Все значения хранятся в CSS-переменных --kg-* в файле tokens.css.

Стикер и коллекционная игрушкаКот без фона, белый «вырубной» обвод, мягкая тень, бумажная фактура.
Главное — имяИмя кота — самый крупный текст на карточке. Цвет имени — «чернила», красный запрещён.
Три письменности на равныхТайский выше латиницы, русский длиннее. У компонентов нет фиксированной высоты, ширина заложена ×2.
Редкость без номеровЦвет + силуэт + символ + материал. Уровни различаются по светлоте.
Улица и одна рукаЗоны нажатия от 48, главное действие внизу, на камере контраст от 7:1.
Уважение к контекстуНет монархии, Будды и флага. Режим уважения на время траура.

01 · Токены

Цвет

Тёплая бумажная база и тёмно-коричневые «чернила» вместо чистого чёрного. Ягодный цвет бренда не совпадает ни с одним цветом редкости, поэтому CTA не спутать с уровнем. Компоненты используют только семантические роли, сырые значения палитры — служебные.

Поверхности и чернила

Контраст считается на лету относительно --kg-bg текущей темы.

Фон--kg-bg

Поверхность--kg-surface

Углублённая--kg-surface-sunk

Приглушённая--kg-surface-muted

Граница (не текст)--kg-line-strong

Чернила · имена--kg-ink · --kg-name

Вторичный текст--kg-ink-2

Третичный · от 18px--kg-ink-3

Бренд и семантика

Ошибка бывает красной, но в её тексте никогда нет имени кота или пользователя. «Возможный повтор» — нейтральная отметка, без штрафного красного.

Бренд · CTA--kg-brand / --kg-brand-ink

Бренд мягкий--kg-brand-soft / --kg-brand-text

Успех--kg-success · сохранено, новый кот

Предупреждение--kg-warning · слабый сигнал, нагрев

Ошибка без имён--kg-error · «Не удалось загрузить фото»

Информация--kg-info · геолокация точная

Нейтральная отметка--kg-neutral-note · возможный повтор

Цвет дня

По тайской традиции у каждого дня недели свой цвет. Это акцент для недельного задания и главного экрана: точка, обводка или иллюстрация. Сплошной фон экрана им не заливается. Сегодняшний день отмечен.

Всอาทิตย์красный

Пнจันทร์жёлтый

Втอังคารрозовый

Срพุธзелёный

Чтพฤหัสบดีоранжевый

Птศุกร์голубой

Сбเสาร์фиолетовый

Жёлтый, голубой и розовый как цвета UI допустимы. Нельзя сочетать их с коронами, гарудой и мотивами королевского штандарта.

02 · Токены

Типографика

Пара по языку (вариант B из ресёрча): IBM Plex Sans Thai — для тайского, IBM Plex Sans — для латиницы и кириллицы. Обе гарнитуры из одной системы, все безпетлевые. Для заголовков и имён: Kanit (тайский) и Nunito (латиница и кириллица). Шрифты лежат в проекте, лицензия OFL.

Семейства

UI · латиница и кириллицаAa Бб Ёё 0123--kg-font-ui · 400/500/600/700

UI · тайский, безпетлевойกข ปั่น น้ำแข็ง--kg-font-ui-th · 400/500/600/700

Заголовки и имена · en / ruМурка Mochi--kg-font-display · 700/800

Заголовки и имена · тайскийส้มจี๊ด เหมียว--kg-font-display-th · 500/600

проверить Отрисовку Kanit и Plex Thai на дешёвых Android нужно проверить на реальных устройствах. «UI»-варианты со сжатой вертикалью (Noto Sans Thai UI) запрещены.

Шкала и межстрочные интервалы

Интервал задаётся письменностью: :lang(th) переключает --kg-lh-* на тайские значения. Переключатель «Образцы» в шапке меняет язык таблицы.

Токен	Кегль / начертание	Интервал latn · thai
display	40 · 800	1.2 · 1.45
title-1	30 · 800	1.2 · 1.45
title-2	24 · 700	1.2 · 1.45
title-3	20 · 600	1.3 · 1.5
body-lg	18 · 400	1.4 · 1.6
body	16 · 400	1.4 · 1.6
label	15 · 600	1.3 · 1.5
caption	13 · 400	1.4 · 1.6
micro	12 · 700	1.3 · 1.5

Кегль 12 разрешён только для подписей бейджей и вспомогательных меток. Основной текст на экране — от 16.

Почему без фиксированной высоты

В тайском до трёх ярусов знаков. Если задать плашке высоту в одну строку латиницы, тоновые знаки сверху и гласные снизу будут обрезаны.

line-height 1.6, паддинги

ปั่นจักรยานไปซื้อน้ำแข็ง
ฉุ้งฉิ่ง ญี่ปุ่น ฎีกา

line-height 1.0 + overflow hidden

ปั่นจักรยานไปซื้อน้ำแข็ง
ฉุ้งฉิ่ง ญี่ปุ่น ฎีกา

Латиница и кириллица: 1.4

Геолокация: примерная, радиус 500 м
Location: approximate, 500 m

Тайский пишется без пробелов, переносы расставляет ICU. В именах и брендовых словах переносы управляются вручную: U+200B разрешает перенос, U+2060 запрещает. Share-картинки рендерятся с ICU-сегментацией.

03 · Токены

Отступы и зоны нажатия

Шаг сетки — 4, основной ритм — 8. Минимальная зона нажатия — 48 (Android 48 dp, основной рынок), она же покрывает iOS 44 pt. Между соседними целями — от 8.

--kg-space-14

--kg-space-28

--kg-space-312

--kg-space-416

--kg-space-520

--kg-space-624

--kg-space-832

--kg-space-1040

--kg-space-1248

--kg-space-1664

Зоны нажатия

Видимая часть элемента может быть меньше 48, но зона нажатия — нет. Главные действия расположены в нижней трети экрана, под большой палец.

48 · --kg-touch-min

44 · iOS минимум

зазор 8 · --kg-touch-gap

76 · кнопка съёмки

04 · Токены

Радиусы, обводки, тени, стикер

Мягкие скругления и тёмно-коричневые контуры толщиной 2–3. Тени тёплые, на основе «чернил». Главный приём — белый «вырубной» обвод вокруг кота с вырезанным фоном, как в стикерах LINE и Live Stickers в iOS.

Радиусы

8 · smполя, мелкие плашки

12 · thumbминиатюра в сетке

16 · mdкарточка, нижняя граница

20 · cardкарточка кота

24 · lgsheet, reveal

pillкнопки, чипы

Обводки и тени

1 · hairразделители

2 · контурпо умолчанию

3 · strongакцент, выбор

shadow-1поверхности

shadow-2карточки

shadow-3sheet, всплывающие

grainбумажная фактура

«Вырубной» обвод стикера

Белый обвод 6–10 плюс мягкая тень, на бумажной фактуре. Фото кота — образец того, что даёт пайплайн удаления фона.

Серо-белый кот с вырезанным фоном, обвод 6 — **6 · --kg-diecut-sm**миниатюра в сетке

Тот же кот, обвод 8 — **8 · --kg-diecut-md**карточка кота

Рыже-белый кот с вырезанным фоном, обвод 10 — **10 · --kg-diecut-lg**reveal и share

Фото: Wikimedia Commons — «EUR cat transparent» (Heikki Siltala, catza.net) и «Turkish Van cat transparent (cropped)» (Matsu1024), CC BY-SA 4.0. Только для образца.

05 · Примитивы

Иконки

Одна семья иконок: контур 2 px, скруглённые концы и углы, сетка 24. Прицелов, сетей и клеток нет. Точность геолокации передаётся меткой с кругом, а не перекрестьем.

paw

camera

collection

map

geo-exact

geo-approx

possible-dup

report

share

weekly

new

temple (крыша)

open-palm

sound

check

alert

Храм изображается обобщённым силуэтом крыши, без изображения Будды. В указующих жестах — открытая ладонь, а не палец.

06 · Примитивы

Бейдж редкости

4 уровня × 3 размера. Каждый уровень кодируется четырьмя признаками: цветом, силуэтом, символом и материалом рамки. Цвета разведены по светлоте, номеров нет. Верхний уровень — металлическое золото с holo и собственным глифом «кошачий глаз». Короны нет.

ГалькаPebbleก้อนกรวด

L · 64 · reveal, детальная M · 24 + подпись · карточка S · 20 · сетка коллекции

Силуэт: круг
Символ: лапка
Материал: матовая бумага
Анимация: нет

НефритJadeหยก

L · 64 M · 24 + подпись S · 20

Силуэт: скруглённый квадрат
Символ: две точки
Материал: сатин
Анимация: лёгкий блик

СапфирSapphireไพลิน

L · 64 M · 24 + подпись S · 20

Силуэт: звезда
Символ: ★
Материал: фольга по контуру
Анимация: блик при наклоне

СекретSecretซีเคร็ต

L · 64 · живой holo M · 24 · запечённый holo S · 20 · статично

Силуэт: голова кошки
Символ: кошачий глаз
Материал: золото + holo
Анимация: шейдер, частицы

Проверка различимости

В сетке коллекции

Миниатюра 12, бейдж S в углу. Изображения статичные, без живых шейдеров. Имя — в цвете чернил.

Мурка

Тыква

ส้มจี๊ด

Mochi

Правила

Цвет никогда не единственный признак (WCAG 1.4.1). Граница бейджа ≥ 3:1 к фону, текст на бейдже ≥ 4,5:1.
Светлота: Галька — светлая, Нефрит — средняя, Сапфир — тёмный, Секрет — металл с holo.
Без «Tier 4», «4★» и «4/4». Для скринридера — название уровня: «Редкость: Сапфир».
Уровни не привязаны к породам Tamra Maew. Окрасы — отдельные ачивки.
Живой holo — только на одной открытой карточке. В сетке и на share — запечённый градиент.
Названия «Галька / Нефрит / Сапфир / Секрет» — рабочие. Решение за PO и локализацией, тайские варианты нужно показать консультанту.

07 · Примитивы

Кнопки, чипы, плашки, поля

Высота задаётся только паддингами и минимальной зоной нажатия, фиксированной высоты в одну строку нет. Каждый примитив показан в трёх языках сразу. Ширина заложена примерно ×2 от английского текста.

Кнопки

RU

EN

TH

В главной CTA глагол «Встретить кота» вместо «Поймать кота» из PRD. Это черновик, решение за PO и копирайтером. Тайский текст требует проверки носителем.

Чипы (фильтры) и плашки (статусы)

RU

Геолокация: точная Геолокация: примерная, радиус 500 м Возможный повтор Новый

EN

Location: exact Location: approximate, 500 m radius Possible duplicate

TH

ตำแหน่ง: แม่นยำ ตำแหน่ง: โดยประมาณ รัศมี 500 ม. อาจซ้ำกัน ปั่นจักรยานไปซื้อน้ำแข็ง

Поле имени

«Дать имя» — центральный момент. Поле набрано тем же шрифтом, что имя на карточке. Максимум 30 символов, счётчик виден. Текст имени всегда в цвете чернил, в том числе при ошибке: красными бывают только рамка и сообщение.

Как зовут кота? обязательно

Имя увидят те, кто встретит этого кота после вас.30/30

Имя не может быть пустым. Введите хотя бы один символ.

แมวตัวนี้ชื่ออะไร

Тайское имя на 30 символов: проверка верхних и нижних ярусов30/30

Выбор без предвыбора

Требование PRD: точность геолокации выбирает пользователь, по умолчанию не отмечено ничего. Пока выбора нет, кнопка «Продолжить» неактивна.

08 · Токены

Анимация и момент reveal

Интерфейсные переходы длятся 150–400 мс. Вход идёт с ease-out, выход длится 65 % от входа и использует ease-in. «Пружинка» стикера — только для момента вознаграждения. При системной настройке Reduce Motion остаются только смена прозрачности и мгновенные состояния.

fast · 150нажатие, hover, focus · ease-out

base · 200чипы, переключатели

slow · 300появление элементов, шаг 40 в списках

move · 400sheet, смена экрана · максимум

sticker · 300«пружинка» вознаграждения

Reveal: сначала свечение, потом кот

Цвет свечения сообщает уровень до появления кота. Обманок вроде «почти золото, а нет» нет. Reveal всегда можно пропустить. Тактильная отдача и длительность растут с уровнем.

Выберите уровень справа

Баронесса Мурка

Имитировать Reduce Motion

Уровень	Свечение	Всего	Эффект
Галька	300	700	мягкий кремовый ореол
Нефрит	450	1000	бирюзовый ореол, блик
Сапфир	650	1400	сине-фиолетовый, вспышка фольги
Секрет	900	2000	золото, holo, частицы
Reduce Motion	—	200	только прозрачность, статичный ореол

Живой шейдер (Skia RuntimeEffect + гироскоп) работает только на одной открытой карточке, вне экрана гироскоп отключается. Звуковой акцент по уровню учитывает беззвучный режим. В режиме уважения частицы и holo отключены.

09 · Токены

Тактильная отдача

Таблица «событие → тип вибрации». Вызовы expo-haptics оборачиваются в try/catch: на части Android-устройств они выбрасывают ошибку. Если вибрация недоступна, визуальный отклик остаётся.

Токен	Событие	expo-haptics	Фолбэк (Android Vibration)
haptic.select	Переключение чипа, вкладки, выбор варианта	selectionAsync()	нет вибрации
haptic.shutter	Нажатие кнопки съёмки	impactAsync(Light)	10 мс
haptic.detect	Рамка: кот найден	selectionAsync()	нет вибрации
haptic.reveal.pebble	Reveal · Галька	impactAsync(Light)	10 мс
haptic.reveal.jade	Reveal · Нефрит	impactAsync(Medium)	20 мс
haptic.reveal.sapphire	Reveal · Сапфир	impactAsync(Heavy)	35 мс
haptic.reveal.secret	Reveal · Секрет	impactAsync(Heavy) → notificationAsync(Success)	[0, 35, 60, 20]
haptic.saved	Имя сохранено	notificationAsync(Success)	[0, 15, 50, 15]
haptic.warn	Плохое качество фото, нет сети	notificationAsync(Warning)	[0, 20, 80, 20]
haptic.report	Жалоба отправлена	impactAsync(Light)	10 мс

Режим уважения и Reduce Motion вибрацию не отключают: она остаётся функциональной обратной связью. Отключение — только через пользовательскую настройку «Вибрация».

10 · Токены

Схема камеры

Отдельная схема для яркого солнца. Текст лежит на плотной подложке 86 %, контраст 18:1 при белом тексте. Тонкого текста поверх видео нет. Состояния рамки различаются формой и иконкой, а не только цветом.

Не снимайте, стоя спиной к изображению Будды

Кота не видно · пунктир

Несколько котов · две рамки

Кот найден · толстые углы

Плохое качество · зигзаг

Токен	Значение	Назначение
--kg-cam-scrim	rgba(22,17,13,.86)	подложка под любым текстом и кнопками
--kg-cam-ink	#FFFFFF	текст подсказок, 18,7:1 на подложке
--kg-cam-accent	#FFE14D	«кот найден», 14,4:1. Не цвет редкости
--kg-cam-warn	#FFB35C	плохое качество, вместе с иконкой и зигзагом
--kg-cam-shutter-ring	berry-300	кольцо кнопки съёмки

11 · Чек-лист

Ограничения, заложенные в токены

Эти правила проверяются при ревью любого нового компонента.

Нет портретов, гаруды, королевских корон и штандарта. Верхний уровень редкости — «кошачий глаз», а не корона.
Нет Будды в иконках, стикерах, рамках и иллюстрациях. Маскот не изображается Буддой или монахом.
Полосы тайского флага не используются ни как рамка, ни как мотив редкости. Флажок в выборе языка допустим.
Имена котов и пользователей не бывают красными: токен --kg-name всегда указывает на чернила.
Праздничные экраны не делаются в чёрно-белой гамме. Тёмная тема тёплая, коричневая, а не чёрная.
Охотничьих образов нет: ни прицелов, ни сетей, ни клеток, ни «трофеев».
В указующих иллюстрациях — открытая ладонь. Маскот не показывает подошвы.
«Пожаловаться» имеет постоянное место в каждой публичной карточке и метке: SLA модерации 24 часа.
Режим уважения ([data-respect="on"]) приглушает бренд и цвета дня, останавливает holo и скрывает промо.