Resend
чорний оксамит з фіолетовим неоновим кольором
Resend існує в майже повній темряві - чисте чорне полотно, тонкі графітові рамки та біло-чорна друкарня, що створює відчуття читання тексту, надрукованого на матовому склі. Головний елемент антидекоративний: один великий заголовок із засічками в 96px Domaine поряд із тривимірним чорним кубом, без градієнта та маркетингової ілюстрації. Фірмовий знак – насичений фіолетовий колір (#9281f7), який з'являється у рядках адрес електронної пошти, значках стану та прикладах коду – ніколи на кнопках. Моноширинний шрифт (Commit Mono) передає індивідуальність розробника через кожен блок коду, значок та вбудовану мітку, завдяки чому сторінка виглядає як термінал, укладений у розкішний інтерфейс. Компоненти мають гострі або злегка закруглені кути (6px/16px), низьку висоту та використовують рамки 1px замість тіней для поділу шарів. Динаміка стримана, але виразна: плавне згасання та ковзання тексту на головному екрані, ледве помітне обертання куба за допомогою WebGL і короткі 150 мілісекундні переходи при наведенні курсору.
Візуальне оформлення майже повністю складається з 3D-об'єктів, відмальованих за допомогою WebGL (чорний куб у головному вікні, що обертаються геометричні форми), і вбудованих скріншотів інтерфейсу користувача продукту, що відображаються в темних вікнах коду. Жодних фотографій, ілюстрацій, зображень, що відображають спосіб життя. Логотипи в панелі довіри – це вбудовані зображення SVG у вихідних кольорах. Іконки – це контури 1px-1.5px з обведенням #f0f0f0 або #a1a4a5. Візуальна мова: чорне полотно, 3D-об'єкт якоря головного вікна, темні вікна коду як доказ продукту, білі SVG-логотипи як соціальний доказ. Нічого декоративного – кожен візуальний елемент або структурний (куб), або демонстраційний (вікно коду, логотип).
Палітра
Бренд
- 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-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Neon — Серверна кімната після настання темряви. Глибока темрява, де єдиними джерелами світла є дані та взаємодія між користувачами
- Discord — Ігровий світ прихований за спливаючим вікном чату — кожен розділ є самодостатнім середовищем зі своїм власним освітленням і набором персонажів.
- Midjourney — Біолюмінесцентний термінал у глибоководних районах океану. Глибоководний світ, де інтелект наочно генерує себе в потоках ASCII, а елементи управління виглядають як зразки, що слабо світяться.
- Wope — Wope – інтерфейс фіолетового горизонту. Уявіть собі темний стіл в обсерваторії, з-під скла якого піднімається світло-фіолетовий потік
- Ori — Серверна кімната опівночі – чорна порожнеча, біле світло, один увімкнений вимикач
- Amaterasu — Небесне бірюзове святилище
- Obsidian — Сховище кристальних знань. Чіткий, багатогранний цифровий простір, створений для ясності та зосередженості, з сяючими фіолетовими прожилками взаємодії
- Morphic — Темне кінематографічне полотно для оповідання за допомогою ІІ. Чистий чорний колір поглинає все, крім синього пульсації одного акценту та свічення згенерованого зображення
- Valo — Нуарна обсерваторія опівночі — типографіка щільністю 300 пунктів ширяє на чистому чорному тлі, а єдиний бірюзово-фіолетовий градієнт проходить крізь кімнату, наче лазерна лінія
- JetBrains — Неонова туманність на обсидіані — сторінка на чорному тлі, де фіолетово-сині градієнти розквітають, немов образи глибокого космосу, перемежуючись яскраво-рожевим неоном та хроматичним світлом для кожного продукту.
- beehiiv — північна обсерваторія з неоновою плазмою
- RainbowKit — Неоновий гаманець-модальний органайзер ширяє в чорній порожнечі — синьо-фіолетове сяйво пробивається крізь темряву.