Substack

оранжевые чернила на столе в редакции

Substack выглядит как изрядно поношенная панель управления новостной редакции — белый холст, теплый, почти черный текст и один яркий оранжевый акцент, отмечающий каждый этап создания контента. Визуальная иерархия построена на плотности, а не на декоре: тонкие серые линии разделяют элементы ленты, аватары маленькие, метаданные приглушены, а взгляд читателя приучен к оранжевому призыву к действию, оранжевому логотипу, оранжевой ссылке «Подписаться», оранжевой кнопке «Создать». Поверхности остаются плоскими и неограниченными — никаких теней от карточек, никаких хромированных элементов панелей — позволяя типографике (компактный хромированный элемент системного интерфейса в сочетании с пользовательским шрифтом заголовков с засечками) нести на себе основную редакционную нагрузку. Фирменный стиль — сдержанность в хромированных элементах и яркость в одном цвете: приложение для чтения, которое выглядит как инструмент для публикации.

Трехколоночная компоновка для настольных компьютеров: фиксированная левая боковая панель (~200px, навигация с иконками и метками, закрепленная), центральная лента (максимальная ширина ~600px, список постов с вертикальной прокруткой), фиксированная правая боковая панель (~300px, поиск + рекомендации + регистрация). Центральная лента — это редакционное ядро — никаких карточек, только посты, расположенные друг над другом с тонкими разделителями и промежутками между разделами 32px. Главный баннер расположен вверху ленты в виде одной карточки во всю ширину. Левая боковая панель содержит логотип бренда (оранжевый знак с наложенными линиями), шесть пунктов навигации и оранжевую кнопку «Создать» во всю ширину внизу. Правая боковая панель содержит поле поиска, карточку регистрации и список «Далее» для чтения. Навигация минимальна — нет верхней панели, нет хлебных крошек; боковая панель И ЕСТЬ навигация. Плотность контента высока: в постах используются метаданные 12-13px и основной текст 15-19px, что создает ритм газетной ленты, а не ощущение карточной сетки маркетплейса.

Фотографии — это контент, созданный пользователями (аватары авторов, миниатюры публикаций, изображения постов) — Substack не предоставляет собственных декоративных фотографий. В главной карточке используется градиент от бирюзового до зеленого цвета с абстрактными иллюстративными элементами (геометрические фигуры, стилизованные объекты в виде ручки/заметки) в качестве фона. Миниатюры постов в правой боковой панели небольшие (64px), заключены в радиус 8px и функционируют как предварительный просмотр списка для чтения. Общий визуальный язык — текстовый: интерфейс представляет собой холст для чтения, а изображения служат небольшими визуальными якорями, а не создают атмосферу.

Минимализм Чистый SaaS Редакционный

https://substack.com

Палитра

Бренд

Signal Orange #ff6719 — Оранжевый цвет используется в качестве вспомогательного акцента для декоративных деталей и акцентирования внимания на нечастых сигналах. Не следует выделять его как основной цвет призыва к действию.

Нейтральные

Ink #363737 — Основной текст — основной текст, заголовки, названия постов, временные метки, имена авторов; теплый, почти черный цвет вместо чистого #000 для более комфортного чтения.
Paper #ffffff — Холст страницы, поверхности карточек, поля ввода, фон навигации — доминирующая поверхность, занимающая подавляющую часть интерфейса.
Charcoal #232525 — Состояние при наведении курсора на дополнительный текст и ссылки с высоким уровнем выделения; более глубокое, чем в режиме Ink, для блоков кода и блоков выделения.
Stone #777777 — Поддерживается нейтральный цвет для второстепенных элементов пользовательского интерфейса, разделителей и приглушенных подписей. Не следует назначать его основным цветом для призывов к действию.
Ash #b6b6b6 — Тонкие линии границ, контуры кнопок, обводка значков, границы отключенных элементов управления.
Mist #c8c8c8 — Разделительные линии, ненавязчивый фон для значков, заполнение пустых ячеек в виде скелета.

Типографика

от 12 до 32px · 5 ступеней

system-ui — замена: -apple-system · начертания 400, 500, 600 · Основной шрифт для пользовательского интерфейса и основного текста — используется для меток навигации, кнопок, текста сообщений, метаданных, полей ввода и всех элементов интерфейса. Компактные размеры 12-13px для метаданных и 15-19px для основного текста создают ощущение плотной новостной ленты. Толщина 400 для основного текста, 500 для элементов навигации и меток кнопок, 600 для выделенных заголовков сообщений и заголовков разделов.
Cahuenga — замена: Charter · начертания 500 · Фирменный декоративный шрифт с засечками для заголовков на уровне продукта (заголовки боковой панели, заголовки регистрационной карточки, главный текст). Средняя толщина и небольшая межстрочная перепад придают ему представительный вид, не создавая ощущения громоздкости; это единственный шрифт, который, помимо оранжевого цвета, сигнализирует о том, что это Substack.
Spectral — замена: Charter · начертания 400 · Шрифт с засечками для длинных постов — используется в читательских залах и в контенте ленты для повышения удобочитаемости редакционных материалов. Немного меньшая межстрочная интервал (1,20) обеспечивает комфортное чтение абзацев, сохраняя при этом компактность, характерную для новостных редакций.

Интервалы и форма

Назначение	Значение
Плотность	плотная
Базовый шаг	8px
Радиус кнопок	9999px
Радиус карточек	12px
Тени	нет — границы вместо теней
Между секциями	32px
Ширина страницы	1200px

ИИ соберёт ваш сайт в стиле Substack и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Substack

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Substack и наполнит его

Похожие стили