Monad
редакційний технічний журнал на теплому пергаменті
Monad відображає весь свій інтерфейс на теплому пергаментному полотні (#f6f3f1), що відразу відрізняє його від типового шаблону SaaS, виконаного в білому кольорі. Заголовки мають редакційну вагу і набрані шрифтом Untitled Serif товщиною 400 — ніколи не жирним, — тоді як весь основний текст, навігація та елементи інтерфейсу користувача набрані шрифтом ABC Diatype Mono, що надає сайту текстуру технічного посібника, набраного для літературного журналу. Єдиний яскравий синій колір (Lake) – єдиний хроматичний акцент для основних дій; все інше виконано в теплій сірій гамі, тому поверхня картки кольору барвінку (#cfdaf5) і м'які пастельні градієнтні переходи (кораловий, небесний, м'ятний, золотий) сприймаються швидше як навмисна пунктуація, ніж шум. Компоненти спираються на тонкі межі та контейнери для таблеток, а не на тіні, а ритм залишається спокійним та просторим завдяки відступам у вигляді карток та великому вертикальному простору між розділами.
Візуальна мова заснована на розробленій діаграмі конвеєра даних: вузли у формі таблеток, обведені тонкими вигнутими лініями, з невеликими значками всередині кожного вузла, що представляють джерела даних (будь-яке джерело, хмарні журнали, уразливості) та місця призначення (SIEM, хмарне сховище, озеро даних). Діаграма використовує м'яке зелене радіальне свічення у центрі, щоб підкреслити нормалізацію даних. Градієнтні атмосферні відтінки (кораловий → синій Sky, синій Sky → м'ятний) з сильними фільтрами розмиття створюють м'які колірні ореоли за основним та функціональним контентом. Логотипи партнерів відображаються в одному ряду, наголошуючи на соціальному ефекті. На картці «Перетворення даних у процесі передачі» представлена велика градієнтна ілюстрація з напівпрозорими геометричними фігурами, що перекриваються. Фотографії не використовуються — бренд передає інформацію виключно за допомогою друкарні, діаграми та колірних рішень.
Палітра
Бренд
- Parchment
#f6f3f1— Полотно сторінки і більша частина заливки поверхні - цей теплий, кремовий відтінок є фірмовим кольором бренду, який відразу відрізняє сайт від шаблонів SaaS-сервісів, виконаних у чисто білому кольорі. - Lake Blue
#2b59d1— Фіолетовий відтінок використовується для виділення фону, декоративних смуг та м'якого акценту за контентом. Не слід використовувати його як основний колір для заклику до дії.
Нейтральні
- Off-Black
#242424— Висококонтрастна нейтральна заливка для основних кнопок на світлих поверхнях. - Periwinkle Mist
#cfdaf5— Приглушений інтерфейс для відключених елементів керування, панелей з низьким рівнем акценту та блоків-заповнювачів. - Sky Blue
#a0b5eb— Декоративна градієнтна зупинка — з'являється в атмосферних заливках і лініях потоку на схемі трубопроводу, ніколи не використовується як заливка інтерфейсу користувача. - Mint
#a7fccd— Допоміжна палітра кольорів для невеликих декоративних акцентів, коли основний палітрі кольорів необхідний контраст. - Coral
#ff9473— Допоміжна палітра кольорів для невеликих декоративних акцентів, коли основний палітрі кольорів необхідний контраст. - Gold
#ecda98— Декоративна градієнтна точка — теплий акцент у градієнтних переходах, ніколи не використовується в функціональному інтерфейсі користувача.
Друкарня
від 12 до 80px · 10 ступенів
- ABC Diatype Mono — заміна: JetBrains Mono · зображення 400, 500 · Основний текст, навігація, кнопки, значки, теги і ВСІ рядки інтерфейсу користувача. Моноширинний шрифт у всіх функціональних елементах надає інтерфейсу характеру технічного керівництва - основний текст розміром 16-20px сприймається як дані, а не як маркетингова інформація. У написах навігації та значках використовується шрифт 18px з точнішим міжлітерним інтервалом; дрібний шрифт і метатекст використовують шрифт 12px із великими літерами. 500-й розмір шрифту зарезервований для виділених елементів інтерфейсу користувача.
- Untitled Serif — заміна: Times New Roman · зображення 400 · Тільки для заголовків та підзаголовків - використовується в 80px (головний текст), 48px (розділ), 40px і 32px (підрозділи), 24px (заголовки карток з описом). Товщина шрифту зафіксована на рівні 400 для всіх розмірів; природний контраст шрифту із засічками та міжлітерний інтервал -0.02em забезпечують основне навантаження замість жирного шрифту. Це фірмовий стиль редакції: заголовки шепочуть завдяки друкарській вишуканості, а не кричать завдяки товщині.
- Untitled Sans — заміна: Inter · зображення 400 · Шрифт Untitled Sans - виявлений у вилучених даних, але не описаний ІІ.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 16px |
| Радіус кнопок | 100px |
| Радіус карток | 40px |
| Тіні | ні — межі замість тіней |
| Між секціями | 64px |
| Ширина сторінки | 1432px |
ІІ збере ваш сайт у стилі Monad і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Dub — матова панель управління Link на рисовому папері
- Seline Analytics — Тихий аналітичний стіл на теплий папір
- Notion — Теплий паперовий блокнот під полуденним сонцем
- Anthropic — Науковий польовий журнал на теплому пергаменті — спокійні поверхні кольору слонової кістки, редакційні заголовки із засічками та єдиний глиняний акцент, що з'являється лише тоді, коли потрібно діяти
- Calendly — Темно-синє чорнило на холодному мармурі
- Augen Pro — Презентація Apple на білому тлі — клінічний, невагомий, електричний синій як єдиний акцент у монохромному просторі
- Antimetal — Редакційна хроніка на кремовому папері – тихий ранок у науковому журналі, де стриманість свідчить про впевненість, а засічки виконують основну роботу.
- Perk — Електричний лайм на теплому пергаментному папері
- Ditto — Залита сонцем майстерня зі створення зразків польових кольорів. Теплі кремові поверхні, яскравий жовтий основний колір, глибокі темно-сині чорнила, органічні колірні форми, що розквітають за виробом
- Officevibe — Редакційний журнал на папір теплого кремового кольору. Уявіть собі вдумливе есе з управління персоналом, оформлене у вигляді продукту — курсивний шрифт із засічками, що ніби шепоче крізь сучасний синій інтерфейс.