Как мы рисовали cusp

В геометрии cusp — это точка возврата, или остриё: место, где две кривые сходятся с общей касательной. Острая точка, образованная плавными линиями. Рога полумесяца — именно такие точки.

Эта форма хорошо подходит агенту. Две кривые — вы и модель — сходятся в одной точке. И каждый ход агента заканчивается так же: работа сходится в ответ.

Мы с самого начала решили, что бренд будет вырастать из этой единственной идеи и что выражать его мы будем сдержанно. Эта статья о том, как это получилось.

Четыре окружностиСкопировать ссылку на раздел

Знак построен циркулем. В нём четыре окружности и больше ничего:

• Тело — круглая голова формы.
• Взмах касается тела изнутри. Он образует выпуклую спинку, которая поднимается к острию.
• Горло касается тела снаружи. Оно образует вогнутый фронт, который поднимается навстречу взмаху.
• Просвет вычитается из тела. Он раскрывает форму в букву C.

Взмах и горло встречаются справа вверху: эта точка и есть то самое остриё. Просвет создаёт второе, меньшее остриё у нижнего рога. Все остальные сопряжения касательные, поэтому контур остаётся плавным на размере билборда и чётким в 16 пикселях.

Силуэт читается сразу тремя способами: как буква C, как гребень волны и как резкий взмах вперёд — момент прорыва. Мы не планировали все три. Мы начали с геометрии и оставили тот вариант, в котором они проявились.

Раз знак — это геометрия, его не рисуют, а генерируют. Скрипт хранит описание окружностей, и каждый файл логотипа, иконка приложения и favicon отрисовываются из него. Логотип-надпись переведён в контуры из шрифта Inter с фиксированными насыщенностью и оптическим размером, поэтому никогда не зависит от установленных шрифтов.

Один синий, и редкоСкопировать ссылку на раздел

Интерфейс Cusp нейтральный: тёплые серые с оттенком бумаги, но никогда не бежевые. Глубину создают ступени поверхностей и тонкие границы. Тени оставлены для того, что парит над интерфейсом.

Фирменный цвет один — #4285f4, и правила для него строгие. Он появляется на знаке, иконке приложения и кольцах фокуса. Его нет на кнопках, вкладках, ссылках, заголовках и фонах. Основные кнопки — цвета чернил.

Звучит аскетично, и это намеренно. Если синий везде, он ничего не значит. Если он появляется только тогда, когда происходит что-то важное, он становится сигналом. Наше правило для всех, кто дополняет дизайн-систему, короткое: если вы не уверены, можно ли здесь синий, — нельзя.

СпиннерСкопировать ссылку на раздел

Большую часть жизни агент работает, пока вы ждёте. Это состояние ожидания — единственное место, где мы позволяем бренду двигаться.

Спиннер cusp рисует два штриха, поднимающихся от основания знака по противоположным сторонам: один — по взмаху, другой — вверх по горлу. Они встречаются у острия, вспыхивает маленькая синяя искра, после чего штрихи втягиваются в точку и всё начинается заново. Один цикл длится 2,1 секунды.

Перед выпуском мы проверили его по критериям, взятым из нашего исследования о том, чем фирменная деталь отличается от трюка:

• Он не должен стоять на критическом пути и добавлять задержку.
• Он должен нести информацию, а не просто украшать.
• Он должен учитывать настройку уменьшения движения.
• Он должен быть родным для каждой среды.

Спиннер проходит проверку, потому что он и есть индикатор прогресса: он заменяет то, что всё равно было бы на экране. При уменьшении движения он превращается в статичный знак с медленно «дышащей» искрой.

В терминале та же идея становится последовательностью символов · ◜ ◝ ◠ ✦ ◠ ◝ ◜ — примерно 110 миллисекунд на кадр. Во время работы он остаётся серым. Кадр ✦ становится синим только на первом токене и при завершении. С NO_COLOR он без цвета, а в простейшем терминале переходит на ASCII.

Глаголы размышленийСкопировать ссылку на раздел

Рядом со спиннером стоит глагол: Сходимся… Каждые несколько секунд он сменяется с мягким размытием, а рядом показаны прошедшее время, токены и подсказка, что Esc прерывает работу.

Глаголы берутся из трёх семейств:

• Кривые и геометрия. Сходимся, Ищем точку, Сводим кривые, Гнём дугу, Чертим, Касаемся, Огибаем, Интерполируем.
• Ремесло. Набрасываем, Оттачиваем, Шлифуем, Выверяем, Распутываем, Сплетаем, Дорисовываем.
• Спокойная мысль. Размышляем, Прикидываем, Взвешиваем, Настаиваемся, Кристаллизуем, Собираем мысли.

Правила для нового глагола: в английском это причастие настоящего времени, в русском — глагол в первом лице множественного числа; одно-два слова, ничего тревожного, ничего за счёт пользователя и ничего, что приписывало бы модели чувства. «Падаем…» не подходит. «Паникуем…» тоже, как бы ни хотелось.

Когда ход заканчивается, индикатор оставляет одну строку, например Сошлись за 42 с · 6 инструментов · ↓ 3,1k, и остриё один раз вспыхивает синим. Эта вспышка — единственный повторяющийся акцент в переписке. В длинной сессии именно по ней вы краем глаза понимаете, что агент закончил.

У игривости есть место, и оно маленькоеСкопировать ссылку на раздел

Глаголы игривые. Всё вокруг них — нет.

Ошибки говорят, что произошло, почему и как это исправить: «Anthropic ограничил частоту запросов — повтор через 8 с», а не «Упс, что-то пошло не так». Запросы разрешений простые и точные: «Разрешить rm -rf dist?» Над оплатой, необратимыми действиями и безопасностью мы никогда не шутим. Игривость живёт только в состояниях ожидания, где она может сделать паузу короче на ощупь, ничего не делая менее понятным.

ТалисманСкопировать ссылку на раздел

Талисман — это знак без просвета, которому дали два глаза. Это маленькое чернильное существо, у которого кончик гребня и есть остриё. В светлой теме он цвета чернил с бумажными глазами, в тёмной — наоборот. Кончик гребня — единственная его часть, которая вообще становится синей.

У талисмана шесть состояний:

Где появляется талисман, продумано так же тщательно, как то, как он выглядит. Он живёт в просторных и спокойных местах: на экранах приветствия, в пустых состояниях, при первом запуске, в окне «О программе», в уведомлениях, когда окно не в фокусе, и на странице 404. Он никогда не появляется в переписке, в диффах, в запросах разрешений и рядом с необратимыми действиями. Талисман — хорошая компания, пока вы ждёте. И плохая — пока вы решаете, удалять ли каталог.

Талисман — это чистый SVG и Motion: он чёткий в любом размере и, как и всё остальное, учитывает настройку уменьшения движения.

Команда в костюмахСкопировать ссылку на раздел

Участникам команды в Cusp — ИИ-агентам с ролью и расписанием, которых мы делаем следующими, — нужны были лица. Реалистичные человеческие портреты мы отвергли. Они воспринимаются как обман и плохо стареют.

Вместо этого каждый участник команды — это талисман в костюме своей роли, нарисованный мягкими матовыми чернилами на приглушённом фоне: золотой значок на лацкане у CEO, мегафон у маркетолога, наушники и парящий курсор у инженера, берет и карандаш у дизайнера, очки в проволочной оправе у аналитика, гарнитура у поддержки, стопка книг у исследователя. Имена помогают запомнить, названия ролей вызывают доверие: «Ava · CEO».

Статус никогда не передаётся только цветом. Работающий участник команды получает медленную синюю орбиту — единственный синий в сетке аватаров. Ожидание вашего ответа — янтарное кольцо со значком руки. Ошибка — красное кольцо со значком информации.

Движение в целомСкопировать ссылку на раздел

Остальной интерфейс следует той же сдержанности. Движение объясняет, а не украшает. Переходы в интерфейсе длятся от 120 до 320 миллисекунд. Пружинная анимация отвечает за всё пространственное и прерываемое; простые затухания — за цвет и прозрачность, которые никогда не должны пружинить. Исчезновение быстрее появления. А то, что вы делаете сотню раз в день, — отправка сообщения, переключение сессий, выбор строки — не анимируется вовсе.

Звук, по умолчанию выключенСкопировать ссылку на раздел

Звуков не больше трёх, каждый короче 400 миллисекунд, и все следуют системной громкости: готово — мягкий восходящий интервал из двух нот, две сходящиеся кривые; ждёт вас — один нейтральный щелчок; ошибка — одна низкая нота. Они выключены, пока вы их не включите.

Зачем всё этоСкопировать ссылку на раздел

Ничто из этого не делает агента умнее. Зато с ним становится проще жить по восемь часов в день. Спиннер, который что-то сообщает, единственная вспышка, которая говорит, что работа закончена, ошибки, с которыми можно что-то сделать, и спокойный интерфейс, который не мешает коду. Мы думаем, что это стоит сделать хорошо, и будем продолжать это шлифовать по мере того, как растёт Cusp.