
Seline Analytics
Тихий аналитический стол на тёплой бумаге
Seline размещен на теплом каменном фоне (#fafaf9) с единственным ярким голубым акцентом — все остальные цвета нейтральны и взяты из шкалы оттенков камня Tailwind. Заголовки выполнены с использованием специально разработанного геометрического шрифта без засечек (roobert) толщиной 400 с узким отрицательным межбуквенным расстоянием, что придает тексту неторопливую, почти шепотную уверенность, контрастирующую с обычным кричащим стилем SaaS. Поверхности пользовательского интерфейса представляют собой плоские белые карточки, парящие над теплым фоном благодаря одной мягкой тени 16px-размытия; границы выполнены тонкими линиями 1px-каменного оттенка, щедро используемыми в качестве основного структурного элемента вместо тяжелых разделителей или панелей. Макет дышит: контент максимальной ширины, центрированный на щедром вертикальном ритме, с интерактивными элементами управления в форме таблеток, иллюстрацией талисмана для придания индивидуальности и скриншотами панели данных в качестве доказательства продукта. Общее впечатление — это редакционная аналитика: спокойная, монохромная, уверенная, где синий призыв к действию является самым ярким элементом на странице благодаря намеренной сдержанности всего остального.
Страница имеет максимальную ширину, центрирована примерно на 1200px с большим вертикальным пространством. Герой представляет собой двухстрочный текстовый блок, выровненный по левому краю, с одной выделенной фразой («простой и действенный») голубого цвета, за которой следует строка с двумя призывами к действию (голубая таблетка + призрачная таблетка), затем строка логотипов партнеров в оттенках серого, затем строка рейтинга доверия, а затем полноэкранный плавающий предварительный просмотр панели управления, слегка перекрывающий следующий раздел. Ниже линии сгиба: чередующиеся строки отзывов в одноколоночной сетке, затем полноэкранные разделы с описанием функций, текстом, выровненным по левому краю, и центрированными визуальными элементами продукта. Навигация представляет собой минималистичную верхнюю панель — логотип слева, центрированные ссылки навигации, вход в систему + голубой призыв к действию справа — с плавающим кластером аватаров в середине навигации в качестве подтверждения личности. Промежутки между разделами широкие (96px), чтобы создать редакционный ритм, а не плотное нагромождение информации.
Визуальный язык доминируют скриншоты пользовательского интерфейса продукта — предварительный просмотр панели управления выполнен в виде фотографии, отрисованной с использованием фильтра контраста оттенков серого (1) (0,94), который приглушает цвета данных до монохромного оттенка. Единственная человеческая фигура — это линейный стикер-талисман (персонаж в капюшоне), нарисованный в стиле SVG только с контурами, размещенный один раз в каждом разделе в качестве игривого противовеса аналитическому контенту, с мягкой тенью для создания эффекта глубины, как у стикера. Логотип и глифы бренда представляют собой небольшие черные искры/пламенные знаки. Фотографии отсутствуют — нет снимков в стиле лайфстайл, нет командных фотографий, нет изображений окружающей среды. Объект (панель управления) — главный герой. Все декоративные значки выполнены в стиле контура 1px либо в #0c0a09, либо в #3ba6f1, никогда не заполняются.
Палитра
Бренд
- Cyan Signal
#3ba6f1— Основной призыв к действию, активные ссылки, обводка иконок бренда — единственный цветовой акцент на странице, используемый экономно, чтобы привлечь внимание к действию. - Cyan Edge
#3398e1— Синий цвет используется для выделения контуров действий, подписей к ссылкам и интерактивных элементов. Не следует использовать его в качестве основного цвета для призывов к действию.
Нейтральные
- Ink Black
#0c0a09— Основные заголовки, выделенный основной текст, выразительные иконки — почти черный цвет с теплым оттенком. - Stone Canvas
#fafaf9— Фон страницы — тёплый, кремовый оттенок, который воспринимается как бумага, а не как белый цвет экрана. - Pure White
#ffffff— Поверхности карт, выступающие панели, заливка полей ввода — по умолчанию плоские и без теней. - Stone Border
#e8e6e5— Тонкие границы на карточках, в навигации и полях ввода — это основной структурный элемент, а не разделители. - Stone Muted
#d6d3d1— Дополнительные рамки, едва заметные оттенки фона, декоративные разделители. - Ash Gray
#a8a29e— Вспомогательный текст, обводка иконок, отключенные состояния — читаемый, но неактивный.
Типографика
от 10 до 52px · 5 ступеней
- Roobert — замена: Inter Tight or Satoshi · начертания 400, 500 · Шрифт для заголовков и оформления текста — уникальный геометрический шрифт без засечек с минимальным отрицательным межбуквенным расстоянием (-0.025em на 32px, -0.021em на 52px). Начертание 400 на 52px — визитная карточка шрифта: нетрадиционный, едва уловимый, но авторитетный, но при этом сдержанный. Заголовки занимают своё место, не крича.
- Inter — замена: Inter · начертания 400, 500, 600 · Основной шрифт для текста, навигации, пользовательского интерфейса и заголовков — нейтральный универсальный шрифт для всего неэкранного текста. 14px с толщиной 400 и межстрочным интервалом 1,64 является преобладающим размером для основного текста (частота 1174). Положительное межбуквенное расстояние (0.004em) при малых размерах обеспечивает читаемость плотного пользовательского интерфейса.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | просторная |
| Базовый шаг | 8px |
| Радиус кнопок | 9999px |
| Радиус карточек | 10px |
| Тени | мягкие тени |
| Между секциями | 96px |
| Ширина страницы | 1200px |
ИИ соберёт ваш сайт в стиле Seline Analytics и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- ElevenLabs — Фоторепортаж в теплых кремовых тонах с ненавязчивыми заголовками. Блокнот в стиле Баухаус — бумага цвета яич…
- Awesomic — Редакционная цинковая сетка с оранжевыми знаками препинания, напоминающими конфетти
- Monad — редакционный технический журнал на теплом пергаменте
- Dub — матовая панель управления Link на рисовой бумаге
- Notion — Теплый бумажный блокнот под полуденным солнцем
- Anthropic — Научный полевой журнал на теплом пергаменте — спокойные поверхности цвета слоновой кости, редакционные загол…
- Calendly — Темно-синие чернила на холодном мраморе
- Augen Pro — Презентация Apple на белом фоне — клинический, невесомый, электрический синий как единственный акцент в моно…
- Antimetal — Редакционная хроника на кремовой бумаге — тихое утро в научном журнале, где сдержанность свидетельствует об …
- Perk — Электрический лайм на теплой пергаментной бумаге
- Ditto — Залитая солнцем мастерская по созданию образцов полевых цветов. Теплые кремовые поверхности, яркий желтый ос…
- Officevibe — Редакционный журнал на бумаге теплого кремового цвета. Представьте себе вдумчивое эссе по управлению персона…