СТИЛЬ УЧЁНОГО ЗАДРОТА

🧒 Простыми словами: это наш почерк для сайтов. Белая бумага, книжный шрифт, тонкие серые линеечки, синие ссылки. Выглядит как страница профессора, который не тратил ни копейки на дизайнера, потому что ему есть что сказать. Один файл, открывается без интернета, будет работать через десять лет.

1. Что это за стиль и зачем он нам

Визуальный язык человека, у которого содержание важнее упаковки — и который достаточно уверен в содержании, чтобы не прятать его за оформлением. Академическая страница, свёрстанная руками: не бедность, а заявление.

Он работает на нас ровно потому, что читатель — инженер или ресёрчер топ-лаборатории. Такой читатель видел тысячу лендингов с градиентом и ноль страниц, где просто лежит работа. Отсутствие маркетинга само по себе сигнал: смотреть тут надо на список, а не на анимацию.

Три вещи, которые делают стиль, а не «просто минимализм»:

1. Страница — документ, а не приложение. Сохранил Ctrl+S, открыл через год без интернета — всё на месте. Отсюда всё остальное: один файл, инлайн-CSS, никаких CDN, никаких вебшрифтов по сети, никакого JS ради оформления.
2. Синие ссылки браузера по умолчанию (#0000ee, посещённые #551a8b). Это не лень — это отказ от брендирования. Ссылка выглядит как ссылка, посещённое видно. Так делают страницы, которые читают, а не «конвертят».
3. Правда о происхождении внизу каждой страницы — блок .foot: как и когда сделано, чем сгенерировано. Страница отчитывается о себе.

Когда НЕ применять: рекрутерский one-pager, продуктовый лендинг со скриншотами, что угодно с крупной графикой. Такая страница помечается в исходнике <!-- style-exempt: причина --> — иначе гейт будет ругаться, а гейт, который ругается на намеренное решение, перестают читать.

2. Откуда канон

Стиль изобретён на живых страницах, они же — эталон. Не выдумывать заново, смотреть туда:

• tonydzi.github.io/scholar/ — научный профиль (эталон «страница о человеке»)
• tonydzi.github.io/scholar/publications/ — эталон «длинный список сущностей»
• tonydzi.github.io/contributions/ — эталон «генерируемая страница со счётчиками и статусами»

Исходники: репо tonydzi/tonydzi.github.io.

3. Дизайн-система

Палитра. Шесть значений, больше не нужно.

Токен	Значение	Роль
--paper	#fdfdfd	фон. ⛔ Никогда не чистый #fff — чистый белый читается как форма для заполнения
--ink	#111	текст
--muted	#666	метаданные: даты, журналы, подписи, второстепенное
--rule	#e2ded3	тёплая линейка под заголовками секций и над подвалом
--hair	#eee9dd	линейка светлее, между элементами списка
--link / --seen	#0000ee / #551a8b	ссылка и посещённая

Акцентного цвета нет и добавлять его не надо. Единственное цветное пятно на странице — ссылки. Если понадобился статус (открыто/закрыто/принято) — берётся пилюля .st с тонкой рамкой, и она нарочно без засечек: это состояние машины, а не проза.

Типографика.

• Стек: "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif. Всё системное, ничего не качается. Charter — шрифт, нарисованный для дешёвой лазерной печати; отсюда честная «распечатанная» фактура.
• Тело 18px/1.55, полоса набора max-width:47rem, абзац max-width:65ch — глаз находит следующую строку без усилия.
• h1 — 2.1rem, вес 600, лёгкий отрицательный трекинг. На внутренних страницах h1.sub (1.7rem).
• h2 — не заголовок, а ярлык раздела: 0.8rem, КАПС, трекинг .14em, серый, с линейкой под ним. Это главная опознавательная черта стиля.
• Цифры, которые стоят в столбик, — всегда font-variant-numeric: tabular-nums.

Раскладка. Одна колонка. Никакой сетки, никаких карточек, никаких теней, скруглений почти нет (2–3px только у кода и пилюль). Ритм задают линейки, а не рамки и не отступы.

Рабочая лошадка — .item. Девять из десяти блоков в этом стиле это список сущностей: публикация, эссе, PR, релиз. Один шаблон на всё:

<div class="item">
  <div><span class="it-t">Название.</span> Авторы, <b class="me">наше имя</b> жирным.
       <span class="it-v">Где и когда вышло — и оговорка прямым текстом, а не умолчанием</span></div>
  <div class="lk"><a href="#">DOI</a><a href="#">PDF</a><a href="#">Code</a></div>
</div>

4. Как делать новую страницу

1. RECALL: посмотреть эталон из §2, самый близкий по типу содержимого. Не изобретать.
2. Взять references/page-template.html, вставить внутрь <style> весь references/nerd.css (инлайном, без минификации — файл должны читать люди).
3. Выкинуть из CSS то, чего на странице нет. Оставлять мёртвые правила — не в стиле.
4. Наполнить содержимым. Правила текста: предложения, а не обрывки-буллеты; каждое число либо опубликовано со ссылкой, либо его нет; неудобный факт пишется прямо, а не опускается (это и есть тон — см. как /contributions/ пишет про ноль мержей и как страница публикаций пишет про отозванный том).
5. Подвал .foot: чем и когда сделано. Страница генерируется — сказать это и дать ссылку на генератор.
6. Прогнать гейт (§5). Только зелёный = готово.
7. Многостраничный сайт → единый блок .sitenav внизу каждой страницы, одинаковый везде, и лучше инжектить его скриптом, а не копипастой (живой пример — tools/build_site.py в репо сайта).

5. Гейт стиля

python scripts/style_check.py <файл.html | папка>

exit 0 — соответствует, exit 1 — нет. Ловит то, что реально отваливается со временем: заехавший CDN, трекер, потерянную полосу набора, таблицу без обёртки (уводит вбок всю страницу на телефоне), картинку без alt, незакрытый тег, пропавший viewport.

Он не судит вкус — вкус за человеком. Он сторожит контракт.

Исключение для страницы в другом языке — в её же исходнике, с причиной:

<!-- style-exempt: recruiter one-pager, sans-serif card layout on purpose -->

Тогда типографские проверки снимаются, а универсальные (самодостаточность, трекеры, гигиена документа, ловушки раскладки, структура) остаются — трекер не пролезет и через исключение. Метка без причины = ошибка.

Тест гейта:

python scripts/_test_style_check.py

15/15 на 2026-07-29. Проверено мутацией: отключаешь детектор трекеров — тест краснеет (13/15, exit 1). Зелёный прогон что-то значит.

6. Антипаттерны — по ним стиль умирает

⛔ Не делать	Почему
Подключить шрифт с Google Fonts / любой CDN	Страница перестаёт быть самодостаточной и начинает следить за читателем чужими руками
Добавить акцентный цвет «для оживления»	Единственное цветное пятно — ссылки. Иначе это уже другой стиль
Карточки с тенями и скруглениями	Ритм в этом стиле держат линейки
Аналитика, пиксель, «всего лишь» счётчик	Подвал каждой страницы обещает «no tracking». Обещание держим
Сборка, npm, шаблонизатор ради двух страниц	Чинить должен слабейший, а не тот, у кого поднимается node_modules
Ровный «AI-шный» набор: кремовый #F4F1EA, терракотовый акцент, эмодзи вместо заголовков	Мы туда не идём. Наш фон холоднее и светлее, акцента нет вовсе
Захардкодить цифру в вёрстке	Число живёт в генераторе, иначе протухнет и соврёт

7. Сайт лаборатории

Тот же язык, разница только в структуре: лаборатория — это что мы построили и что из этого работает, а не «кто я». Порядок разделов: одна строка что это → список артефактов через .item (репо, что делает, ссылка) → метод → люди → контакт. Счётчики (.tally) только если их генерирует скрипт.

Главное решение уже принято и не переобсуждается: позиционирование — Кремниевая долина, «Based in the Bay Area» (Антон, 27.07). Ни на одной странице не менять на Лиссабон.

8. Паспорт (что сломается и как чинить)

• Что это. Дизайн-система + скелет + детерминированный сторож для наших сайтов-документов.
• Вход/выход. Гейт: путь к файлу или папке → отчёт построчно + exit-код. Ничего не пишет и не ходит в сеть.
• Кто дёргает. Я — при создании/правке любой страницы; сторож можно ставить в CI репо сайта.
• Что ломается.
  • serif stack missing на странице, которая должна быть другой → добавить style-exempt с причиной, а не выключать гейт.
  • <table> without an overflow-x → обернуть таблицу в <div class="tw">.
  • Гейт «OK», а страница выглядит не так → он не судит вкус; сверяться глазами с эталоном из §2.
  • Стиль разъехался между страницами → блок .sitenav и общий CSS инжектить скриптом, а не копировать руками ([[coverage-and-docs-every-part]], правило «один источник, ноль копий»).
• Как понять, что живой. python scripts/_test_style_check.py → 15/15.

Файлы скилла

• references/nerd.css — канон-стиль, один экран, с комментариями «почему»
• references/page-template.html — скелет страницы
• scripts/style_check.py — гейт
• scripts/_test_style_check.py — тест гейта

<!--kit-footer-->

---

Like this skill? It is part of second-brain-starter-kit: the second brain we built for ourselves and run every day at Palo Alto AI Research Lab. Install the whole set with npx skills add tonydzi/second-brain-starter-kit. Everything is open source and free, so take what you need.

Flagships worth a look on their own: secondop-panel (a second opinion from a panel of external models), claude-memory-tidy (stop your agent's memory from rotting), telegram-mcp-kit (your own Telegram over MCP in about 15 minutes).

Author: Anton Dziatkovskii, Palo Alto AI Research Lab. Telegram @tonydzi - WhatsApp +1 341 222 9178 - X @Tony_Stef_

Engineers: want to test-drive this setup? Message me. I hand out free starter seeds to engineers who test and report back, and custom skill requests are welcome.