Letters
Ранковий прийом у клініці просто неба — стерильно-білий стіл під м'якою блакитною стелею, усіяний інструментами хірургічного синього кольору.
Letters – це інструмент для написання медичних листів, який починається з градієнтного заголовка у вигляді відкритого неба – м'якої синьої атмосферної смуги, що створює спокійну клінічну атмосферу, перш ніж перейти до чистого білого робочого простору. Система виконана в монохромному стилі: чисте біле полотно, майже чорний текст (#070709), темні заклики до дії у формі таблеток та закруглені картки, що ширяють на найтонших тінях. Один яскравий синій колір (#2597d0) зарезервований для функціональної пунктуації — іконок, мікрографіки, хвилевих форм — ніколи не використовується для кнопок або великих заливок. У друкарні використовується шрифт Open Runde, геометричний гуманістичний шрифт без засічок з агресивною негативною міжлітерною відстанню при великих розмірах екрану (-0.04emпрі80px), який стискає заголовки в впевнені блоки. Компоненти відчуваються легкими, як у медичного інструменту: тонкі рамки, щедрий відступ для карток, кнопки у формі таблеток та стримане використання піднесення, що дозволяє заголовку у вигляді неба виконувати емоційну роботу.
Головна сторінка з градієнтом неба, що займає всю ширину сторінки, із заголовком та підтекстом по центру, а нижче – кнопка заклику до дії. Плавно перетворюється на білу область контенту з великим відступом між розділами (80-120px). Розділи з функціями використовують двоколону сітку з великих закруглених карток (радіус 18-32px) рівних пропорцій. Заголовки розділів завжди центровані в одну колонку над сіткою карток. Навігація являє собою фіксовану білу верхню панель з вирівняним центром кластером посилань і вирівняними по правому краю діями авторизації. Загальний ритм: одна атмосферна головна смуга, потім білі, що чергуються, і #f5f5f5 розділи з постійним вертикальним простором для дихання. Немає бічної панелі, немає мега-меню, немає асиметричних макетів - сторінка сприймається як спокійна симетрична колонка.
Візуальне оформлення практично повністю орієнтоване на інтерфейс користувача - ніяких фотографій в стилі лайфстайл, ніяких абстрактних 3D-рендерів. Візуальна мова побудована на картках продукту, що демонструють власний інтерфейс програми: порівняння документів «До» та «Після», зона завантаження з пунктирною рамкою та аудіоплеєр у вигляді хвильової діаграми. Єдиний атмосферний візуальний елемент – це градієнт піднебіння на головному зображенні. Іконки - плоскі, одноколірні лінійні іконки #2597d0 (конверт, мікрофон, галочка) - з однаковою товщиною лінії, без залитих варіантів. Стиль ілюстрації стриманий: макети продукту на білому тлі з невеликим поворотом для створення глибини, ніколи не нахиляються різко. Рукописний шрифт (The Doctor) - єдиний органічний/ручний елемент, який використовується виключно для того, щоб викликати асоціації з клінічним почерком на картці До.
Палітра
Бренд
- Surgical Blue
#2597d0— Іконки, мікрофон значок, програвач звукових хвиль і невеликі функціональні акценти — єдина хроматична нота на всьому інтерфейсі.
Нейтральні
- Obsidian
#070709— Основний текст, заповнені кнопки заклику до дії і темні елементи інтерфейсу користувача — майже чорний колір обраний замість чистого #000 для пом'якшення контрасту на білому тлі. - Paper White
#ffffff— Фон сторінки, поверхні карток та текст кнопок — основне полотно для всіх розділів нижче за головний елемент. - Cloud Gray
#f5f5f5— Додаткові поверхні карток та фони розділів – відокремлюють функціональні блоки від основного полотна. - Sky Tint
#d7e6f5— Відтінок картонної рамки і ледь помітний синій тон поверхні створюють відчуття атмосферності, а не сірості. - Charcoal
#60606c— Основний текст, другорядний текст і приглушені межі — домінуючий нейтральний колір для контенту, який не є заголовком. - Slate
#8b8b8b— Другий текст і неактивні прикордонні стани — використовуються для позначення місць та забезпечення доступності для людей з обмеженими можливостями.
Друкарня
від 12 до 80px · 8 ступенів
- sans-serif — заміна: Inter · зображення 400, 700 · sans-serif - виявлений у вилучених даних, але не описаний ІІ.
- Open Runde — заміна: Inter Tight · зображення 400, 500, 600, 700, 900 · Основний шрифт для заголовків та навігаторів - геометричний гуманістичний, з щільною міжлітерною відстанню при великих розмірах; -0.04em у 80px стискає заголовок у єдиний впевнений блок. Використовуйте для всіх заголовків, навігації та великого тексту.
- Inter — заміна: system-ui · зображення 400, 500 · Другий основний текст і текст інтерфейсу користувача — використовується для невеликих заголовків, елементів навігації та вбудованих посилань, де необхідний більш нейтральний ритм читання. Поєднується з Open Runde для створення ієрархічного розмаїття.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 12-16px |
| Радіус кнопок | 100px |
| Радіус карток | 18px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80-120px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Letters і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Integrated Biosciences — біолюмінесцентна лабораторія опівночі
- Mintlify — Хмарний сад над скляний стіл. Намальоване від руки небо і документальний продукт знаходяться в одній рамці — єдине місце, де колір і концепція стикаються, перш ніж сторінка зануриться в чернечу білизну.
- Gleap — Робочий простір, оформлений у теплих кремових тонах з графітовими акцентами — студія, де матові чорні чорнильні крапки наче ширяють над лляною архітектурою.
- Render — Креслення на шліфованому алюмінії. Інтерфейс сприймається як лаконічний, геометричний інженерний документ — порожній простір, тонкі лінії та одна фіолетова лінія, що привертає увагу до дії
- Grafbase — інженерне креслення на холодному мармурі
- Slash — Опівнічне сховище з позолоченими лініями бухгалтерських книг
- Modal — Фосфорний термінал у затемненій серверній кімнаті – єдиним джерелом світла є яскраво-зелений колір
- Whimsical — Насичене сливове чорнило на тлі лавандового відтінку — блокнот для творчої студії, який сприймається як технічна дошка.
- AgentQL — Північне сяйво над нічним терміналом
- Alveos One — Затишний притулок з річкового каміння — тиха, залита кремовим світлом кімната для медитації, де єдиний графітовий предмет лежить у м'якому янтарному світлі.
- GitHub — Космічна командна панель із біолюмінесцентними контрольними точками — темний, атмосферний робочий простір, де єдине зелене свічення вказує шлях уперед
- Buddy — Інженерне креслення на міліметровому папері. Біла креслярська поверхня, розмічена ледь помітною сіткою, нанесеною чорнилом майже чорного кольору, з флуоресцентними салатовими позначками і градієнтними штрихами, що переливаються.