Resend

черный бархат с фиолетовым неоновым цветом

Resend существует в почти полной темноте — чистый черный холст, тонкие графитовые рамки и бело-черная типография, создающая ощущение чтения текста, напечатанного на матовом стекле. Главный элемент антидекоративен: один крупный заголовок с засечками в 96px Domaine рядом с трехмерным черным кубом, без градиента и маркетинговой иллюстрации. Фирменный знак — насыщенный фиолетовый цвет (#9281f7), который появляется в строках адресов электронной почты, значках состояния и примерах кода — никогда на кнопках. Моноширинный шрифт (Commit Mono) передает индивидуальность разработчика через каждый блок кода, значок и встроенную метку, благодаря чему страница выглядит как терминал, заключенный в роскошный интерфейс. Компоненты имеют острые или слегка закругленные углы (6px / 16px), низкую высоту и используют рамки 1px вместо теней для разделения слоев. Динамика сдержанная, но выразительная: плавное затухание и скольжение текста на главном экране, едва заметное вращение куба с помощью WebGL и короткие 150-миллисекундные переходы при наведении курсора.

Визуальное оформление почти полностью состоит из 3D-объектов, отрисованных с помощью WebGL (черный куб в главном окне, вращающиеся геометрические формы), и встроенных скриншотов пользовательского интерфейса продукта, отображаемых в темных окнах кода. Никаких фотографий, иллюстраций, изображений, отражающих образ жизни. Логотипы в панели доверия — это встроенные SVG-изображения в исходных цветах. Иконки — это контуры 1px-1.5px с обводкой #f0f0f0 или #a1a4a5. Визуальный язык: черный холст, 3D-объект в качестве якоря главного окна, темные окна кода в качестве доказательства продукта, белые SVG-логотипы в качестве социального доказательства. Ничего декоративного — каждый визуальный элемент либо структурный (куб), либо демонстрационный (окно кода, логотип).

Тёмный Чистый SaaS Мягкие градиенты Высокий контраст

https://resend.com

Палитра

Бренд

Iris Violet #9281f7 — Фиолетовый акцент текста для ссылок, тегов и выделенных коротких фраз; диагональный градиент от фиолетового к пурпурному на контейнерах иконок и фирменных значках.
Iris Violet Glow #baa7ff — Фиолетовым цветом выделены ссылки, теги и короткие выделенные фразы.

Нейтральные

Void Black #000000 — Фон страницы, поверхности картона, накладные экраны — весь холст.
Graphite Hairline #292d30 — Границы 1px на карточках, полях ввода, кнопках, блоках кода, разделителях — определяют каждое разделение слоев.
White #ffffff — Основные заголовки, заголовок, подписи к кнопкам, заливка иконок на темных поверхностях.
Bone White #f0f0f0 — Основной текст, второстепенные заголовки, контуры значков — основной цвет для чтения.
Ash Gray #a1a4a5 — Приглушенный основной текст, подписи значков, обводка иконок — текст третьего уровня и метаданные.
Smoke Gray #abafb4 — Цвет ссылки, текст неактивной кнопки, вспомогательные подписи — текст четвертого уровня

Типографика

от 12 до 96px · 8 ступеней

Inter — замена: Inter (Google Fonts) · начертания 400, 500, 600 · Основной текст, метки пользовательского интерфейса, навигация, кнопки, ссылки. Рабочий инструмент — встречается 1280 раз на всех поверхностях, кроме кода.
Domaine — замена: GT Sectra · начертания 400 · Заглавный текст — шрифт толщиной 400 с межбуквенным интервалом 96px создает ощущение редакционного, почти печатного оформления. Используется всего дважды на всей странице для самого крупного заголовка.
aBC Favorit — замена: Inter Display · начертания 400, 500 · Заголовки разделов и подзаголовки. Фирменный стиль шрифта 56px weight-400 с межбуквенным расстоянием -0.05em — экстремально отрицательное межбуквенное расстояние на геометрическом шрифте без засечек создает сжатое, уверенное впечатление от текста, контрастирующее с главным шрифтом Domaine.

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

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

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

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

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

Resend

Палитра

Типографика

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

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

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