Column

темно-синяя бухгалтерская книга под прохладным рассветом

В Column используется глубокий темно-синий институциональный стиль на почти белом фоне: страница воспринимается прежде всего как надежная поверхность банковского продукта, а уже потом как площадка для разработчиков. Фирменный цвет не один, а скоординированная пара — темно-синий #111a4a для серьезной структуры, мятно-зеленый #44b48b для данных и кода — с одним теплым оранжевым (#ec652b), зарезервированным для акцентных поверхностей с высокой интенсивностью сигнала, таких как карта Brex. В типографике доминирует SuisseIntl, геометрический гротеск, используемый во всем диапазоне толщины от 300 (ссылки) до 600 (дисплей), что придает системе изысканный, редакционный стиль, которого не хватает большинству финтех-компаний. Карты парят на больших белых поверхностях с едва заметными многослойными тенями; большая часть элементов интерфейса плоская, глубина появляется только там, где карта должна ощущаться как физический объект (виджеты транзакций, макеты продуктов). Код и финансовые данные представлены в монохромном, оттенке морской пены — визуальный сигнал о том, что это банк, созданный инженерами для инженеров.

Структура страницы занимает всю ширину, центрирована по центру с широкими боковыми полями (64–15 см на настольных компьютерах). Главный экран представляет собой разделенную компоновку — заголовок и призывы к действию выровнены по левому краю на ширине 25 см, а плавающий виджет транзакций расположен справа на ширине 55 см на фоне полутоновой карты. Под главным экраном разделы чередуются между белым (4 см) и светлым холстом (5 см) с вертикальными промежутками 6 см. Расположение контента соответствует единой 6-колоночной сетке: текстовые блоки занимают 4 колонки (7 см), карточки изображений/товаров — 5–6 колонок с намеренным смещением от сетки. Разделы с описанием характеристик используют 2-колоночный шаблон: текст слева, товар справа. Раздел статистики доверия разбит на 4-колоночную сетку во всю ширину страницы. Логотипы клиентов расположены в одном центрированном ряду с промежутками 48px. Нижний колонтитул имеет компактную двухколоночную компоновку. Навигация представляет собой фиксированную верхнюю панель высотой 62px, прозрачную поверх главного экрана с размытием фона, переходящим в белый цвет при прокрутке. Нет боковой панели, нет мега-меню — выпадающие списки представляют собой простые меню в виде стрелок.

Визуальный ряд минималистичен и функционален — Column полностью избегает стоковых фотографий. Визуальный язык построен на трех источниках: (1) иллюстрации данных в формате SVG, в частности, точечная полутоновая карта мира, выполненная с градиентом от индиго к оранжевому и к бирюзовому, создающая атмосферу глобального масштаба за главным элементом; (2) макеты карточек продуктов — плавающие виджеты, отображающие балансы счетов, детали переводов и фрагменты кода JSON в белых карточках с эффектными тенями; (3) визуализации графиков — свечные или столбчатые диаграммы бирюзового цвета с тонкими соединительными линиями, используемые в разделе доверия/статистики. Полутоновая карта является фирменным визуальным элементом — ее градиентные переходы от #d65620 (оранжевый) через фиолетовый, синий, небесно-голубой, бирюзовый к желтому, создавая спектр, который объединяет всю палитру бренда на единой декоративной поверхности. Иконки имеют равномерную толщину контура 1,5–2px в вариантах#232730 или#a9acb6, с заливкой для активных состояний. Никаких фотографий в стиле лайфстайл, никаких абстрактных 3D-рендеров — сдержанность намеренна, чтобы сосредоточить внимание на продукте и данных.

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

https://column.com

Палитра

Бренд

Indigo Navy #111a4a — Основной фирменный цвет — для закрашенных призывов к действию, активных состояний навигации, заголовка, логотипа. Глубокий фиолетово-синий цвет придает сайту солидный, но при этом насыщенный черный оттенок; в сочетании с белым текстом он создает наиболее уверенную кнопку на сайте.
Seafoam 600 #44b48b — Цвет кода и данных — это фирменный цвет для ключей JSON, идентификаторов и финансовых значений в фрагментах кода. Также используется для точек данных на диаграммах и визуализации роста.
Seafoam 700 #167e6c — Более тёмный оттенок морской пены для обводки, линий диаграмм и акцентов значков в контексте данных. Закрепляет шкалу морской пены на более тёмном фоне.
Seafoam 400 #94efb7 — Выделенный фрагмент кода — строковые значения, URL-адреса, конечные точки API в блоках кода. Самый светлый цвет морской пены, читается как моноширинный шрифт с зеленоватым оттенком.
Deep Sea #023247 — Декоративная обводка и акцент на диаграмме — насыщенный бирюзовый цвет, используемый в SVG-иллюстрациях и визуализации данных наряду со шкалой цвета морской пены.

Нейтральные

Midnight Ink #011821 — Темная поверхность и выделенный текст — фон карточек товаров, высококонтрастный основной текст. Ближе к серому цвету с холодным сине-зеленым оттенком; используется в качестве основы для темного режима, когда необходимо инвертировать какой-либо раздел.
Slate Ink #3b3e47 — Второстепенный заголовок и основной текст — немного теплее, чем «Полуночные чернила», используется там, где чистый черный цвет кажется слишком резким на светлом холсте.
Steel #7c7f88 — Основной текст и текст ссылок — преобладающий приглушенный цвет (245 раз встречается в основном тексте). Нейтральный серо-голубой цвет, который воспринимается как спокойный, никогда не блеклое изображение.
Fog #a9acb6 — Обводка иконок, третичные границы, текст-заполнитель. Средне-серый цвет, который отделяет текст, не конкурируя с ним.
Mist #cbcccf — Основной текст — подписи, оговорки, мелкий шрифт. Читается на белом фоне, но визуально становится менее заметным.
Silver Lining #e3e4e8 — Границы карточек, границы полей ввода, разделительные линии. Этот структурный тонкий цвет используется там, где необходимо разделить две поверхности без тени.

Типографика

от 10 до 60px · 10 ступеней

SuisseIntl — замена: Inter · начертания 300, 400, 500, 600 · Основной шрифт — используется для всех заголовков, основного текста, кнопок, навигации, ссылок и текста карточек. Уникальный геометрический гротеск придает Column отличительный редакционный стиль, выделяющий его среди финтех-компаний, работающих только с Inter-only. Толщина 600 при 52–60px для заголовков, 500 для подзаголовков, 400 для основного текста, 300 для ссылок с низким уровнем акцента.
SuisseIntlMono — замена: JetBrains Mono · начертания 400 · Моноширинный шрифт, аналогичный SuisseIntl, используется для технических меток, идентификаторов API и встроенных данных в элементах пользовательского интерфейса. Сохраняет те же пропорции, что и SuisseIntl, поэтому моноширинный и пропорциональный текст корректно выравниваются в смешанных контекстах.
SFMono — замена: Fira Code · начертания 400 · Отображение фрагментов кода — отображается в примерах JSON и блоках документации API. Используется оттенок морской пены для визуального различения кода от текста пользовательского интерфейса.

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

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

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

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

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

Column

Палитра

Типографика

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

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

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