Caldera

Выковать огонь на тёплом известняке. Холст — это необработанная тёплая штукатурка, и каждый оранжевый элемент выглядит как тлеющие угли, вдавленные в поверхность

Caldera работает на теплом известняковом полотне, залитом расплавленным оранжевым цветом. Интерфейс плоский и без теней, что позволяет сверхжирному сжатому шрифту в масштабе, близком к архитектурному (до 189px), нести всю структурную нагрузку. Единственный яркий оранжевый цвет (#fc5000) выступает в качестве единственного агрессивного хроматического акцента на фоне монохромных теплых серых тонов, фиолетовый плазменный цвет зарезервирован для основного полутонового изображения, а серно-желтый — для тегов. Визуальный язык вулканический: сжатые тяжелые буквы, полутоновые точечные узоры, радиусы 40px на карточках и кнопках, и элементы управления в виде таблеток 800px — тепло, заключенное в мягкой, похожей на бумагу поверхности.

Визуальный ряд минималистичен и продуман. В главном окне используется абстрактный полутоновый точечный узор (оранжевые точки на градиенте от фиолетового к оранжевому) вместо фотографии — он служит не украшением, а художественным оформлением бренда. В карточках с информацией о продуктах и анонсах в качестве заливки областей изображения используются либо сплошные блоки Ember, либо полутон Plasma Violet, что обеспечивает единую графическую систему. Логотипы партнеров/интеграций отображаются в виде монохромных знаков на светлом фоне. Никаких фотографий, 3D-рендеров, изображений, отражающих стиль жизни. Иконки небольшие, монохромные и минималистичные — Discord, X и Telegram расположены в навигации в виде простых глифов. Визуальный язык — графический и редакционный, а не фотографический: это скорее дизайн плакатов, а не стоковые изображения.

Мягкие градиенты Монохром Высокий контраст

https://caldera.xyz

Палитра

Бренд

Ember #fc5000 — Основные кнопки действий, карточки со статистикой, ключевые визуальные акценты — единственный агрессивный цветовой акцент; его насыщенность на фоне теплых серых тонов создает ощущение срочности без необходимости в дополнительных декоративных элементах.
Plasma Violet #524ae9 — Основная полутоновая градиентная основа, одна дополнительная поверхность карточки — используется почти исключительно в основном точечном узоре и на одной выделенной карточке; никогда не используется для элементов управления.

Нейтральные

Sulfur #f5f28e — Фон для значков тегов и категорий, небольшие блики — мягкий желтый цвет, используемый для обозначения категорий сообщений в блоге и объявлений о программах.
Limestone #f7f6f2 — Поверхности карточек, фоны блоков контента, заливка дополнительных кнопок — более светлый теплый оттенок белого, который выделяет элементы на фоне холста страницы.
Pumice #e2e2df — Основной фон страницы — тёплый средне-серый цвет, который служит основой для каждого раздела; он немного темнее, чем поверхность картона, что позволяет создать тонкое разделение фигуры и фона без теней.
Obsidian #070607 — Основной текст, заголовки, текст ссылок, рамки кнопок — почти чёрного цвета с едва заметным тёплым оттенком, соответствующим тёплой гамме холста.
Chalk #ffffff — Текст в темных секциях, текст ввода на темном фоне, высококонтрастные наложения — чистый белый цвет используется только там, где требуется максимальный контраст с темными поверхностями.

Типографика

от 12 до 189px · 10 ступеней

PP Neue Corp Compact — замена: Bebas Neue · начертания 400 (Ultrabold cut) · Все заголовки и отображаемый текст. Специально разработанный сжатый ультражирный шрифт, придающий заголовкам индустриальный, словно нарисованный на вывеске, вес. Размер 189px в главном блоке — это фирменный стиль: сжатый, почти структурный, а не типографический. Настройки функций "ss06" и "ss10" активируют альтернативные формы букв и интервалы для более агрессивного, сжатого ритма. Положительное межбуквенное расстояние (+0.02em) необычно для размеров, отображаемых на экране, и предотвращает ощущение тесноты при 80–189px.
DM Sans — замена: Inter · начертания 500 (Medium only — never Regular or Bold) · Основной текст, навигационные ссылки, подписи кнопок, вспомогательные заголовки до 30px. Средний вес шрифта выбран намеренно — шрифт Regular выглядел бы слишком тонким на фоне сверхжирного шрифта для заголовков, а Bold конкурировал бы с ним. DM Sans создает гуманистический, слегка геометрический контрапункт к индустриальному шрифту для заголовков.
System sans-serif — замена: Inter · начертания 400 · Подписи, метатекст, даты, микрометки. Используется только в 12px, где вес и узнаваемость бренда имеют меньшее значение, чем экономия на размере.

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

Назначение	Значение
Плотность	средняя
Базовый шаг	16px
Радиус кнопок	40px
Радиус карточек	40px
Тени	нет — границы вместо теней
Между секциями	80px
Ширина страницы	1280px

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

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

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

Caldera

Палитра

Типографика

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

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

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