Allbirds

Натуральные материалы на белом льне

Allbirds работает на основе спокойной, естественной уверенности — почти полностью ахроматического полотна, дополненного теплыми песочными (#e0dacf) и приглушенными земляными тонами, взятыми непосредственно из фотографий товаров. Пользовательский интерфейс не мешает восприятию продукта: белые поверхности, тонкие границы, навигация с преобладанием заглавных букв и элементы управления в форме таблеток, которые ощущаются скорее как физические кнопки, чем как веб-элементы. Шрифт Self Modern (пользовательский шрифт с засечками) используется для тех немногих важных моментов, требующих внимания редакторов — заголовков и названий коллекций, — в то время как Geograph используется для каждой надписи, основного текста и кнопки в трех сбалансированных вариантах толщины. Карточки категорий становятся цветовой системой: каждая из них берет свой фоновый оттенок из представленного продукта, превращая навигацию в живую палитру Pantone.

Максимальная ширина ~1200px, центрирована с большим боковым отступом. Главный элемент — это полноэкранная редакционная полоса на теплом песочном фоне с большой каруселью товаров, расходящейся от центра. Навигация по категориям представляет собой сетку из 4 одинаковых цветных карточек в 4 колонках, каждая из которых содержит одну центрированную модель обуви. Ниже линии сгиба макет чередуется между полноэкранными разделенными панелями (фото образа жизни слева + образец товара справа) и центрированными каруселями товаров под небольшим подчеркнутым заголовком раздела. Общий ритм: полноэкранная редакционная панель → сетка из 4 колонок → центрированная карусель товаров → разделение на 2 колонки → центрированная карусель товаров. Расстояние между разделами составляет 40-56px, создавая воздушные, но не огромные переходы. Навигация представляет собой минималистичную фиксированную верхнюю панель с центрированными основными ссылками.

Фотография — это вся визуальная система. Все снимки товара сделаны крупным планом, на небольшом ракурсе, на фоне однотонного цвета, который соответствует или дополняет акцентный цвет обуви — фактически превращая каждую фотографию в исследование цвета. Фотографии в стиле лайфстайл выполнены в теплых, солнечных тонах, на природе (агавовые поля, деревянные настилы, грубый рельеф), слегка приглушенные, чтобы соответствовать приглушенной палитре. Никаких иллюстраций, никаких 3D-рендеров, никакой абстрактной графики. В сотрудничестве с Pantone используется буквальная цветовая палитра в качестве графического элемента. Иконография минималистична и монохромна (контурные иконки в навигационных и вспомогательных позициях).

Интернет-магазин Монохром Минимализм Редакционный

https://allbirds.com

Палитра

Нейтральные

Canvas White #ffffff — Фоновые изображения страниц, поверхности карточек, фоновые изображения товарных карточек.
Charcoal #212121 — Поддерживается нейтральный цвет для второстепенных элементов пользовательского интерфейса, разделителей и приглушенных подписей. Не следует назначать его основным цветом для призывов к действию.
True Black #000000 — Заголовки, значки, высококонтрастные рамки, навигационный текст.
Warm Sand #e0dacf — Фон главной секции, дополнительный оттенок поверхности, большие редакционные панели.
Olive Char #222519 — Поддерживается нейтральный цвет для второстепенных элементов пользовательского интерфейса, разделителей и приглушенных подписей. Не следует назначать его основным цветом для призывов к действию.
Iron Gray #525252 — Второстепенный текст, вспомогательный текст, ненавязчивые рамки.

Типографика

от 12 до 40px · 6 ступеней

Self Modern — замена: Playfair Display · начертания 400 · Заголовки и редакционные материалы используются экономно для ключевых фраз и названий коллекций. Шрифты с засечками и курсивным начертанием разбавляют монотонность шрифтов без засечек и дают понять: «Это и есть суть истории».
Geograph — замена: Inter · начертания 400, 500, 700 · Основной шрифт для пользовательского интерфейса — основной текст, подписи навигации, кнопки, заголовки товаров, нижние колонтитулы, поля ввода, значки. 500 для выделенных заголовков, 700 для названий товаров. Широкое межбуквенное расстояние (0.025em–0.10em) в заглавных буквах в подписях навигации и категориях задает фирменному стилю.
HurmeGeometricSans3 — замена: Inter · начертания 400 · Используется редко — резервный вариант или специализированная метка для кнопки. Компания Geograph использует эту систему ежедневно.

Интервалы и форма

Назначение	Значение
Плотность	плотная
Базовый шаг	8-16px
Радиус кнопок	9999px (pill)
Радиус карточек	16px
Тени	нет — границы вместо теней
Между секциями	40-56px
Ширина страницы	1200px

ИИ соберёт ваш сайт в стиле Allbirds и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Allbirds

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Allbirds и наполнит его

Похожие стили