Перейти к содержимому
Курс USDC:$1,0000Газ:
Arcscan

Фирменный стиль

Знак и логотип Arcscan, сами файлы и правила, которые к ним прилагаются.

Здесь сами файлы, а не их изображения

Каждое превью ниже — это опубликованный файл, загруженный по тому же адресу, на который ведёт ссылка для скачивания: что видите, то и получите. Ничего не рисуется на лету, и ничего не выкладывается, если этого нет на диске. По вопросам, на которые эта страница не отвечает, пишите на [email protected].

Знак

Arcscan-logo-mark.svg на белом фоне
Arcscan-logo-mark.svg на чёрном фоне

Знак — вектор

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

SVG · 1254 × 1254 · 3,7 КБ · прозрачный фон

Скачать
Arcscan-logo-mark.png на белом фоне
Arcscan-logo-mark.png на чёрном фоне

Знак — растр

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

PNG · 1254 × 1254 · 997,6 КБ

Скачать
Arcscan-logo-mark-white.svg на белом фоне
Arcscan-logo-mark-white.svg на чёрном фоне

Знак — выворотка

Только монограмма: плоский белый, без диска, фон прозрачный. Для тёмных плашек, фотографий и печати в одну краску. На белом фоне она исчезает — именно это и показывает левое превью.

SVG · 1254 × 1254 · 2,3 КБ · прозрачный фон

Скачать

Горизонтальный логотип

Arcscan-lockup.svg на белом фоне
Arcscan-lockup.svg на чёрном фоне

Логотип — вектор, наследует цвет

Знак плюс надпись. Надпись задана через currentColor, поэтому при вставке прямо в страницу она принимает цвет текста этой страницы. Загруженный как изображение файл откатится к чёрному, потому что изображение не видит страницы, на которой стоит, — для таких случаев берите одну из двух версий с фиксированным цветом.

SVG · 163 × 48 · 3,1 КБ · прозрачный фон

Скачать
Arcscan-lockup-light.svg на белом фоне
Arcscan-lockup-light.svg на чёрном фоне

Логотип — вектор, для светлого фона

Тёмная надпись рядом с полноцветным диском. Для белых и светлых фонов.

SVG · 163 × 48 · 3,1 КБ · прозрачный фон

Скачать
Arcscan-lockup-dark.svg на белом фоне
Arcscan-lockup-dark.svg на чёрном фоне

Логотип — вектор, для тёмного фона

Белая надпись рядом с выворотной монограммой, без диска: тёмно-синий диск на тёмном фоне попросту не виден, и выкладывать его туда значило бы выкладывать знак, которого никто не увидит. Только для тёмных фонов.

SVG · 163 × 48 · 2,6 КБ · прозрачный фон

Скачать
Arcscan-lockup.png на белом фоне
Arcscan-lockup.png на чёрном фоне

Логотип — растр, для светлого фона

Отрисован самим сайтом, в том же Roboto Medium, что и на сайте, в четырёхкратном размере на прозрачном фоне. Берите его там, где гарнитура должна быть зафиксирована.

PNG · 644 × 192 · 32,4 КБ · прозрачный фон

Скачать
Arcscan-lockup-dark.png на белом фоне
Arcscan-lockup-dark.png на чёрном фоне

Логотип — растр, для тёмного фона

Тот же логотип того же размера, в белой выворотке на прозрачном фоне.

PNG · 644 × 192 · 10,2 КБ · прозрачный фон

Скачать
Arcscan-lockup-official.png на белом фоне
Arcscan-lockup-official.png на чёрном фоне

Логотип — из баннера

Вырезан из нашего баннера, в собственной гарнитуре баннера. Шапка сайта набирает то же слово в Roboto, поэтому написание совпадает, а начертание — нет. См. раздел «Написание» ниже.

PNG · 952 × 290 · 31,1 КБ · прозрачный фон

Скачать

Иконки

favicon.svg на белом фоне
favicon.svg на чёрном фоне

Фавикон — вектор

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

SVG · 1254 × 1254 · 3,7 КБ · прозрачный фон

Скачать
favicon.ico на белом фоне
favicon.ico на чёрном фоне

Фавикон — ICO

Та же иконка в контейнере, который запрашивают старые инструменты и агрегаторы, забирая /favicon.ico напрямую независимо от разметки страницы.

ICO · 16 × 16 · 32 × 32 · 48 × 48 · 4,1 КБ · прозрачный фон

Скачать
apple-touch-icon.png на белом фоне
apple-touch-icon.png на чёрном фоне

Иконка Apple touch

Непрозрачная, без альфа-канала и без собственных скруглений — маску накладывает сама iOS. Именно это показывает закладка на домашнем экране.

PNG · 180 × 180 · 6,6 КБ

Скачать
icon-192.png на белом фоне
icon-192.png на чёрном фоне

Иконка приложения, 192 px

Домашний экран Android и предложение установки; указывается манифестом веб-приложения.

PNG · 192 × 192 · 8,9 КБ · прозрачный фон

Скачать
icon-512.png на белом фоне
icon-512.png на чёрном фоне

Иконка приложения, 512 px

Заставка и карточка в стиле магазина приложений, из того же манифеста.

PNG · 512 × 512 · 26,4 КБ · прозрачный фон

Скачать
icon-maskable-192.png на белом фоне
icon-maskable-192.png на чёрном фоне

Maskable-иконка, 192 px

Дополнительные поля вокруг монограммы, чтобы платформа могла обрезать её в круг, сквиркл или скруглённый квадрат, не задев само изображение.

PNG · 192 × 192 · 6,9 КБ

Скачать
icon-maskable-512.png на белом фоне
icon-maskable-512.png на чёрном фоне

Maskable-иконка, 512 px

То же самое в размере, который лаунчер использует для самой крупной плитки.

PNG · 512 × 512 · 19,8 КБ

Скачать

Баннеры и изображения для соцсетей

Arcscan-social-banner.png на белом фоне
Arcscan-social-banner.png на чёрном фоне

Баннер для соцсетей

Наш баннер в полном разрешении: логотип, слоган и вид самого обозревателя. Для шапки профиля или заглавной иллюстрации к статье.

PNG · 3000 × 1000 · 1,7 МБ

Скачать
Arcscan-social-card.png на белом фоне
Arcscan-social-card.png на чёрном фоне

Карточка предпросмотра ссылки

Размер, под который любая соцсеть и любой мессенджер обрезают предпросмотр ссылки. Именно это изображение разворачивается при отправке ссылки на сайт.

PNG · 1200 × 630 · 33 КБ

Скачать
Arcscan-wordmark-official.png на белом фоне
Arcscan-wordmark-official.png на чёрном фоне

Только надпись

Слово из баннера, без знака, на прозрачном фоне. Краска — тёмно-синяя, как в баннере, поэтому файл рассчитан на светлые поверхности: на тёмной он не прочитается. Используйте только там, где знак присутствует на той же поверхности отдельно; одно не заменяет другое.

PNG · 609 × 124 · 37,2 КБ · прозрачный фон

Скачать

Минимальный размер

24 пикселей — нижняя граница, 32 — безопасный размер. Ниже 24 px разом отказывают две вещи, и это измерено, а не угадано: замкнутый треугольник внутри «A» заплывает белым, а тонкий штрих, пересекающий его, теряет от трети до половины контраста относительно эталона в 512 пикселей. Остаётся светлое пятно на тёмном диске, а не буква. На 32 px не теряется ничего. Если знак нужен меньше 24 px, берите фавикон — это та же монограмма, нарисованная жирнее именно по этой причине.

Знак, отрисованный в 16 пикселей16
Знак, отрисованный в 20 пикселей20
Знак, отрисованный в 24 пикселей24
Знак, отрисованный в 32 пикселей32
Знак, отрисованный в 48 пикселей48
Знак, отрисованный в 64 пикселей64

Один и тот же файл в каждом из размеров, без масштабирования. Если штрих поперёк «A» превратился в серую нитку, а треугольник внутри затянулся, знак взят слишком мелким.

Правила использования

Цвет

#01122F

Диск. Радиальный градиент, считанный прямо из файла знака: светлее всего в центре, темнее всего по краю. Если возможен только один плоский цвет, берите среднюю точку — #01122F. Весь градиент укладывается примерно в половину ступени светлоты, так что в любом размере, в котором его реально увидят, диск именно этого цвета.

#011538
Градиент диска, центральная точка.
#01122F
Градиент диска, средняя точка. Тот самый плоский тёмно-синий.
#020E27
Градиент диска, крайняя точка.

Монограмма. Тоже градиент, и это не плоский белый: от левого верхнего угла к правому нижнему он едва заметно холодеет. На экране разница почти не видна; на большой печатной поверхности — вполне. Воспроизводите градиент там, где можете, и берите #FFFFFF там, где не можете.

#FFFFFF
Градиент монограммы, первая точка. Чистый белый.
#F8FBFF
Градиент монограммы, средняя точка.
#EDF3FB
Градиент монограммы, последняя точка. Самая холодная.

Палитра интерфейса. Собственные CSS-токены сайта, опубликованные для тех, кто делает страницу, которой предстоит стоять рядом. #0784C3 — синий интерфейса: ссылки, фокус, активное состояние. Это не фирменный цвет, и в знаке он не встречается.

#0784C3--arc-primary
Синий интерфейса. Ссылки, фокус, активное состояние — не цвет знака.
#066A9C--arc-link-hover
Наведение на ссылку и нажатое состояние.
#081D35--arc-text-ink
Тёмный тон. Текст тёмного интерфейса и полоса героя.
#212529--arc-text
Основной текст на светлом.
#6C757D--arc-text-dim
Второстепенный и приглушённый текст.
#E9ECEF--arc-border
Тонкие рамки и разделители.
#F8F9FA--arc-bg-subtle
Мягкая заливка: подвал, блоки кода, чипы.
#111A2E--arc-bg-page
Поверхность страницы в тёмной теме.
#00A186--arc-success
Успех, а в Arc — окончательность.
#DC3545--arc-danger
Ошибка.
#FFC107--arc-warning
Предупреждение, баннер тестовой сети.
#2775CA--arc-usdc
Акцент нативной стоимости. Никогда не используется как фирменный цвет.
#6F42C1--arc-system
Системные сущности и предкомпилированные контракты.

В векторных логотипах надпись — это живой текст

Все три SVG-логотипа набирают слово текстовым элементом SVG гарнитурой Roboto с системным запасным вариантом — так же, как это делает шапка сайта. SVG, загруженный как изображение, не может воспользоваться шрифтами страницы, поэтому читатель без установленного Roboto увидит свою собственную гротескную гарнитуру, а не эти начертания. Если типографика должна быть зафиксирована, возьмите один из PNG-логотипов — или возьмите знак отдельно и наберите слово той гарнитурой, которой уже пользуетесь: это выглядит лучше подменённого шрифта.

Написание

Вопросы о бренде и для прессы