Телеграм, WhatsApp +380637610482
Валерий Данюк
Валерий ДанюкразработчикРазработка ИИ‑инструментов для бизнеса. Качественно. Недорого.Написать в Telegram
Letters — превью сайта в этом стиле

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 — Инженерный чертеж на миллиметровой бумаге. Белая чертежная поверхность, размеченная едва заметной сеткой, на…