Главная · Steep
Главная использует предоставленный референс Steep: редакционный интерфейс с serif-заголовками, мягкими карточками и полем чата как основным действием. Это заменяет OpenAI на главной; статьи документации также используют Steep.
Первый экран
Первый экран посвящён чату: заголовок, заметное поле с видимой подписью, контрастной границей и тёмной кнопкой отправки. Отдельный следующий раздел «Сайт заблокирован. Что делать дальше?» объясняет проблему и содержит широкий (до 1040 px) макет вымышленного интернет-магазина form®: наушники, колонка и лампа, нарисованные SVG, с демонстрационными ценами. Поверх витрины — раскрываемый popover в духе Chrome с предупреждением Google Safe Browsing «Опасный сайт». Адрес shop.example.com и пометка «Пример» показывают иллюстративный характер. Предупреждение использует приглушённый красный как смысловой цвет опасности; остальная главная монохромная. После появления магазина в viewport через 1,3 секунды адресная строка краснеет, а через 2,2 секунды открывается предупреждение. Его можно свернуть крестиком или Escape и снова открыть иконкой у адреса. После закрытия оно не открывается само. Иконка мягко пульсирует 4,8 секунды, затем остаётся красной. Сценарий приостанавливается вне viewport и в скрытой вкладке. При reduced motion предупреждение доступно сразу, без движения. Витрина и нарисованные ссылки внутри предупреждения — макет; иконка и крестик являются доступными кнопками. На десктопе товары стоят справа от текста витрины, на телефоне — под ним. Браузер на всех размерах экрана расположен после поля ввода. Диалог и подсказки остаются в hero, схема сканирования расположена ниже.
Палитра и форма
Белый canvas #FFFFFF, near-black #17191C, нейтральные карточки #F2F2F3, фон сканера #FAFAFB. Один персиковый блок #FBE1D1 с текстом #5D2A1A выделяет проверку файлов. Внутри него статичная трёхэтапная инфографика: файлы сайта → анализ кода → понятный результат. Без числовых показателей и вымышленных результатов, с пометкой о будущем агенте. Карточки 24 px, вложенные поверхности и ввод 16 px, кнопки pill. Лёгкая тень только у макета браузера, контентные карточки плоские. Красный обозначает угрозу, зелёный замок — блокировку файла-примера; эти смысловые сигналы сохранены по отдельным пожеланиям пользователя. По краям hero на широких экранах — тонкие SVG-линии, похожие на провода, с диагональными поворотами и маленькими контактами: восстановлен рисунок раннего баннера из коммита 5e36782. Линии начинаются у краёв окна, не ограничены шириной контентного контейнера. Они не перекрывают чат, не принимают события указателя и скрыты от скринридера; до 1100 px скрываются. Товары монохромные. Статьи документации используют общую тему Steep.
Типографика и порядок блоков
Georgia как локальная замена Signifier: hero до 72 px, вес 400, tracking −0.025em; вторая строка курсивом. Заголовки секций до 64 px. Inter/system sans-serif для текста и UI, основной текст 17 px. На телефоне hero 34–40 px. Фокус виден, несмотря на его отсутствие в референсе.
Сначала заголовок и чат, затем отдельный раздел проблемы с браузером, блок «Проверять сайт. Помогать с каждым шагом» с тремя возможностями, затем анимация сканирования. Возможности расположены в двухколоночной редакционной композиции, на телефоне в одну колонку. Остальные разделы разделены свободным пространством.
Схема сканирования
Под заголовком Agent движется ряд файлов .php, .xls, .css, .js. Лента идёт от правого края панели к левому без боковых отступов. 12 карточек обеспечивают заполнение всей ширины и перенос за видимой областью. Каждые 6 секунд следующий файл входит в сканер; панель кода показывает синтетическое содержимое с построчной подсветкой. В PHP и JS условная «вредоносная вставка» выделяется, файл получает отметку блокировки. Зелёный закрытый замок обозначает блокировку файла-примера и остаётся на нём при выходе из сканера; красная подсветка кода сохраняет смысл найденной угрозы. При возвращении файла на следующий круг отметка сбрасывается. XLS и CSS проходят дальше. Цикл повторяется; это не результат реальной проверки.
Кнопка «Приостановить / Продолжить» управляет движением. Анимация замирает вне viewport и в скрытой вкладке. При reduced motion показываем статичный пример блокировки без движения. Без JavaScript также остаётся статичная схема. Скринридер читает общее описание, без бесконечных объявлений каждого кадра. Строки кода — текст, ничего не исполняется и не отправляется в сеть.
Навигация и доступность
Sticky-шапка остаётся белой при прокрутке. Фокус виден на обеих поверхностях, поле имеет label. Демо-чат остаётся локальным. Мобильная вёрстка поддерживает 320 px. Исходник и локальные токены главной — docs/landing/index.html; тема статей использует согласованные общие токены.