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-рендерів — стриманість навмисна, щоб зосередити увагу на продукті та даних.
Палітра
Бренд
- 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-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- dope.security — Опівнічний термінал з фіолетовими маяками
- Leonardo — Перевернута редакційна галерея. Музей з чорними стінами, де фіолетові заголовки виступають як настінні інсталяції, а створені за допомогою ІІ портрети висять у щільній сітці внизу
- VEED — Біла стіна галереї із неоново-зеленими кнопками запалювання
- Craft Docs — Цифровий колаж для скрапбукінгу. Дизайн нагадує продуманий, приємний на дотик альбом для записів, де структуровані цифрові нотатки поєднуються з м'якими, органічними текстурами
- Letter — Приватна галерея з артефактами зі сховища, що переливаються. Виставковий зал із чорними стінами, де заголовки із засічками ширяють над хромованими скульптурами на тонованих стінах галереї
- Railway — Космічний Опівнічний Експрес. Спокійна, захоплююча подорож темним, залитим зоряним світлом простору, що спрямовується чіткими сигналами
- Garden Eight — Монументальна редакційна стаття на кремовий папір. Заголовок із засічками 215px самотньо розташований на теплому пергаменті, оточений ширяючими скульптурними формами та негативним простором, що нагадує морське повітря — сторінка поводиться як обкладинка художньої монографії, а не як панель приладів
- Steep — Аналітика шрифтів із засічками на папері теплого відтінку
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- AI for Business — Бруталістський редакційний виставковий зал у теплих сірих тонах