Claude
9935acb86d
Заменяет десктопную сетку «автор 132 px + текст» (часть ADR-024) единым для десктопа и мобильного потоком: блок сообщения прижат к своему краю ленты, ширина ограничена, текст внутри блока по-прежнему слева. Разделители дат и «новые» — во всю ширину. CSS-класс grid переименован в feed-list — сетки в разметке больше нет. Проверено вживую (два аккаунта, DM, скриншоты 390 и 1280 px через Playwright/Chromium) — своя и чужая сторона видны на обоих брейкпоинтах, перенос длинного текста и разделители работают. Обновлены ui.md, identity/brief.md и эталонный мок screens.html. sw.js VERSION → v5 (менялись app.css и js/ui/chat.js, накопительно с композером из ADR-064 — ни то ни другое ещё не в проде).
52 lines
3.6 KiB
Markdown
52 lines
3.6 KiB
Markdown
# Айдентика «Скобы»
|
||
|
||
Источник — исследование «Исследование айдентики 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`.
|
||
|
||
## Шрифт
|
||
|
||
Один: системный моноширинный.
|
||
|
||
```css
|
||
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. Шрифты не загружаются.
|
||
|
||
## Компоновка
|
||
|
||
- Десктоп: сайдбар 224 px с правой границей `line`, шапка 64 px, отступы контента 32 px.
|
||
- Мобильный: шапка 56 px, отступы 20 px, ввод с min-height 44 px.
|
||
- Сообщения — поток на обеих ширинах, автор и время над текстом; свои — у правого края ленты, чужие — у левого, ширина блока не больше `min(640px, 85%)` (ADR-065).
|
||
- Ввод — рамка 1 px ink, без скруглений, `>` цветом mark слева.
|
||
- Активный элемент списка — инверсия: фон ink, текст bone.
|
||
- Разделители — 1 px `line`; разделитель «новые» — 1 px mark.
|
||
|
||
## Голос
|
||
|
||
Короткие фразы, строчные буквы, без восклицаний и маркетинга. Ошибки говорят, что случилось и что делать. Примеры в `docs/ui.md`.
|