
INO
Музейная витрина в тишине — каждый экспонат парит в белом пространстве, словно единый объект за стеклом, обрамленный почти черным едва слышным шрифтом
INO функционирует как почти монохромная ювелирная галерея: белоснежный холст, один теплый, почти черный цвет чернил и практически полное отсутствие цветовых выражений. Визуальная система рассматривает каждое кольцо как музейный экспонат — клинические фотографии продукции, парящие в обширном негативном пространстве, с иерархией, построенной за счет положения, межбуквенного расстояния и объема белого цвета, а не за счет масштаба шрифта или цвета. Навигация расположена внизу страницы в виде четырех точек с подписями (заполненных или пустых), что является намеренным переворотом по сравнению с традиционной верхней панелью в электронной коммерции. Сам фирменный знак представляет собой набор концентрических контуров колец, повторяющих форму продукта и выступающих в качестве типографической скульптуры, а не логотипа.
Полноэкранный холст без ограничения максимальной ширины контента. Главный экран занимает всю ширину страницы, при этом фотография и графика разделены поровну (50/50). Сетки товаров отображаются в виде трехколоночных строк с большим горизонтальным отступом от края области просмотра. Нижняя навигация центрирована и прикреплена к нижнему колонтитулу страницы, а не закреплена. Разрывы разделов используют либо полноэкранную редакционную фотографию, либо чистое пустое пространство — никогда не цветную полосу, разделительную линию или градиент. Вертикальный ритм свободный: 80/1/1 между основными разделами, страница «дышит», а не «наполняется» контентом. Нет боковой панели, нет мега-меню, нет верхней панели заголовка — логотип «INO» расположен только в верхнем левом углу главного экрана.
Сосуществуют два различных режима отображения изображений: клиническая предметная фотография на плоском светло-сером бесшовном фоне (каждое кольцо сфотографировано в центре, без рук, без реквизита для стилизации, без теней на поверхности — объект является главным героем) и повествовательные редакционные изображения (кольцо, лежащее в коробке, выложенной травой, рука, держащая цепочку), обработанные как обесцвеченные, полноэкранные редакционные фрагменты. Изображения продукта служат для карточек продукта; редакционные изображения передают настроение бренда. Оба варианта монохромны или почти монохромны — трава на главном изображении — единственное место, где появляется зеленый цвет, и даже она приглушена до лесного оттенка. Иконки в интерфейсе не используются — концентрический кольцевой знак заменяет всю иконографию.
Палитра
Нейтральные
- Obsidian Ink
#212123— Нейтральные состояния формы, текст значка и сдержанная обратная связь пользовательского интерфейса, где цветовая гамма должна оставаться ненавязчивой. - Bone
#ffffff— Холст страницы, картонные поверхности, инвертированный текст на темном фоне. Доминирующая поверхность; почти весь сайт расположен здесь. - Carbon
#000000— Заливка иконок, декоративные графические обводки, заливка активного состояния для индикатора навигационной точки. Используется экономно для максимального тонального контраста с цветом «костяной кости». - Ash
#999999— Границы со средним контрастом, контрольные контуры и структурные разделители. - Pebble
#a6a6a7— Приглушенный вспомогательный текст, тонкие разделители основного текста, вторичные метаданные. Самый светлый функциональный серый цвет — используется для ценников и сопроводительного текста, который должен отступать на задний план.
Типографика
от 11 до 18px · 4 ступеней
- Sequel100Wide — замена: Jost (400 · начертания 400 · Единственный фирменный шрифт, используемый только в начертании 400 во всех контекстах — навигация, основной текст, заголовки, заголовок, цены, подписи. Широко расставленный геометрический символ с большим межбуквенным расстоянием отражает весь фирменный стиль. Отсутствие жирного начертания — намеренное решение: иерархия достигается за счет регистра заглавных букв, межбуквенного расстояния и положения, а не за счет изменения толщины шрифта.
- Arial — замена: system-ui · начертания 400 · Системный резервный вариант для отрисовки кнопок в устаревших контекстах. Не является частью фирменного стиля — появляется только в случае, если Sequel100Wide не загружается.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | плотная |
| Базовый шаг | 23px |
| Радиус кнопок | 50px |
| Радиус карточек | 8px |
| Тени | нет — границы вместо теней |
| Между секциями | 80-120px |
ИИ соберёт ваш сайт в стиле INO и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Airbnb — Тихая белая стена галереи с одной кораллово-красной закладкой
- Peak Design — Стена галереи, частично освещенная
- 099 SUPPLY — Стена галереи, заполненная черно-белыми объектами
- Apple (España) — белая витрина галереи
- Apple (España) — Галерейная витрина в утреннем тумане
- Custo — Галерея цвета оружейной стали с монолитным шрифтом. Выставочный зал в приглушенных серо-зеленых тонах, где е…
- Silencio — Белая комната с парящими артефактами. Галерейная витрина из теплой бумаги, где каждый элемент занимает свое …
- Oakâme — Залитая солнцем провансальская мастерская, высеченная из теплого камня
- Nike — Монохромная галерея спортивных достижений — белые стены, продукт как произведение искусства, хром, растворен…
- Sociotype — Типовой образец музейного образца на белой бумаге
- Arc — индустриальная белая галерея над полуночной водой
- Rivian — Электрический монолит на бетонной стене галереи. Rivian представляет каждый автомобиль как скульптуру на фон…