Первая часть разбора
Номер добавляется через CSS-счетчики (counter-reset и counter-increment).
И тут же вторая мысль
Стиль цифры — служебный Inter фиолетового цвета. Он визуально отбивает блоки друг от друга.
Дизайн-код
Живая библиотека блоков, из которых собираются заметки. Здесь они выглядят ровно так же, как в постах — один общий стиль, один источник правды.
Принципы
Свободная форма, вдохновлённая Эдвардом Тафти. Содержание важнее рамок: много воздуха, ничего случайного. Но без догмы — графика бывает и просто ради настроения; главное, чтобы помогала читать, а не мешала.
Тёплый, но тихий фон. Бумага тёплая, но почти без цвета — холст, а не голос. На нём единственный акцент сразу звучит и не конкурирует с контентом. Фон молчит — поэтому акценты слышно.
Цвет
Один источник правды —
tokens.ts. Плашки покрашены переменными, а подписи напечатаны из того же объекта: страница физически не может разойтись с сайтом.Правила цвета
Три правила — каждое с живым примером.
1. Фиолетовый — то, что можно тронуть. Ржавчина — то, что просто отмечено.
Ссылки, кнопки, интерактив — фиолетовые. Номера разделов и служебные метки — ржавые. Ни один ржавый элемент не кликабельный. Крупные метрики — вне этой игры: и число, и единица набраны однотонными чернилами, без цветовых акцентов.
фиолетовая ссылка — можно тронуть · 01 — ржавый номер раздела, не кликается
2. Прозрачность к цветному акценту не применяется.
Полупрозрачный цветной текст перестаёт читаться. Тише делается отдельным значением цвета, а не процентами прозрачности.
так — почти не читается → так — читается
3. Линейка есть только там, где разделяет элементы списка.
Ни рамок вокруг блоков, ни черты под шапкой, ни разделителей секций.
- элемент списка — линейка снизу
- второй элемент — та же линейка
- третий — а под ним уже нет
Типографика
Три голоса, три роли — чтобы страница читалась как продуманное издание, а не дефолтный блог. Личность несут шрифты, а не кричащий цвет: бумага тёплая, а цвет разведён по ролям — фиолетовый для интерактива, ржавая искра лишь метит служебное. Шрифт работает, цвет молчит.
Тело набрано засечками — спокойным «прозрачным» шрифтом, чтобы вы видели мысль, а не буквы. В абзаце спокойно живут жирный, курсив, «ёлочки», тире — и цифры старого стиля: в 1984-м, до 30%, в 9:00.
Fraunces
PT Serif
Inter
в тексте · PT Serif
0123456789
…в 1984-м выросли на 30%, релиз — в 9:00.
в метриках · Fraunces + PT Serif
0123456789
9млн ₽
Числа: в тексте — PT Serif (спокойные, чистые). В крупных метриках Fraunces набирается только числовое ядро — включая минус и ×: «−40» и «×3–5» целиком во Fraunces. Единица — отдельный элемент в уменьшенном PT Serif (~0.52em): «млн ₽», «%». Однотонно, без цветовых акцентов.
Авто-нумерация заголовков
Для лонгридов и разборов, где важна структура. Если статье включить режим
numbered, перед каждым подзаголовком (H2) автоматически появится порядковый номер. Никакой ручной работы при перестановке абзацев.Типограф · невидимый слой
Правила русской типографики применяются на сборке автоматически к каждому посту. На входе — обычный markdown, на выходе текст уже «по-типографски». Это часть дизайна: даже идеальный шрифт выглядит сыро, если предлоги висят в конце строки, а кавычки кривые.
сыро · как набрано
ИИ пришёл не помочь - он пересобирает «архитектуру» работы. До 30% горит на передаче смысла…
после типографа
ИИ пришёл не помочь — он пересобирает «архитектуру» работы. До 30% горит на передаче смысла…
Что он чинит сам: «ёлочки» вместо «лапок» · тире — вместо дефиса между словами · неразрывные пробелы (короткие «на», «до», «в» не отрываются и не висят в конце строки) · многоточие … одним знаком · правильные ×, −, № и пр. Всё на сборке, по библиотеке typograf (а сами правила — в традиции «Ководства» Лебедева).
Врезка с цифрами
Крупные цифры с курсивной подписью — когда нужно дать «вес фактам»: рост, доля, срок. Числовое ядро (включая минус) — Fraunces 600, единицы и символы — уменьшенный PT Serif. Однотонно: без цвета и на числе, и на единице.
×3–5
рост производительности
−60%
размер команды
Акцент
Акцентная фраза с вертикальной чертой — вытащить ключевую мысль, поставить точку в разделе или закрыть пост.
Выиграют те, кто переосмыслит саму архитектуру того, как их бизнес создаёт продукты.
Книжные сноски (Интерактивные)
Термин подсвечен лёгким серым фоном с пунктирным подчёркиванием — сразу читается как сноска, а не переход на другую страницу. По клику прямо под термином раскрывается окошко с пояснением; оно живёт в потоке текста (не «приклеено» к экрану) и поджимается к краям, чтобы не уезжать за экран на мобильном. Тап мимо — закрывает.
Мы применяем этот паттерн, когда нужно расшифровать специфичный терминТермин — например, сложное профессиональное понятие, которое требует отдельного абзаца для объяснения, но не должно ломать ритм основного текста. или пояснить какую-то аббревиатуру, не перегружая абзац.
Картинка с подписью
Иллюстрация или схема с подписью по центру — на всю ширину или узким вертикальным кадром.
Иллюстрации · единая стилистика
Картинки собираю моделью (сейчас GPT Image 2) по референсу: скармливаю эталонные кадры, чтобы держать одну стилистику и гармоничную палитру. Есть отдельный промпт-шаблон. Цель — чтобы иллюстрации выглядели как одна серия, а не случайный сток: метафора вместо буквальности, та же температура цвета, тот же «материал».
Редакционная обложка · сцена вместо символа
Если страница держится на личном опыте, обложка показывает действие, а не условный «ИИ». Никаких светящихся узлов, цифрового мозга и глянцевого робота: человек отдыхает, робот жонглирует восемью рабочими задачами — смысл «я поручил это ИИ» считывается ещё до текста.
Это самостоятельный широкий OG-артефакт, поэтому заголовок встроен прямо в композицию. Ручная штриховка, бумажная фактура и ограниченные фиолетово-жёлтые акценты связывают иллюстрацию с сайтом, но оставляют ей собственный характер.
Обложки кейсов · три роли
Не каждый проект нужно превращать в сгенерированную картинку. Обложка выбирается сверху вниз: доказательство, если реальный материал сам показывает результат; микроистория, если невидимый эффект складывается в один небуквальный образ; абстрактные круги, если первые два пути дают лишь декоративный шум.
Абстракция здесь не заглушка, а пауза в журнальном ритме. Все три типа используют один формат 3:2, одну рамку и один канонический файл для карточки, шапки кейса и социального превью. Заголовок и метрика всегда остаются живым HTML.
Иллюстрации · один рецепт, две настройки
Рецепт один: почти монохромный кадр и ровно одна искра цвета — на том предмете, ради которого картинка нарисована. Дальше меняется только громкость.
Нуар — когда объясняем. Темноты много, искра приглушённая и почти незаметная: фиолетовый стикер, тонкая нить. Разборы, лонгриды, всё про устройство вещей.
Свет — когда зовём. Воздуха много, искра тёплая и видна издалека: солнце, машина, цветы. Афиши, эфиры, обучение.
Почему искра одна: как только цветных пятен становится два одинаковой силы, глаз перестаёт понимать, куда смотреть. Ржавчина в интерфейсе — тот же тёплый цвет, затемнённый до читаемости, поэтому сайт и картинки говорят одним словарём.
«Кухня» живёт на своей бумаге. Картиночный раздел (/nejronki/, /unsexy/, /petlya/, /agentic/) намеренно стоит на более жёлтой бумаге
#FFF8E7 — у него свой, более громкий голос. Это решение, а не рассинхрон.Пара-контраст · «день / ночь»
Блок-противопоставление: два состояния рядом, чтобы поймать контраст — «до → после», старое и новое, один подход против другого. Две половины слиты в одну плашку, граница — живой волнистый шов: читается как одно целое, а не две карточки.
☀ День · решения
Вы делаете то, что машинам нельзя доверить: выбираете архитектуру, снимаете противоречия, проверяете результат.
☾ Ночь · исполнение
Ноутбук закрыт — фабрика не спит. Агенты проверяют зависимости, пишут код, гоняют тесты.
Шов поворачивается вслед за раскладкой: на компьютере половины стоят боками и шов вертикальный, на телефоне — друг над другом и шов горизонтальный.
Эксперименты · микросторителинг
Иногда идея просится не в лонгрид, а в короткий мобильный формат: разложить её на тезисы и оживить интерактивом — листаешь, как историю под телефон. Не статья, а «сцена». Пара живых примеров:
