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

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 — Редакционный журнал на бумаге теплого кремового цвета. Представьте себе вдумчивое эссе по управлению персона…