Subframe

Графический чертеж на теплом пергаменте. Дизайнерская бумага, где каждый штрих — это либо графит, либо ластик, никогда не краска — глубина достигается за счет толщины линий и редких засечек

Subframe — это монохромная рабочая поверхность дизайнера: тёплый кремовый холст, графитово-чёрные чернила и полное отсутствие хроматических акцентов. Весь интерфейс воспринимается как единый материал — бумага, карандаш и тень — с одним смелым типографическим приёмом: изысканный шрифт с засечками (Instrument Serif) на фоне систематического шрифта без засечек (Inter), придающий заголовкам редакционную серьёзность. Поверхности плоские и обрамлённые, а не приподнятые; глубина достигается за счёт тонких разделителей в #e5e7eb и вставных бликов на тёмных элементах управления, а не теней. Плотность щедрая: широкий вертикальный ритм (48–64px промежутков между секциями), центрированные макеты максимальной ширины и большое пространство вокруг текста. Единственный цвет — это контраст между почти белым и почти чёрным, что делает тёмную кнопку самым ярким элементом на каждой странице, а полоса логотипов партнёрских брендов в серых тонах — единственным декоративным визуальным элементом.

Центрированные макеты максимальной ширины (1200px) с щедрым вертикальным ритмом. Главный элемент представляет собой единый центрированный блок: темный сегментированный элемент управления в верхней части, крупный заголовок Inter, подзаголовок в одну строку и две кнопки рядом (заполненные + полупрозрачные) — без бокового изображения, без разделения макета. Под главным элементом — центрированная полоса логотипа в оттенках серого. Каждый последующий раздел следует тому же шаблону: блок заголовка и подзаголовка, выровненный по левому краю, затем рамка демонстрации продукта во всю ширину с промежутками 48–64px между разделами. Навигация минимальна: верхняя панель с центрированными ссылками и действиями, выровненными по правому краю, без боковой панели, без мега-меню. Страница читается сверху вниз как серия центрированных утверждений, каждому из которых отведено достаточно места — макет больше похож на редакционное портфолио, чем на насыщенную страницу продукта.

Визуальный ряд минималистичен и функционален. Система использует два визуальных режима: (1) скриншоты продуктов с рамками и макеты пользовательского интерфейса, заключенные в рамки радиусом 24px — на них отображаются реальные компоненты интерфейса (таблицы, кнопки, формы), отрисованные в той же монохромной палитре, благодаря чему скриншоты выглядят органично вписанными в страницу; (2) единая полоса логотипов партнеров в оттенках серого в качестве социального доказательства, отрисованная плоско, без цвета и контейнеров. Здесь нет лайфстайл-фотографий, абстрактных градиентов, 3D-рендеров. Единственный иллюстративный элемент — это темная «плитка» продукта, расположенная по центру на теплом сером фоне с иконкой бренда — она воспринимается как демонстрация продукта, а не как украшение. Все изображения занимают текстовую верстку, где визуальный вес несет текст.

Монохром Минимализм Редакционный

https://www.subframe.com

Палитра

Нейтральные

Page Canvas #fafafa — Фон страницы, открытка на холсте, светлый текст на темных поверхностях — теплый белый цвет, который лежит в основе всей монохромной системы.
Hairline Border #e5e7eb — Разделители, границы карточек, рамки изображений, контуры значков — наиболее часто используемый тип обводки в системе, определяет пространственную структуру.
Card Surface #ededed — Приподнятый фон для карточек, дополнительная поверхность — располагается на ступень выше холста, создавая группировку без теней.
Divider Mid #dadada — Разделители средних тонов и переходы между секциями
Graphite #242424 — Высококонтрастная нейтральная заливка для основных кнопок на светлых поверхностях.
Ink Black #171717 — Основной текст, заголовки, контуры иконок — немного круче, чем Graphite, используется для типографики, а не для поверхностей.

Типографика

от 12 до 128px · 7 ступеней

Inter — замена: Inter (Google Fonts) · начертания 500, 600, 700 · Системный интерфейс без засечек — навигация, основной текст, кнопки, подзаголовки, заголовки разделов. Вес 500 для основного текста и элементов управления, 600 для подзаголовков и акцента навигации, 700 для заголовков разделов. Сильное отрицательное межбуквенное расстояние сжимает геометрические формы при любом размере, придавая интерфейсу сжатый, технический вид.
Instrument Serif — замена: Playfair Display · начертания 400 · Шрифт с засечками, предназначенный только для заголовков и редакционных материалов. Толщина 400 с межбуквенным интервалом -0.025em создает элегантность, тяготеющую к курсиву, которая контрастирует с индустриальной геометрией Inter — фирменным приемом: одно слово или фраза с засечками внутри страницы без засечек, выступающее в качестве визуального знака препинания, а не стиля заголовка.
Fragment Mono — замена: JetBrains Mono · начертания 400 · Акцентный моно для встроенных элементов, похожих на код, меток тегов и технических выносок. Используется экономно — появляется в списках функций и встроенных аннотациях, где инструмент проектирования хочет обозначить «это машинный вывод».

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

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

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

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

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

Subframe

Палитра

Типографика

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

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

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