Как мы рисовали Nib
Как знак, построенный из четырёх окружностей, стал нашим логотипом, спиннером, голосом размышлений и лицом Nib.
· The Nib team
Впервые мы опубликовали эту статью под прежним названием продукта. С тех пор изменилось имя, а в ноябре 2026 года — и синий. Эта версия рассказывает историю с учётом обоих изменений.
Nib по-английски — перо, кончик ручки. Две половинки пера изгибаются навстречу друг другу и сходятся в одной точке, чернила стекают по прорези между ними, и в этой точке становятся линией на бумаге. Всё, что до пера, — намерение. На кончике пера оно становится тем, что можно прочитать.
Это и есть работа агента. Вы и модель сходитесь в одной точке, и каждый ход заканчивается одинаково: работа сходится и становится тем, что можно запустить, проверить и выпустить. Nib — точка, где мысль становится работой.
Мы с самого начала решили, что бренд будет вырастать из этой единственной идеи и что выражать его мы будем сдержанно. Эта статья о том, как это получилось.
Четыре окружности
Знак построен циркулем. В нём четыре окружности и больше ничего:
- Тело — круглая голова формы.
- Взмах касается тела изнутри. Он образует выпуклую спинку, которая поднимается к острию.
- Горло касается тела снаружи. Оно образует вогнутый фронт, который поднимается навстречу взмаху.
- Просвет вычитается из тела. Он раскрывает форму в крючок.
Взмах и горло встречаются справа вверху — так две половинки пера сходятся в его кончике. Эта точка — кончик пера нашего знака. Просвет создаёт второе, меньшее остриё у нижнего рога. Все остальные сопряжения касательные, поэтому контур остаётся плавным на размере билборда и чётким в 16 пикселях.
Силуэт читается сразу тремя способами: как кончик пера посреди штриха, как гребень волны и как резкий взмах вперёд — момент, когда мысль становится линией. Мы не планировали все три. Мы начали с геометрии и оставили тот вариант, в котором они проявились. В знаке нет букв, поэтому, когда продукт сменил имя, знак менять не пришлось.
Раз знак — это геометрия, его не рисуют, а генерируют. Скрипт хранит описание окружностей, и каждый файл логотипа, иконка приложения и favicon отрисовываются из него. Логотип-надпись переведён в контуры из шрифта Inter с фиксированными насыщенностью и оптическим размером, поэтому не зависит от установленных шрифтов.
Один синий, и редко
Интерфейс Nib нейтральный: тёплые серые с оттенком бумаги, но не бежевые. Глубину создают ступени поверхностей и тонкие границы. Тени оставлены для того, что парит над интерфейсом.
Фирменный цвет один — #0169ff, и правила для него строгие. До ноября 2026 года это был #4285f4; мы перешли на более глубокий и насыщенный синий, чтобы в тех немногих местах, где он появляется, он читался как один ясный сигнал. Он появляется на знаке, иконке приложения и кольцах фокуса. Его нет на кнопках, вкладках, ссылках, заголовках и фонах. Основные кнопки — цвета чернил.
Звучит аскетично, и это намеренно. Если синий везде, он ничего не значит. Если он появляется, когда происходит что-то важное, а в остальное время его нет, он становится сигналом. Наше правило для всех, кто дополняет дизайн-систему, короткое: если вы не уверены, можно ли здесь синий, — нельзя.
Спиннер
Большую часть жизни агент работает, пока вы ждёте. Это состояние ожидания — единственное место, где мы позволяем бренду двигаться.
Спиннер рисует два штриха, поднимающихся от основания знака по противоположным сторонам: один — по взмаху, другой — вверх по горлу, как чернила по обеим половинкам пера. Они встречаются у острия, вспыхивает маленькая синяя искра, после чего штрихи втягиваются в точку и всё начинается заново. Один цикл длится 2,1 секунды.
Перед выпуском мы проверили его по критериям, взятым из нашего исследования о том, чем фирменная деталь отличается от трюка:
- Он не должен стоять на критическом пути и добавлять задержку.
- Он должен нести информацию, а не просто украшать.
- Он должен учитывать настройку уменьшения движения.
- Он должен быть родным для каждой среды.
Спиннер проходит проверку, потому что он и есть индикатор прогресса: он заменяет то, что всё равно было бы на экране. При уменьшении движения он превращается в статичный знак с медленно «дышащей» искрой.
В терминале та же идея становится последовательностью символов · ◜ ◝ ◠ ✦ ◠ ◝ ◜ — примерно 110 миллисекунд на кадр. Во время работы он остаётся серым. Кадр ✦ становится синим на первом токене и при завершении. С NO_COLOR он без цвета, а в простейшем терминале переходит на ASCII.
Глаголы размышлений
Рядом со спиннером стоит глагол: Сходимся… Каждые несколько секунд он сменяется с мягким размытием, а рядом показаны прошедшее время, токены и подсказка, что Esc прерывает работу.
Глаголы берутся из трёх семейств:
- Ремесло, семейство пера. Набрасываем, Оттачиваем, Шлифуем, Выверяем, Распутываем, Сплетаем, Дорисовываем.
- Кривые и геометрия. Сходимся, Ищем точку, Сводим кривые, Гнём дугу, Чертим, Касаемся, Огибаем, Интерполируем.
- Спокойная мысль. Размышляем, Прикидываем, Взвешиваем, Настаиваемся, Кристаллизуем, Собираем мысли.
Правила для нового глагола: в английском это причастие настоящего времени, в русском — глагол в первом лице множественного числа; одно-два слова, ничего тревожного, ничего за счёт пользователя и ничего, что приписывало бы модели чувства. «Падаем…» не подходит. «Паникуем…» тоже, как бы ни хотелось.
Когда ход заканчивается, индикатор оставляет одну строку, например Сошлись за 42 с · 6 инструментов · ↓ 3,1k, и кончик один раз вспыхивает синим. Эта вспышка — единственный повторяющийся акцент в переписке. В длинной сессии именно по ней вы краем глаза понимаете, что агент закончил.
У игривости есть место, и оно маленькое
Глаголы игривые. Всё вокруг них — нет.
Ошибки говорят, что произошло, почему и как это исправить: «Anthropic ограничил частоту запросов — повтор через 8 с», а не «Упс, что-то пошло не так». Запросы разрешений простые и точные: «Разрешить rm -rf dist?» Над оплатой, необратимыми действиями и безопасностью мы не шутим. Игривость живёт в состояниях ожидания, где она может сделать паузу короче на ощупь, ничего не делая менее понятным.
Лицо Nib
Талисман звали Nib ещё до того, как так назвали продукт. Это знак без просвета, которому дали два глаза: маленькое чернильное существо, у которого кончик гребня — кончик пера. Переименовав продукт, мы сохранили имя существа и сделали его лицом Nib. В светлой теме он цвета чернил с бумажными глазами, в тёмной — наоборот. Кончик гребня становится синим, а остальное сохраняет цвета чернил и бумаги.
У Nib шесть состояний:
| Состояние | Что он делает |
|---|---|
| Ожидание | Медленно дышит, моргает, может следить за курсором |
| Размышление | Откидывается назад, смотрит вверх на свой светящийся кончик |
| Работа | Наклоняется вперёд и быстро покачивается; искра выводит дугу, как росчерк пера |
| Успех | Маленький прыжок со сжатием и растяжением, радостные глаза |
| Ошибка | Лёгкая дрожь и поникшая поза, встревоженные брови, красная точка на кончике |
| Сон | Сплющен, медленно дышит, рядом плавают несколько «z» |
Где появляется Nib, продумано так же тщательно, как то, как он выглядит. Nib живёт в просторных и спокойных местах: на экранах приветствия, в пустых состояниях, при первом запуске, в окне «О программе», в уведомлениях, когда окно не в фокусе, и на странице 404. Его нет в переписке, в диффах, в запросах разрешений и рядом с необратимыми действиями. Талисман — хорошая компания, пока вы ждёте. И плохая — пока вы решаете, удалять ли каталог.
Nib — это чистый SVG и Motion: он чёткий в любом размере и, как и всё остальное, учитывает настройку уменьшения движения.
Команда в костюмах
Участникам команды — ИИ-агентам с ролью и расписанием, которых мы делаем следующими, — нужны были лица. Реалистичные человеческие портреты мы отвергли. Они воспринимаются как обман и плохо стареют.
Вместо этого каждый участник команды — это Nib в костюме своей роли, нарисованный мягкими матовыми чернилами на приглушённом фоне: золотой значок на лацкане у CEO, мегафон у маркетолога, наушники и парящий курсор у инженера, берет и карандаш у дизайнера, очки в проволочной оправе у аналитика, гарнитура у поддержки, стопка книг у исследователя. Имена помогают запомнить, названия ролей вызывают доверие: «Ava · CEO».
У каждого статуса, кроме цвета, есть форма. Работающий участник команды получает медленную синюю орбиту, заметную в сетке аватаров. Ожидание вашего ответа — янтарное кольцо со значком руки. Ошибка — красное кольцо со значком информации.
Движение в целом
Остальной интерфейс следует той же сдержанности. Движение объясняет, а не украшает. Переходы в интерфейсе длятся от 120 до 320 миллисекунд. Пружинная анимация отвечает за всё пространственное и прерываемое; простые затухания — за цвет и прозрачность, которые не пружинят. Исчезновение быстрее появления. А то, что вы делаете сотню раз в день, — отправка сообщения, переключение сессий, выбор строки — не анимируется вовсе.
Звук, по умолчанию выключен
Звуков не больше трёх, каждый короче 400 миллисекунд, и все следуют системной громкости: готово — мягкий восходящий интервал из двух нот, две линии, сходящиеся в точку; ждёт вас — один нейтральный щелчок; ошибка — одна низкая нота. Они выключены, пока вы их не включите.
Зачем всё это
Ничто из этого не делает агента умнее. Зато с ним становится проще жить по восемь часов в день. Спиннер, который что-то сообщает, единственная вспышка, которая говорит, что работа закончена, ошибки, с которыми можно что-то сделать, и спокойный интерфейс, который не мешает коду. Мы думаем, что это стоит сделать хорошо, и будем продолжать это шлифовать по мере того, как растёт Nib.