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

Cursor

Уютная мастерская из пергамента, освещенная тлеющими углями

Cursor использует теплый, словно пергамент, стиль оформления: кремовый холст, черный как чернила текст и единственный акцент огненно-оранжевого цвета, который активирует ссылки и выделение, а не заполняет кнопки. Заголовки, набранные шрифтом CursorGothic толщиной 400, имеют постепенно уменьшающееся межбуквенное расстояние по мере увеличения размера — авторитетность достигается за счет сдержанности и уменьшения толщины букв, а не за счет жирного шрифта. Поверхности остаются плоскими и похожими на бумагу, с тонкими рамками и мягкими теплыми серыми тенями; углы остаются четкими при толщине 4px на протяжении всего текста. Шрифт EB Garamond используется выборочно для подзаголовков и прозы, а berkeleyMono обрабатывает код, метки и метаданные, придавая системе типографическую индивидуальность, которая больше напоминает литературный журнал, чем панель управления SaaS.

Максимальная ширина 1300px по центру, 24px внешний отступ. Верхняя навигация: 52px высокий прозрачный заголовок с логотипом и текстовым знаком слева, 4 ссылки навигации по центру, кластер «Вход / Контакты / Скачать» выровнен по правому краю. Герой: заголовок, выровненный по левому краю, + двойной блок призывов к действию с текстом, идущим сверху слева, затем полноразмерная карточка-макет продукта, занимающая всю ширину страницы. Полоса доверия: один горизонтальный ряд из 8 плиток логотипа в одну линию по ширине раздела. Разделы с функциями чередуют текст слева и скриншот справа в двухколоночном расположении, каждый 50/50, с вертикальным ритмом 64–96px между разделами. Все скриншоты функций представляют собой макеты окон с идентичным оформлением macOS. Нижний колонтитул: четырехколоночная сетка ссылок с фирменным знаком слева. Разделы разделены большим пространством для «дыхания», а не разделителями — кремовый холст сам по себе обеспечивает разделение.

В центре внимания — скриншоты продукта: большие макеты окон macOS, демонстрирующие работу IDE Cursor: вкладки файлов, просмотр различий, планы агентов, панели терминала, интеграция со Slack/чатом. Каждый макет окна помещен в рамку карточки #f2f1ed с мягким теплым контрастом. Приглушенная фотография пейзажа (горы/пустынный горизонт) выходит за пределы главного раздела, добавляя теплоты, не конкурируя с пользовательским интерфейсом. Логотипы клиентов (Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) представлены в виде монохромных надписей внутри плиток Linen в форме таблеток. Никаких фотографий людей, иллюстраций, абстрактных декоративных графических элементов — весь визуальный вес сосредоточен на пользовательском интерфейсе продукта и фирменных знаках. Иконки представляют собой тонкие монолинейные глифы, заполненные цветом #7a7974 Ash, никогда не хроматические.

Палитра

Нейтральные

  • Ink #26251e — Основной текст, фон основной кнопки действия, текст навигации — тёплый, почти чёрный оттенок, никогда не чистый #000
  • Parchment #f7f7f4 — Фон страницы, основной холст — теплый кремовый оттенок, который смягчает контраст и создает ощущение печати чернилами, а не цифровой печати.
  • Bone #f2f1ed — Картонные поверхности и приподнятые контейнеры — на один тон темнее холста, создают эффект многослойности «бумага на бумаге» без границ.
  • Linen #e6e5e0 — Светлая нейтральная заливка для кнопок на темных поверхностях.
  • Stone #cdcdc9 — Тонкие границы, разделители, едва заметные перегородки — линии 1px теплых оттенков
  • Mist #a1a19f — Вспомогательный текст третьего уровня, подписи — между приглушенным и второстепенным текстом.

Типографика

от 12 до 72px · 6 ступеней

  • CursorGothic — замена: Inter · начертания 400, 500 · Основной шрифт для пользовательского интерфейса, заголовков, навигации, основного текста и оформления товаров. Заголовки толщиной 400 с постепенно уменьшающимся межбуквенным расстоянием (-0.005em на 22px → -0.03em на 72px) — отличительная черта шрифта: заголовки никогда не выделяются жирным шрифтом. Функции шрифта ss08, ss09, tnum активируют стилистические альтернативы и табличные цифры.
  • EB Garamond — замена: Iowan Old Style · начертания 400, 500 · Редакционный шрифт с засечками для отдельных подзаголовков, основного текста и табличных данных — добавляет литературную выразительность в интерфейсе CursorGothic.
  • berkeleyMono — замена: ui-monospace · начертания 400, 500 · Monospace — для блоков кода, фрагментов командной строки, метаданных, путей к файлам и меток для разработчиков — технический язык.

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

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

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

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

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

  • Amplemarket — Залитое солнцем рабочее место, усыпанное конфетти
  • Getharvest — Рабочий стол в «золотой час» — холст теплого кремового цвета, белые открытки, развешанные на холсте, и одно …
  • Drive Capital — Ретро-постер для автопутешествия на теплой бумаге
  • Wealthsimple — Склад, отделанный кашемиром, с галерейным освещением
  • Huddle — Пастельные инвентарные карточки на кремовой бумаге
  • Fuser — Разбросанные полароидные снимки на рабочей стене дизайнера
  • Campsite — Залитое солнцем рабочее место редактора — бумага теплого кремового цвета с одним оранжевым отпечатком намере…
  • Redis Agency — Редакционная мастерская, работающая в нерабочее время, — это кромешная тьма, где всю работу над брендом выпо…
  • AI Product Generation — Фотостудия для редакционной съемки на белой бумаге — заголовок в качестве обложки, оранжевый цвет — для выде…
  • Getanchor — Теплый терракотовый оттенок на выцветшем от солнца кремовом фоне
  • Flatfile — Тихий дневник данных на теплом пергаменте
  • Inthememory — Архитектурный чертеж на белом мраморе с единственным теплым огоньком. Тихая, редакционная комната данных, гд…