Medium

кремово-белая газета в золотой час

Medium функционирует как литературный читальный зал, перенесенный в веб: теплый кремовый фон (#f7f4ed) заменяет стерильный белый цвет, характерный для SaaS, благодаря чему длинные тексты ощущаются как печатная страница. Визуальная система агрессивно монохромна — почти все поверхности пользовательского интерфейса, текст и границы находятся в узкой полосе теплых серых оттенков от #242424 до #6b6b6b — поэтому внимание читателя полностью сосредоточено на контенте. Единственным фирменным жестом является заголовок с засечками (GT Super, 120px, толщина 400, межбуквенный интервал -0.055em), преднамеренный антитрендовый выбор: переходный книжный шрифт с засечками в масштабе для отображения, едва заметный, а не смелый геометрический шрифт без засечек, сигнализирует: «Мы публикуем книги, а не программное обеспечение». Кнопки представляют собой полные «пилюли» почти черного цвета — единственные сплошные чернила на странице.

Главная страница в два столбца: слева ~55% расположены заголовок, подтекст и призыв к действию вертикально с большим внутренним интервалом; справа ~45% находится панель с иллюстрациями. Левый столбец выровнен по левому краю (а не по центру), что привязывает страницу к оси чтения. Под главной страницей страница представляет собой единую полосу кремового цвета во всю ширину с центрированными ссылками в нижнем колонтитуле. Никаких карточных сеток, разделов с функциями, чередующихся полос на главной странице — главная страница И ЕСТЬ страница. Плотность контента намеренно низкая: один заголовок, одно предложение, одна кнопка, одно изображение. Страница — это обложка, а не панель управления.

Иллюстрации носят редакционный и эпизодический характер, а не систематический. На главной странице используется одна нарисованная от руки иллюстрация (зеленый цветок, геометрическая рука, линии созвездий) в свободной, слегка наивной манере. Иллюстрации выглядят как заказные работы, которые меняются в зависимости от сезона, а не как работа из постоянной библиотеки. На главной странице нет фотографий. Иконки на главной странице отсутствуют — всю работу выполняют текстовый логотип и текст. Визуальный язык в основном ориентирован на текст, а иллюстрации служат пунктуацией.

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

https://medium.com

Палитра

Нейтральные

Newsprint Cream #f7f4ed — Холст страницы, фон главного окна, фон разделов — теплый, слегка кремовый оттенок, который создает ощущение печатного, а не цифрового интерфейса.
Paper White #ffffff — Поверхности карт, выступающие панели, поля ввода форм и любые поверхности, которые необходимо отделить от кремового холста.
Ink #242424 — Основной текст, текст, ссылки, заголовки — чуть теплее чисто черного, хорошо смотрится на кремовом фоне.
Body Gray #333333 — Дополнительный цвет текста и основной цвет по умолчанию используются там, где требуется цвет немного светлее, чем чернильный, без потери контраста.
Button Black #191919 — Поддерживается нейтральный цвет для второстепенных элементов пользовательского интерфейса, разделителей и приглушенных подписей. Не следует назначать его основным цветом для призывов к действию.
Marginalia Gray #6b6b6b — Поддержка нейтрального цвета для дополнительного пользовательского интерфейса, разделителей и приглушенных меток.

Типографика

от 13 до 120px · 5 ступеней

medium-content-sans-serif-font — замена: Inter · начертания 400 · шрифт medium-content-sans-serif — обнаружен в извлеченных данных, но не описан ИИ.
GT Super — замена: Playfair Display · начертания 400 · Заголовки и основной текст — переходный книжный шрифт с засечками в экстремальном масштабе с узким межбуквенным расстоянием и межстрочным интервалом 0,83. Выбор толщины 400 (не жирный) в 120px — это фирменный знак: работу выполняют формы букв, а не толщина. Отрицательное межбуквенное расстояние сужает оптические зазоры, благодаря чему «Человеческие истории и идеи» воспринимаются как единый типографический блок.
Söhne — замена: Inter · начертания 400 · Шрифт UI sans-serif используется для навигации, кнопок, подзаголовков и небольших заголовков. Диапазон 13–14px предназначен для меток навигации и кнопок; 20–22px — для подзаголовков и второстепенного текста в заголовке. Чистый гротеск с гуманистическими пропорциями — читаемый при малых размерах, ненавязчивый при больших.

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

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

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

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

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

Medium

Палитра

Типографика

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

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

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