Superlist

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

Superlist использует язык продуктивности в полуночно-фиолетовых тонах: глубокий баклажановый цвет, теплый коралловый в качестве единственного основного цвета и крупные заголовки без засечек, которые передают всю атмосферу. Интерфейс создает ощущение сосредоточенной работы поздним вечером — тихий, многослойный и уверенный, где цвет используется только в качестве функциональных знаков препинания на призывах к действию, активных состояниях и ключевых моментах. Поверхности накладываются друг на друга в едва заметных темных тонах с фиолетовым оттенком (#181824 → #26253b), избегая чисто черного цвета, чтобы глубина ощущалась теплой, а не стерильной. Компоненты имеют щедрые закругленные формы (20px карточки, кнопки-таблетки), мягкие тени и «дышат» через удобные промежутки 10–16px, а не через плотные сетки. Голос заголовка — это все: толщина 600 при 70–88px с плотным межбуквенным расстоянием -0.02em рассматривает текст как типографический, а не интерфейсный — он ближе к редакционному тексту, чем к SaaS.

Темные разделы, занимающие всю ширину страницы, с центрированными контейнерами контента максимальной ширины. Главный раздел расположен вертикально по центру и содержит заголовок, подтекст и призыв к действию (CTA), за которым следует большой скриншот продукта, перекрывающий следующий раздел. Последующие разделы чередуются между центрированными текстовыми блоками и сетками из карточек. В разделе отзывов используется сетка из 3 колонок с карточками отзывов и 16 промежутками. Навигация представляет собой единую верхнюю панель с логотипом слева, ссылками по центру и действиями авторизации справа — без фиксированной боковой панели и мега-меню. Промежутки между разделами достаточно большие (16), создавая просторный, редакционный ритм, а не плотную сетку продуктов.

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

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

https://superlist.com

Палитра

Бренд

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

Нейтральные

Aubergine Canvas #181824 — Фон страницы, основной холст — теплый темный оттенок заменяет чистый черный, благодаря чему пользовательский интерфейс выглядит многослойным, а не плоским.
Elevated Plum #26253b — Поверхности карточек, поля ввода, навигационные контейнеры — на один шаг легче, чем холст, для создания глубины без видимой границы.
Pure White #ffffff — Основные заголовки, текст кнопок, обводка иконок — максимальный контраст на темном холсте.
Fog Text #696f81 — Основной текст, второстепенные заголовки, приглушенные рамки — контрастность 7:1 для комфортного чтения на фоне баклажанового цвета.
Ash Text #8e8da0 — Поддерживается нейтральный цвет для второстепенных элементов пользовательского интерфейса, разделителей и приглушенных подписей. Не следует назначать его основным цветом для призывов к действию.
Mist Highlight #a3a3a7 — Едва заметные границы, разделители, неактивные элементы навигации — едва уловимый нейтральный оттенок, который всё ещё хорошо читается на фоне холста.

Типографика

от 12 до 88px · 9 ступеней

sans-serif — замена: Inter · начертания 400 · sans-serif — обнаружен в извлеченных данных, но не описан ИИ.
Haffer XH SemiBold — замена: Inter Tight · начертания 400, 600 · Основной шрифт для отображения и заголовков. Используется в размере 70–88px для заголовков-«героев» с межбуквенным расстоянием -0.02em и толщиной 600. Узкое межбуквенное расстояние и большая высота строчных букв придают заголовкам редакционный вес, благодаря чему темный интерфейс больше напоминает обложку журнала, чем панель управления. Замените на Inter Tight или General Sans с полужирным начертанием.
Jersey 10 — замена: Anybody · начертания 400 · Крупный декоративный шрифт для акцентных цифр и выделений. Используется экономно при очень больших размерах для создания типографических акцентов. Можно заменить шрифтом Anybody или Cabinet Grotesk.

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

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

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

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

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

Superlist

Палитра

Типографика

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

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

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