Steep
Аналітика шрифтів із засічками на папері теплого відтінку
Steep представляє аналітику як редакційний матеріал - заголовки Signifier із засічками ширяють над майже монохромним білим полотном, а єдиний теплий персиковий акцент (#fbe1d1) підкреслює в іншому ахроматичну систему. Сторінка читається як розворот продуктового журналу: великий курсивний шрифт, достатній простір для тексту, великі картки з м'якими краями радіусом 24px та елементи керування у формі таблеток, які щільно прилягають до поверхні. Компоненти здаються спокійними та невагомими — тіні ледь помітні, межі тонкі, а колір використовується для функціонального акценту (персикова виноска, темно-коричневий напис на персиковому фоні). Поверхні продукту (таблиці регіонів, діаграми активації, конструктори ІІ) представлені як плаваючі елементи навколо заголовка, а чи не вкладені в оболонку панелі управління.
Модель сторінки має максимальну ширину 1200px, центровану по центру, головні розділи займають майже всю ширину сторінки, але залишаються у межах контейнера. Головний шаблон являє собою центрований заголовок з великим шрифтом із засічками, підзаголовок і пару кнопок-«таблеток», оточені чотирма плаваючими картками з описом продукту (таблиця регіонів вгорі зліва, реєстраційна картка праворуч, діаграма активації внизу зліва, редактор AI внизу. Розділи чергуються між фонами Paper White та Card Mist, створюючи спокійний ритм без сильного розмаїття. Розділи з описом функцій використовують двоколоночне компонування тексту та інтерфейсу користувача з великими вертикальними проміжками 80px. Навігація є єдиною прозорою верхньою панеллю (без фону, рамки і тіні) з логотипом зліва, посиланнями навігації по центру та двома закликами до дії (текстове посилання + заповнена кнопка-«таблетка») праворуч. Загальна щільність розміщення простора - сторінка "дихає" між розділами, і контент ніколи не тіснить краю.
Візуальне оформлення орієнтоване на продукт, а не на спосіб життя: плаваючі фрагменти інтерфейсу користувача (таблиці регіонів з даними в 5 рядків, лінійні діаграми, що показують активацію в серпні-листопаді, радіальні кільця прогресу, поля введення ІІ) розташовані у вигляді обрізаних скріншотів. Жодних фотографій, ілюстрацій, абстрактної графіки. Усі візуальні елементи продукту розміщені на білих плаваючих картках із тонкими рамками та м'якими тінями. Кола аватарів несуть невеликий покажчик напряму курсору — візуальний мотив, що сигналізує про взаємодію реального часу. Головна композиція являє собою колаж з тексту та інтерфейсу користувача, а не центрований заголовок з стокове фото.
Палітра
Нейтральні
- Ink Black
#17191c— Основний текст, заповнений фон кнопки, логотип навігації – єдина темна поверхня системи; всі заклики до дії та заголовки в основному тексті відображаються на цьому майже чорному тлі. - Paper White
#ffffff— Полотно сторінки, текст кнопок, рельєфні поверхні карток — домінуючий фоновий тон, який несе приблизно 76 частотних точок. - Mist Gray
#f2f2f3— Поверхні карток, додаткові фони, заливка полів введення – непомітний шар під папером для вкладеного контенту. - Fog White
#fafafb— Додатковий фон сторінки для розділів і поверхонь, що чергуються, при наведенні курсору — на один крок вище паперу для створення ледь помітних варіацій смуг. - Slate Gray
#777b86— Колір посилання, приглушений допоміжний текст, текст у нижньому колонтитулі — холодний, ненасичений сірий колір між основним текстом і текстом, який не можна увімкнути. - Ash Gray
#979799— Додаткові мітки, теги категорій (Маркетинг, Фінанси, Продажі) — на один крок світліший за колір посилань.
Друкарня
від 15 до 90px · 8 ступенів
- Signifier — заміна: GT Sectra · зображення 400 · Шрифт із засічками для заголовків та заголовків — використовується виключно для H1/H2 у трьох розмірах; товщина шрифту залишається на рівні 400 (звичайний) за будь-якого масштабу, що є фірмовим вибором: шрифт із засічками швидше шепоче, ніж кричить, як жирний шрифт.
- Sohne — заміна: Inter · зображення 400, 430, 450, 480, 500 · Основний шрифт, шрифти для інтерфейсу та навігації - універсальний, що охоплює все, від метаданих до підзаголовків; напівступінчасті варіанти товщини (430, 450, 480) створюють тонку ієрархію без переходу до жирного шрифту.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 8px |
| Радіус кнопок | 9999px |
| Радіус карток | 24px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Steep і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Newformcap — Редакційна газета у гримерці
- Claude — Надрукований на теплому пергаменті артефакт — чорнило на кістяному папері, глина як єдине колірне дихання
- 11x– Digital workers — Кінематографічна редакційна пустеля – панорамні фотографії місцевості на тлі монументальних заголовків із засічками, де сторінка читається як розворот розкішного журналу
- Revolut — Монохромна редакційна робота, заснована на фотографії хмар — біле чорнило, гудзики-пігулки, одна синя смужка кольору у світі, в іншому виконаному в сірих тонах
- Scheduling — Редакційна фарба на кремовому папері
- Titan — архів у теплих тонах монохром
- Programa — Швейцарська дизайн-студія опівдні. Біла стіна галереї освітлена єдиною жовтою настільною лампою — все у відтінках сірого, поки якась кнопка, значок чи акцент не привернуть увагу, і тоді цей єдиний жовтий акцент визначає всю кімнату
- Sana Agents — Лаймова іскра на білому тлі в редакційній статті
- Visual — Теплий редакційний самвидав. Кремовий папір, плакати із засічками, монохромні нотатки на полях, один жовтий маркер
- Midday — Редакційна брошура на пергаменті — заголовок із засічками 72px на тлі теплого кам'яного фону, основний текст без засічок з інтервалом, елементи керування у формі таблеток, відсутність тіней
- Chat for impact — Клініка лісової зелені з кімнатами пастельних тонів
- Handhold — Теплий пергамент під ледве чутними засічками — редакційний розворот, набраний вручну без хроматичних шумів, де найтонший шрифт із засічками завтовшки 200 передає весь голос