К содержимому
Написать в TG

Style Guide

Каталог оформления публикаций: код, пример и команда для чата

Обложка Style Guide Невского: типографика, палитра и Дубай

Иногда «чуть шире» — это 800 пикселей, а иногда — почти весь экран. Здесь можно показать пальцем на нужный вариант и скопировать его код. У слов наконец появился общий размер.

Выберите образец, скопируйте команду и укажите место в материале. У каждого приёма постоянный код: QUOTE.RULE, IMAGE.WIDE или, например, GALLERY.TWO-ONE.

Собрано из 142 постов и 36 страниц · проверены 1246 опубликованных языковых версий · 20 октября 2026

Скачать все кодыКак давать правку

87 приёмов

Текст и ритм

TEXT.H1

Заголовок первого уровня

Размер H1 внутри текстовой области. Название страницы оформляется отдельной шапкой — её варианты показаны ниже.

У каждой истории есть свой масштаб

Где встречается · 1

TEXT.H2

Заголовок раздела

Новая мысль получает заметное начало. Это основной уровень внутри статьи.

Заголовок даёт тексту направление

Где встречается · 48

TEXT.H3

Подзаголовок

Раздел разросся — разделим его на понятные части.

Теперь можно рассмотреть детали

Где встречается · 54

TEXT.H5

Компактный заголовок

Редкий дополнительный уровень. Не заменяет обычное жирное выделение.

Тихое уточнение

TEXT.H6

Самый малый заголовок

Последняя ступень иерархии; в большинстве статей до неё не доходим.

Последняя ступень

TEXT.PARAGRAPH

Обычный абзац

Основа статьи. Здесь текст может спокойно объяснять, связывать и рассказывать.

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

Где встречается · 2

TEXT.BOLD

Жирное выделение

Подсветить важное слово, сохранив обычный абзац.

В этой фразе важно одно решение. Остальным словам не нужно говорить громче.

Где встречается · 77

TEXT.ITALIC

Курсив

Для короткого смыслового акцента, названия или интонации.

Иногда достаточно сказать чуть тише, чтобы фрагмент стал заметнее.

Где встречается · 69

TEXT.UNDERLINE

Подчёркивание

Небольшой приём внутри строки. У каждого выделения своя задача.

Пример: подчёркнутый фрагмент

TEXT.STRIKE

Зачёркивание

Небольшой приём внутри строки. У каждого выделения своя задача.

Пример: прежняя формулировка

TEXT.CODE

Код в строке

Небольшой приём внутри строки. У каждого выделения своя задача.

Пример: image.wide

Где встречается · 6

TEXT.SUP

Верхний индекс

Небольшой приём внутри строки. У каждого выделения своя задача.

Площадь — м2

TEXT.SUB

Нижний индекс

Небольшой приём внутри строки. У каждого выделения своя задача.

Формула — H2O

TEXT.LINK

Текстовая ссылка

Обычная ссылка остаётся частью предложения.

Когда понадобится набор цветов и кнопок, откройте дизайн-систему.

QUOTE.RULE

Цитата с полоской

Geist Mono и вертикальная полоска. Выделяет мысль, сохраняя ширину текста.

Хорошая цитата оставляет читателю мысль, а оформлению — только работу по её выделению.

Где встречается · 57

QUOTE.ACCENT

Акцентная цитата

Крупная строка без полоски. Для вступления или мысли, на которой стоит задержаться.

Сначала читатель замечает ритм. Потом — то, что ему хотели сказать.

Где встречается · 15

LIST.BULLET

Маркированный список

Несколько равноправных мыслей, включая вложенные пункты.

  • Сначала выбираем смысл
  • Затем — форму
    • Ширину
    • Ритм и акценты
  • После смотрим на результат

Где встречается · 20

LIST.NUMBER

Нумерованный список

Порядок важен: шаги, очередность, последовательность.

  1. Найдите пример в каталоге
  2. Скопируйте его код
  3. Укажите место в публикации

Где встречается · 5

TEXT.DIVIDER

Разделитель

Пауза между частями истории без нового заголовка.

Где встречается · 11

TEXT.CODE-BLOCK

Блок кода

Команды и примеры получают собственное место.

Стиль: IMAGE.WIDE
Пропорция: RATIO.4X5
Место: после второго абзаца
Текст: без изменений

Где встречается · 1

TEXT.TABLE

Таблица

Когда несколько вариантов проще сравнить рядом.

ЗадачаПриём
Выделить мысльЦитата с полоской
Показать сериюГалерея
Продолжить разговорКарточка со ссылкой

Где встречается · 1

Пропорции

Для новых материалов держим пять основных пресетов: 9:16, 16:9, 4:5, 5:4 и 1:1. Остальные — дополнительные варианты для фотографии и превью. Пропорция — это форма исходника; «обычное / широкое / во всю ширину» — размер блока на странице.

Для Instagram различаем фото ленты и вертикальное видео. 9:16 готовим для Stories/Reels; для фото ленты базовый портрет — 4:5. Форматы приложения, API и рекламы могут различаться. Для блога все эти пропорции сохраняются без обрезки; перед переносом в Instagram выбираем подходящий пресет для конкретного размещения.

RATIO.9X16

9:16

Вертикальный экран · 1080 × 1920. Основной холст для Stories и Reels. Для фото в ленте понадобится отдельный кадр.

Серая заглушка 9:16, надпись Geist Mono
1080 × 1920 · 9:16
RATIO.16X9

16:9

Горизонтальное видео · 1920 × 1080. Удобно для YouTube, скринкастов и широких иллюстраций.

Серая заглушка 16:9, надпись Geist Mono
1920 × 1080 · 16:9
RATIO.4X5

4:5

Портрет · 1080 × 1350. Основной вертикальный формат для фото и карточек ленты.

Серая заглушка 4:5, надпись Geist Mono
1080 × 1350 · 4:5
RATIO.5X4

5:4

Спокойный горизонтальный кадр · 1350 × 1080. Та же пара сторон, развёрнутая на 90°.

Серая заглушка 5:4, надпись Geist Mono
1350 × 1080 · 5:4
RATIO.1X1

1:1

Квадрат · 1080 × 1080. Универсальная карточка, обложка или компактный сюжет.

Серая заглушка 1:1, надпись Geist Mono
1080 × 1080 · 1:1
RATIO.3X4

3:4

Дополнительный портрет · 1080 × 1440. Сохраняем как отдельный пресет; совместимость конкретного способа загрузки в Instagram проверяем перед выпуском.

Серая заглушка 3:4, надпись Geist Mono
1080 × 1440 · 3:4
RATIO.4X3

4:3

Классический горизонтальный кадр · 1440 × 1080. Хорош для фотографий и подробных схем.

Серая заглушка 4:3, надпись Geist Mono
1440 × 1080 · 4:3
RATIO.3X2

3:2

Фотографический горизонтальный кадр · 1620 × 1080. Естественный формат многих камер.

Серая заглушка 3:2, надпись Geist Mono
1620 × 1080 · 3:2
RATIO.2X3

2:3

Вертикальная фотография · 1080 × 1620. Для блога сохраняется целиком; для ленты Instagram готовим отдельный кроп 4:5.

Серая заглушка 2:3, надпись Geist Mono
1080 × 1620 · 2:3
RATIO.191X100

1.91:1

Широкая карточка · 1910 × 1000, или 1200 × 630 с почти тем же отношением. Полезна для превью ссылок.

Серая заглушка 1.91:1, надпись Geist Mono
1910 × 1000 · 1.91:1

Изображения

IMAGE.REGULAR

Обычное изображение

Остаётся в текстовой колонке: максимум 800 px.

Серая заглушка, пропорция 16:9
Подпись объясняет изображение и не повторяет заголовок

Где встречается · 42

IMAGE.WIDE

Широкое изображение

Выходит за пределы текста, но сохраняет боковые поля. Максимум 1400 px.

Серая заглушка, пропорция 16:9
Подпись объясняет изображение и не повторяет заголовок

Где встречается · 57

IMAGE.FULL

Во всю ширину

Доходит до краёв области публикации. Сайдбар остаётся на своём месте.

Серая заглушка, пропорция 16:9
Подпись объясняет изображение и не повторяет заголовок

Где встречается · 27

IMAGE.CAPTION

Подпись под изображением

Подпись — отдельная строка под картинкой. Конечной точки нет; alt описывает изображение для тех, кто его не видит.

Серая заглушка, пропорция 5:4
Короткая подпись держится рядом со своим изображением
IMAGE.CAPTION-ITALIC

Подпись курсивом

Единое выделение всей подписи. Сложную подпись со ссылками лучше вынести в связанный текстовый блок.

Серая заглушка, пропорция 16:9
Образец цельного курсивного выделения

Галереи

От одного до трёх изображений в ряду. У галереи общая подпись; у каждой картинки — свой alt. Индивидуальные подписи в текущей сетке не выводятся. На телефоне ряды могут перестроиться по правилам темы.

Карточки

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

CARD.BOOKMARK

Ссылка-карточка

Когда ссылка заслуживает небольшой обложки, заголовка и пояснения.

По этой ссылке начинается следующая история
Карточка помогает понять, куда ведёт ссылка, ещё до нажатия.
Пример пропорцииStyle Guide
Пример пропорции

Где встречается · 12

CARD.CALLOUT

Заметка на полях

Серый фон отделяет уточнение от основного рассказа.

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

Где встречается · 18

CARD.CTA.MINIMAL-IMAGE

Компактная CTA с изображением

Вариант уже встречается в публикациях. Текст и картинка здесь заменены учебными образцами.

Пример пропорции
Здесь рассказ делает паузу и предлагает следующий шаг. Картинка поддерживает мысль, а кнопка ясно говорит, куда идти.
Выбрать следующий шаг

Где встречается · 18

CARD.CTA.MINIMAL

Компактная CTA без изображения

Вариант уже встречается в публикациях. Текст и картинка здесь заменены учебными образцами.

Здесь рассказ делает паузу и предлагает следующий шаг. Картинка поддерживает мысль, а кнопка ясно говорит, куда идти.
Выбрать следующий шаг

Где встречается · 1

CARD.CTA.IMMERSIVE

Большая CTA с изображением

Вариант уже встречается в публикациях. Текст и картинка здесь заменены учебными образцами.

Образец оформления
Пример пропорции
Здесь рассказ делает паузу и предлагает следующий шаг. Картинка поддерживает мысль, а кнопка ясно говорит, куда идти.
Выбрать следующий шаг

Где встречается · 1

CARD.CTA.CENTERED

Большая CTA по центру

Вариант уже встречается в публикациях. Текст и картинка здесь заменены учебными образцами.

Образец оформления
Пример пропорции
Здесь рассказ делает паузу и предлагает следующий шаг. Картинка поддерживает мысль, а кнопка ясно говорит, куда идти.
Выбрать следующий шаг

Где встречается · 1

CARD.HEADER-SPLIT

Большой баннер с изображением сбоку

Два поля: иллюстрация и короткое сообщение. Полноширинный вариант уже используется в блоге.

Пример пропорции

У этой мысли есть своя обложка

Большой блок меняет темп страницы. Здесь можно представить проект или закончить рассказ ясным предложением.

Посмотреть пример

Где встречается · 1

CARD.TOGGLE

Раскрывающийся блок

Короткий вопрос виден сразу. Нажмите на него, чтобы раскрыть подробный ответ.

Что можно убрать под раскрытие?

Дополнение, которое полезно не каждому читателю: подробный состав, пояснение или длинный ответ.

CARD.PRODUCT

Карточка продукта

Готовое оформление темы. В текущих публикациях не используется; цену и рейтинг добавляем только по реальным данным.

Место для изображения продукта

Здесь будет название продукта

Здесь — короткое описание. Образец показывает композицию без выдуманной цены или оценки.

К продукту
CARD.BUTTON.CENTER

Кнопка по центру

То же действие, расположенное по центру колонки.

Посмотреть пример
CARD.BUTTON.SECONDARY

Спокойная кнопка

Второстепенное действие с оформлением secondary.

Посмотреть детали
CARD.CALLOUT.ACCENT

Акцентная выноска

Фирменный акцентный цвет вместо нейтрального фона.

Здесь важная оговорка. Выноска держит её рядом с мыслью, к которой она относится.
CARD.CTA.WHITE

CTA на белом фоне

Светлый вариант карточки; цвет заметен и в тёмной теме.

Следующий шаг можно предложить спокойно. Для этого достаточно короткого пояснения и понятной ссылки.
Открыть пример
CARD.HEADER.ACCENT

Баннер с акцентным цветом

Вариант большого сообщения без изображения.

Пауза, которую видно

Один сильный акцент между двумя спокойными частями текста

Выбрать оформление
CARD.SIGNUP

Карточка подписки

Оформление формы из темы. В каталоге поля выключены: подключение рассылки выбирается отдельно.

CARD.CALLOUT.EMOJI

Выноска с эмодзи

Эмодзи слева задаёт интонацию, текст справа раскрывает мысль.

💡
Здесь можно оставить находку, совет или важное уточнение. У маленькой заметки тоже есть голос.
CARD.CALLOUT.BLUE

Синяя выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

🌊
Синяя выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.GREEN

Зелёная выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

🌱
Зелёная выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.YELLOW

Жёлтая выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

☀️
Жёлтая выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.RED

Красная выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

📍
Красная выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.PINK

Розовая выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

🌸
Розовая выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.PURPLE

Фиолетовая выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

🔮
Фиолетовая выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.
CARD.CALLOUT.WHITE

Светлая выноска

Готовый цвет из палитры темы. Цвет фона и эмодзи можно выбирать отдельно.

💭
Светлая выноска выделяет короткую мысль. Выберите оттенок, который подходит настроению материала.

Видео

VIDEO.FILE.PORTRAIT

Вертикальное видео

Файл 9:16, обычная колонка. Ролик запускается самим читателем.

Реальное видео из опубликованного материала · открыть источник

Где встречается · 15

VIDEO.FILE.LANDSCAPE

Горизонтальное видео

Файл 16:9 в широком формате. Подходит для скринкаста и демонстрации интерфейса.

Реальное видео из опубликованного материала · открыть источник

Где встречается · 4

VIDEO.FILE.SQUARE

Квадратное видео

Реальный квадратный файл из публикации. Его не приходится обрезать, чтобы получить квадрат.

Реальное видео из опубликованного материала · открыть источник

Где встречается · 1

VIDEO.LOOP.MUTED

Петля без звука

Видео зациклено и приглушено. В каталоге запускается по нажатию; autoplay для статьи указывается отдельной командой.

Реальное видео из опубликованного материала · открыть источник

Где встречается · 1

Вставки и аудио

EMBED.YOUTUBE

YouTube внутри публикации

Используется реальная ссылка из публикации о дизайне и недвижимости. При недоступности ролика остаётся переход к источнику.

Открыть YouTube

Где встречается · 6

AUDIO.PLAYER

Аудио

Оформление аудиокарточки есть в теме; в опубликованной библиотеке аудиофайлы не найдены. Это образец плеера без записи.

Сюда добавляется реальный аудиофайл — запись в примере отсутствует

Шапки и ленты

POST.HEADER.STANDARD

Обычная шапка

Настоящий компонент Hero из шаблона блога. Обложка 16:9 сохраняет исходные пропорции.

У каждой истории своя шапка

Заголовок задаёт тему, описание приглашает читать, а обложка помогает увидеть главное.

Обложка 16:9

Где встречается · 70

POST.HEADER.LEFT

Обложка слева

Настоящий компонент Hero из шаблона блога. Обложка 16:9 сохраняет исходные пропорции.

У каждой истории своя шапка

Заголовок задаёт тему, описание приглашает читать, а обложка помогает увидеть главное.

Обложка 16:9

Где встречается · 68

POST.HEADER.RIGHT

Обложка справа

Настоящий компонент Hero из шаблона блога. Обложка 16:9 сохраняет исходные пропорции.

У каждой истории своя шапка

Заголовок задаёт тему, описание приглашает читать, а обложка помогает увидеть главное.

Обложка 16:9

Где встречается · 38

POST.CARD.VERTICAL

Вертикальная карточка поста

Обложка сверху, затем заголовок, описание и метаданные.

Где встречается · 1

POST.CARD.HORIZONTAL

Горизонтальная карточка поста

Обложка рядом с описанием. Для компактного списка.

POST.FEED.THREE

Лента в три колонки

Нативная композиция, используемая на главной. Колонки адаптируются к доступной ширине.

Где встречается · 1

POST.FEED.LIST

Лента списком

Готовая композиция темы. На узком экране число колонок уменьшается.

POST.FEED.GRID-VERTICAL

Сетка вертикальных карточек

Готовая композиция темы. На узком экране число колонок уменьшается.

POST.FEED.GRID-HORIZONTAL

Сетка горизонтальных карточек

Готовая композиция темы. На узком экране число колонок уменьшается.

Одна команда — одно понятное изменение

Например: «В статье о сайте, после абзаца про R2: IMAGE.WIDE + RATIO.4X5. Изображение № 4, подпись сохранить».

Или: «Первые три фотографии собрать как GALLERY.TWO-ONE. Порядок оставить. Общая подпись: …».

Копирование берёт код, название и точные параметры приёма. Вам остаётся вписать место. По умолчанию оформление общее для семи языков, а перед публикацией показывается превью.

Что не выбирается одним кодом

Цена, рейтинг, отзывы, факты и изображения не появляются из оформления. Подписка и формы требуют настоящего обработчика. Удалённый или закрытый ролик не становится доступным от вставки в статью. Для Instagram нужен публичный пост с разрешённым встраиванием.

Что найдено при полном обходе

В материалах используются обычная шапка, обложки слева и справа, а также специальные представления дизайн-системы и списка. Служебные шаблоны автора, главной и landing поддерживаются отдельно; это не дополнительные стили абзаца. Аудиокарточек, product и toggle в текущих опубликованных постах и страницах не найдено — их образцы помечены как поддерживаемые.

Все проверенные материалы · 178

Источники правил медиа

@nevsky_alexander

В Instagram — Дубай без парадного фасада: семья, город, находки и то, что происходит между проектами. В Threads — мысли вслух о дизайне и AI, на YouTube — видео, которым тесно в сторис. Подписывайтесь там, где вам удобнее: будем на связи

Threads • @nevsky_alexanderYouTube • @alexander_nevsky
Подписка 1 Подписка 2 Подписка 3
Подписка 4 Подписка 5 Подписка 6