Телеграм, WhatsApp +380637610482
Валерий Данюк
Валерий ДанюкразработчикРазработка ИИ‑инструментов для бизнеса. Качественно. Недорого.Написать в Telegram
Bpco — превью сайта в этом стиле

Bpco

Типографический манифест из бетонной плиты. Черно-белый пресс-кит, где увеличенный шрифт Helvetica имитирует фотографию, а единственная текстура — это один лист скомканной бумаги под основным шрифтом

Компания Bigpicture использует монохромную систему редактирования, которая рассматривает веб-страницу как печатный пресс-кит, разложенный на необработанной бумаге. Интерфейс полностью лишен хроматических цветов и полагается исключительно на черные чернила, белое пространство, тонкие линии и единую текстуру мятой бумаги для создания атмосферы. Типографика — это продукт: заголовки достигают 274px шрифта Helvetica Neue 700 с агрессивным отрицательным межбуквенным расстоянием, делая текст доминирующей визуальной массой на каждом экране. Моноширинные подписи ([01-N ВВЕДЕНИЕ], КРЕАТИВ/АГЕНТСТВО) выступают в качестве подписей в печатном стиле, а четырехконечные блестящие значки служат единственным украшением между разделами. Макет щедрый и напоминает самиздат — 72px промежутки между разделами, 144-250px горизонтальные отступы и блоки изображений во всю ширину с 288px углами позволяют странице дышать, как стене галереи, а не как программному продукту.

Максимальная ширина ~1440px, центрированная с горизонтальным отступом 40–144px в зависимости от плотности разделов. Герой — это изображение во всю ширину страницы с наложенным текстом. Под изображением контент чередуется между центрированными текстовыми блоками и типографским оформлением от края до края. Нижняя часть 60% страницы представляет собой длинный прокручиваемый манифест, где крупный шрифт заполняет всю ширину области просмотра построчно, разделенный рядами блестящих разделителей. Навигация представляет собой плавающую панель, центрированную в верхней части области просмотра, а не панель во всю ширину. Нижний колонтитул — это одна полоса с тонкой рамкой.

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

Палитра

Нейтральные

  • Press Ink #121212 — Основной текст, тонкие линии, границы разделов, обводка иконок, текст нижнего колонтитула — единый темный тон, несущий в себе 95% всей информации переднего плана.
  • Paper White #ffffff — Холст страницы, картонные поверхности, фон навигационной панели, поверхности с рамками заголовка.
  • Newsprint #f1f1f1 — Нежная заливка поверхности, мягкие границы, тонкие разделители, тон, скрытый за текстурой мятой бумаги.
  • Foil Gray #e1e1e1 — Светлые рамки, акценты в виде обводки иконок, дополнительные разделители.
  • Mute Gray #c5c5c5 — Вторичный текст, состояние инвалидности, низкоконтрастные поверхностные линии

Типографика

от 13 до 274px · 6 ступеней

  • Helvetica Neue — замена: Inter · начертания 400, 500, 700 · Универсальный инструмент — основной текст на уровне 17px/1.29, заголовки для отображения на экране на уровне 75–274px с межбуквенным расстоянием -0.04em на самых больших размерах, метки навигации на уровне 15px
  • PPSupplyMono — замена: JetBrains Mono · начертания 400 · Метатеги и подписи в скобках, такие как [01-N ВВЕДЕНИЕ], а также теги разделов (РЕКЛАМА, КРЕАТИВ/АГЕНТСТВО, ОФЛАЙН-МАРКЕТИНГ) — это единственные типографические акценты, которые нарушают монотонность шрифта Helvetica.
  • PPSupplySans — замена: Inter · начертания 400 · Второстепенная навигация и микротекст в нижнем колонтитуле, где требуется другой шрифт без засечек.

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

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

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

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

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

  • Steep — Аналитика шрифтов с засечками на бумаге теплого оттенка
  • Newformcap — Редакционная газета в гримерке
  • Claude — Отпечатанный на теплом пергаменте артефакт — чернила на костяной бумаге, глина как единственное цветовое дых…
  • 11x– Digital workers — Кинематографическая редакционная пустыня — панорамные фотографии местности на фоне монументальных заголовков…
  • Revolut — Монохромная редакционная работа, основанная на фотографии облаков — белые чернила, пуговицы-таблетки, одна с…
  • Scheduling — Редакционная краска на кремовой бумаге
  • Titan — архив в теплых тонах монохром
  • Programa — Швейцарская дизайн-студия в полдень. Белая стена галереи освещена единственной желтой настольной лампой — вс…
  • Sana Agents — Лаймовая искра на белом фоне в редакционной статье
  • Visual — Теплый редакционный самиздат. Кремовая бумага, плакаты с засечками, монохромные заметки на полях, один желты…
  • Midday — Редакционная брошюра на пергаменте — заголовок с засечками 72px на фоне теплого каменного фона, основной тек…
  • Chat for impact — Клиника лесной зелени с комнатами пастельных тонов