Корпоративный сайтЗапущен
neptay.com
Наш корпоративный сайт — медиа, технологии и услуги для клиентов в одной системе, на десяти языках и в двух цветовых темах.
Изнутри
Взгляд на систему.
Главная страница в светлой и тёмной теме, фирменная палитра, шкала шрифтов и десять языков сайта.
Обзор
Наш сайт — первое, что видят клиенты и партнёры. Он представляет все направления Neptay с тем же стандартом качества, который мы обеспечиваем в работе для клиентов.
Бриф
- Проблема
- Представить медиа- и технологическую компанию — два направления и услуги для клиентов — как единый, понятный и убедительный бренд.
- Ограничение
- Десять языков, один из них справа налево, и две цветовые темы.
- Решение
- Дизайн-система на токенах: одна палитра, крупная типографика, серые панели и единственный жёлтый маркер.
Neptay Media & Technology Services — медиа- и технологическая компания. Сайт представляет два направления и услуги для клиентов как единый и понятный бренд.
Дизайн-система построена на фирменной палитре: два светлых нейтральных цвета, два тёмных тона и единственный жёлтый акцент. Один набор токенов управляет светлой темой по умолчанию и тёмной темой, а каждый интерфейс на сайте нарисован кодом — поэтому он всегда соответствует продукту.
Сайт выходит на десяти языках из одного контентного слоя, включая японский и арабский с письмом справа налево. Вёрстка построена на логических свойствах CSS, поэтому чисто отзеркаливается; маршрутизация, метаданные, hreflang и структурированные данные учитывают язык на каждой странице.
Подход
Три принципа, которых мы держались до конца.
Всю работу делает шрифт
Крупные плотные заголовки и спокойные приглушённые лиды. Один заголовок в двух тонах несёт и идею, и её контекст. Ни одна иконка не делает то, что может сделать шрифт.
Один акцент — как маркер
Фирменный жёлтый отмечает действия и акценты — кнопку, выделенную фразу, маленький квадрат. Всё остальное — текст, серые панели и тонкие линии, и в светлой, и в тёмной теме.
Движение подтверждает, а не развлекает
Контент плавно встаёт на место при первом появлении, плитки приподнимаются при наведении, а все анимации останавливаются, если посетитель выбрал уменьшение движения.
Результаты
Что получилось.
Локализация
10языков
Английский, турецкий, немецкий, испанский, французский, португальский, русский, арабский, японский и китайский — с hreflang на каждой странице.
Вёрстка
Слева направо и справа налево
Арабская версия отзеркаливает всю вёрстку через логические свойства, а не через отдельную таблицу стилей.
Цвет
Одна палитра, две темы
Пять фирменных цветов, заданных токенами: светлая тема по умолчанию и тёмная, которую можно включить на любой странице.
Система
Единый набор токенов
Все страницы, обе цветовые темы и все десять языков используют один набор дизайн-токенов.
Стек
- Next.js 15
- React 19
- TypeScript
- CSS design tokens
- Geist
- Vercel