mayatnikovandClaude Opus 5
f9ac83bef8
Ветка отведена от 522ba89, где последним был ADR-063, и заняла
064–072. Тем временем в main через #3 и #4 пришли свои 064
(строка ввода — div вместо form), 065 (стороны сообщений)
и 066 (серверного перца нет).
Переезжают три ADR этой ветки, 067–072 остаются на месте:
их номера свободны, а внутренние ссылки менять незачем.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QR8uS3zGkybzWRW4GEY1oz
3.9 KiB
Айдентика «Скобы»
Источник — исследование «Исследование айдентики Bare» (Claude Design), вариант 1h и мок чата 2a/2b. Здесь — то, что из него принято (ADR-024).
Знак
Четыре угла рамки, из которой вынули содержимое. Пустота внутри и есть знак. Файл — mark.svg (viewBox 64, штрих 7); для 16 px штрих 9 (web/icons/mark.svg).
Правила: внутрь рамки ничего не помещать; не скруглять; не замыкать в квадрат; не наклонять и не анимировать; один цвет на знак; охранное поле — длина одного уголка. На тёмном и акцентном фоне знак всегда bone.
Wordmark — слово bare строчными рядом со знаком, тем же шрифтом, что интерфейс. «Bare» с заглавной — только в тексте.
Цвет
| имя | значение | роль |
|---|---|---|
| bone | #F7F5F0 |
фон |
| ink | #1B1917 |
текст, рамки, активный элемент |
| text2 | #3C3B38 |
вторичный текст |
| mute | #6E6D68 |
авторы, подписи |
| stone | #A9A59D |
время, placeholder, pending |
| line | #E7E3DA |
разделители |
| edge | #DEDCD6 |
внешние границы |
| mark | oklch(55% 0.19 20), fallback #C82D40 |
один акцент: непрочитанные, «новые», > ввода, свой ник, предупреждения |
Акцент — не чаще одного смыслового элемента на экран. Не для кнопок и заливок. Никаких градиентов, теней, скруглений.
CSS-переменные: --bone --ink --text2 --mute --stone --line --edge --mark.
Шрифт
Один: системный моноширинный.
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
Размеры: текст сообщений 14 px / 1.55; автор и время 12 px; заголовки секций 10 px, разрядка 0.14em, uppercase; подписи 11 px; имя чата в шапке 15 px. Шрифты не загружаются.
Поля ввода — те же 14 px, исключений нет: масштабирование в клиенте запрещено, и растить шрифт ради обхода фокус-зума iOS не приходится (ADR-075).
Компоновка
- Десктоп: сайдбар 224 px с правой границей
line, шапка 64 px, отступы контента 32 px; сообщения — сетка132px 1fr, column-gap 20, row-gap 6. - Мобильный: шапка 56 px, отступы 20 px, ввод с min-height 44 px. Нижнее поле подвала и строки ввода считается с
env(safe-area-inset-bottom): под системную полосу iPhone они не заходят (ADR-075). - Ввод — рамка 1 px ink, без скруглений,
>цветом mark слева. - Активный элемент списка — инверсия: фон ink, текст bone.
- Разделители — 1 px
line; разделитель «новые» — 1 px mark.
Голос
Короткие фразы, строчные буквы, без восклицаний и маркетинга. Ошибки говорят, что случилось и что делать. Примеры в docs/ui.md.