COMPAXЗнак
Символ чата, внутри которого компас
Облачко реплики, а на месте слов — стрелка. Три угла скруглены, четвёртый нет: острый — это хвостик, и он внизу слева, там же, где у сообщения, присланного кем-то другим. Контур — одна непрерывная линия одной толщины, и половина ширины стрелки равна ровно этой толщине: клинок — это плотное внутри контура, а тонкая стрелка в тяжёлом кольце первой пропадает на малых размерах.
Рисунок живёт в коде, а не в файле: app/lib/src/ui/logo.dart держит числа, а just app logo выписывает их в landing/assets/compax.svg. Второй копии, которую забудут обновить, не существует. Файлы для скачивания выше собираются в браузере из того же самого SVG.
На экране
Где он оказывается на самом деле
Выкраска тёмного фона — это утверждение о тёмном фоне; здесь же сама вещь, на мониторе, в комнате. На экране идут три страницы сайта со знаком — открытие, знак на каждом допустимом фоне и ряд карточек, — а камера подъезжает один раз и медленно поворачивается, а не подъезжает и отъезжает к каждой. Знак никогда не видят сам по себе: его видят в левом верхнем углу чего-то. Здесь нет ни моделей, ни фотографий — стол, монитор, клавиатура и мышь это выдавленные скруглённые прямоугольники, а экран — холст, нарисованный из тех же двух контуров, что и всё остальное.
Нужен WebGL. Без него панель просто не показывается, а не подменяется картинкой самой себя.
Воздух
Свободное поле и самый малый размер
Оставляйте с каждой стороны четверть собственной ширины знака. Это отмеряется от знака, а не в пикселях, поэтому масштабируется вместе с ним: на любом размере зазор — четверть того, что вы только что поставили.
Поле
В заштрихованную полосу не заходит ничто — ни шрифт, ни линейка, ни край карточки.
Самые малые размеры
16px — это пол, и именно на этом размере рисунок и решался: хвостик — угол, а не шип, и на контуре нет точек, потому что и то и другое пропадало первым.
Фоны
На поверхностях, где ему приходится жить
Знак перекрашивается целиком, никогда по частям. На всём светлом он — краска страницы, на всём тёмном — её бумага. И в том и в другом случае он одного тона, и ровно поэтому переживает и то и другое.
Поверх фотографии или чего угодно, чьей яркостью вы не управляете, ставьте знак на подложку, а не надейтесь. Белая капсула со знаком внутри — это решение; знак, плывущий по небу, — подбрасывание монеты, которое в половине случаев проигрывает.
Цвет
Один серый и краски вокруг него
Сам файл — средний серый. Это намеренно, и это не та краска, которую видят на сайте: два места, где сырой цвет всё-таки виден — вкладка браузера и шапка самого приложения, — приходятся на светлый фон и на тёмный, и спросить, какой из них первым, там негде. Средний серый переживает оба; краска переживает один и растворяется в другом.
Нажмите на выкраску, чтобы скопировать её hex. Три тона приложения — его собственные, из app/lib/src/ui/theme.dart; две краски страницы — сайта, из landing/styles.css.
Шрифт
Две гарнитуры, и выбирает их то, что говорится
Латиницу набирает Poppins. Кириллицы в нём нет вовсе, а стек шрифтов проваливается посимвольно и молча — поэтому русский заголовок набирался тем, что случайно оказалось на машине. Ответ на это — Montserrat: геометрический, круглые овалы, та же прямая монолинейная насыщенность, и украинские і ї є ґ в нём нарисованы, а не одолжены. Переворачивается вся страница, а не только её кириллица, потому что две гарнитуры внутри одного предложения показывают свой шов ровно там, где стоят технические слова.
Poppins · латиница
Montserrat · кириллица
Связка
COMPAX в 700, прописными, без разрядки. Промежуток между знаком и словом — треть ширины знака, а высота знака равна высоте прописных, а не строке.
Вывернутая
Та же связка, у которой обе половины перевёрнуты вместе. Знак никогда не остаётся светлым, пока слово темнеет, и наоборот.
В тексте
Как имя пишется в предложении
Compax — это мессенджер, внутри которого групповой кошелёк.
Отправьте из Compax или из любого кошелька, который у вас уже есть.
Так
Одна заглавная C, остальное строчными, гарнитурой и насыщенностью самого предложения. Знак может стоять прямо перед словом, когда строке это нужно, — размером с заглавную букву.
COMPAX — это мессенджер, внутри которого групповой кошелёк.
Отправьте из CompaX™, или из любого кошелька, который у вас уже есть.
Не так
Не прописными в связном тексте — это словесный знак, а словесный знак внутри предложения кричит. Никаких заглавных внутри слова, никакого значка торговой марки, никакого своего цвета.
Вокруг него
Формы, которые идут с ним
Их две, и обе — фоны, а не знаки. Они идут позади вещей; они никогда не подменяют логотип и никогда не оказываются внутри него. Каждая нарисована здесь в том размере, в каком её рисует сайт, — так что текстура на этой странице та же самая, мимо которой посетитель только что пролистал.
Так — нельзя
Десять вещей, которых с ним делать не надо
Каждая из них нарисована неправильно нарочно, чтобы неправильность было видно, а не описано.
Редакционная политика
Как мы пишем тексты для этого сайта
Тексты для этого сайта пишут разработчики Compax. У нас нет отдельной редакции, гостевых статей и спонсорских материалов. Каждая страница хранится в открытом репозитории проекта рядом с кодом, который она описывает. На ней указана дата последнего коммита, в котором её меняли.
Утверждения на этих страницах либо подтверждены измерениями, либо помечены как примеры. Числа взяты из кода или из отчёта, ссылка на который стоит рядом. Даты внизу страниц и в карте сайта берутся из истории Git, а не из времени сборки.
Ошибки в тексте мы исправляем в исходнике, а дата на странице отражает изменение. Отдельной копии, которая могла бы устареть, нет. Сообщить об ошибке можно через страницу контактов — туда же, куда направляют все остальные обращения.