Новая палитра
и фирменная типографика.
бренд-система herzring · 2026
Посмотри как будут смотреться основные элементы сайта в новой системе. Тёмно-синий как основной цвет бренда, яркий синий — для редких акцентов, чёрный текст. Шрифты: Roboto Serif (заголовки 900), Roboto (UI), Roboto Condensed (подзаголовки и метки).
О бренде
HerzRing — мастерская украшений из серебра 925°. Делаем кольца, серьги, кулоны и браслеты с авторским дизайном. С 2018 года.
Миссия
Сделать настоящее серебро доступным украшением для повседневной жизни — без люкс-наценок и без компромисса в качестве. Каждое изделие проходит ручной контроль перед отправкой.
Ценности
Минимализм формы и максимальная честность материала. Только серебро 925 пробы. Только проверенные сплавы. Никаких «под серебро» и покрытий, которые сходят за полгода.
Отличия
Полный цикл в одной мастерской: от эскиза до полировки. Гравировка без доплаты. 12 месяцев гарантии. Бесплатная переоснастка размера в течение 30 дней.
Логотип
Основной знак — чёрный wordmark. На тёмном фоне используется инверсная версия (белая). Запас охранного поля — минимум высота буквы «H» со всех сторон.
Знак приложения
Металлическая монограмма на чёрном фоне — иконка мобильного приложения HerzRing Soul и аватар по умолчанию. Используется квадратом со скруглением, без дополнительной рамки и теней; на светлом фоне сохраняет собственный тёмный фон.
- Использовать на белом, светло-сером или фирменном navy фоне
- Белую инверсию — только на тёмных фонах
- Сохранять охранное поле (минимум высота «H» вокруг)
- Масштабировать пропорционально, минимальная ширина — 80 px
- Менять цвет логотипа на градиенты или нефирменные цвета
- Растягивать или сжимать непропорционально
- Класть на пёстрый фон без подложки
- Окружать рамкой или добавлять эффекты (тени, обводки)
- Использовать раскрашенные / выцветшие сканы — только исходник PNG/SVG
Палитра
Основной цвет используется массово (фон CTA, заголовки, иконки), второй — редкие акценты (ссылки, выделения), серый — границы и тонкие разделители.
Шрифты
Roboto — для заголовков и UI (600 — крупные, 400 — кнопки/инпуты). Roboto Serif — основной текст статей и описаний товаров. Roboto Condensed — uppercase подписи, метки, eyebrow.
Альтернативный вариант заголовков — Roboto Condensed Black 900. Уже, чётче, "журнальнее". Подходит для динамичных промо-страниц, рекламных hero-блоков, кампаний, плакатов. Сравни пары ниже: один и тот же текст в обоих стилях.
- + Hero на промо-баннерах и кампаниях
- + UPPERCASE заголовки секций ("МУЖЧИНАМ", "ЛИМИТ")
- + Карточки-плашки с акцентом (sale, new, limited)
- + Постеры и социальные посты
- + Шапки писем и email-кампаний
- − Заголовки статей блога и описания товаров
- − Заголовки в каталоге (более спокойный ритм)
- − H1 на product page (характеристики важнее визуального шума)
- − Юридические и инструкционные страницы
- · Hero / промо — Condensed 900 UPPERCASE
- · Section title — Serif 900 mixed-case
- · Sub / eyebrow — Condensed 300 capitalize
- · Body — Serif 400
- · UI / buttons — Roboto 500
Текстовый блок
Так выглядят страницы блога и описания товаров. Roboto Serif — для чтения, синий — только для ссылок.
Серебро 925 пробы — это сплав, в котором 92.5% чистого серебра и 7.5% других металлов (обычно меди). Такая комбинация даёт прочность без потери благородства.
Почему именно 925°
Чистое серебро слишком мягкое для повседневной носки — оно деформируется, царапается, теряет форму. Добавление меди делает украшение пригодным для жизни, но сохраняет тёплый блеск и гипоаллергенность.
В нашей мастерской мы используем проверенный сплав и финишное родирование — это тонкий слой родия, который защищает от потемнения и придаёт украшению холодный белый оттенок.
«Хорошее серебро не блестит — оно светится изнутри». — старая ювелирная пословица
Как ухаживать
- Снимайте украшение перед душем, плаванием и тренировкой
- Храните в мешочке отдельно от других металлов
- Чистите мягкой тканью — без абразивных средств
- Раз в год приносите в мастерскую на профессиональную полировку
При правильном уходе кольцо служит десятилетиями — и со временем становится только красивее, обретая патину и историю.
Кнопки
Primary — основное действие на странице (одна!). Secondary — для ссылок-кнопок и фокус-моментов. Outline и ghost — для второстепенных действий.
Карточки товара
Минимальная карточка для каталога: фото 3:4 (вертикальное, портретное — для украшений и крупных планов кадра), категория (caps), название, цена. Плашка с иконками на фото — в трёх вариантах ниже.
Ещё 3 варианта справа (D / E / F) и 3 слева (G / H / I). Выбирай под характер коллекции — от строгого до игривого, от прижатого до парящего.
Справа · D / E / F
Слева · G / H / I
Filled-иконки · J / K / L
Те же 12 иконок в Fill-weight (как у Phosphor Fill) — заливные силуэты, читаются издалека. Подходят для крупных размеров, тёмных фонов, premium-карточек.
Rounded chevron · M / N / O
G-shape перевёрнут вправо: прижат к правому краю, не во всю высоту, скруглённые углы 45° (плавные срезы из 10 точек polygon).
Крупные цифры
Roboto Serif Light + градиент Navy → Blue. Используется для статистики, hero-блоков, «доверительных» секций.
Отступы & интервалы
8-пиксельная сетка с одним исключением (4 px — для тонких внутренних зазоров). Все паддинги, гэпы, margin'ы берутся отсюда. Не отступайте «на глаз» — всегда из набора.
- 4px — иконка ↔ текст
- 8px — паддинг чипа
- 12px — паддинг малой кнопки
- 16px — паддинг инпута, gap карточек
- 24px — gap карточек товара
- 32px — между параграфами в статье
- 48px — заголовок → первый блок
- 64px — между подразделами
- 80px — section padding (mobile)
- 120px — section padding (desktop hero)
- 120px — отступ после большого CTA
Сетка & контейнер
12-колоночная сетка, контейнер 1180 px, 24 px gutter. На мобильных — 1 колонка, 16 px gutter, контейнер на ширину экрана с боковыми отступами 24 px.
Скругления и тени
Четыре уровня скругления и три тени. Никаких «случайных» значений — только из системы.
Поля ввода
Минимальные рамки, акцент при фокусе — синий primary.
Голос бренда
Говорим просто и по делу. Без ювелирной пафосности, без «эксклюзивно для вас». Уважаем время покупателя — пишем как живой человек, который знает материал.
Фотостиль
Основной формат — вертикальный 3:4 (портрет). Естественное освещение, тёплые тёмные тона, минимум обработки. Украшения на руке / шее / в коробочке — без бликов и пыли.
- Вертикально 3:4 — основной формат для всех каталожных позиций
- Естественный свет — окно или мягкий софтбокс
- Нейтральный или тёмно-фактурный фон (дерево, мрамор, ткань)
- Минимум 1500×2000 px, без резкого зума
- Один товар — минимум 4 ракурса: главный, бок, на руке, упаковка
- Прямую вспышку в лоб — даёт блики и убивает фактуру серебра
- Пёстрые фоны (узоры, цветы, мешанина)
- Сильную HDR-обработку и «инстаграмные» фильтры
- Перетянутую насыщенность — серебро становится синим / зелёным
- Горизонтальные кадры для каталога — только 3:4
HerzRing Icons
Дополнение к Phosphor — 20 иконок в Regular weight + 9 в Fill weight специально для здоровья и активности (под направление носимых устройств / трекеров). Совместимы по стилю: viewBox 0 0 256 256, stroke 16 px (regular) или фигурная заливка (fill), round caps. По умолчанию рисуются градиентом Navy → Blue через url(#brandGrad).
<!-- 1) Подключите defs один раз на странице (или impt-нем как библиотеку): --> <svg width="0" height="0" style="position:absolute" aria-hidden="true"> <defs> ... все <symbol id="hri-*"> здесь ... </defs> </svg> <!-- 2) Используйте в любом месте через <use> --> <svg width="24" height="24" style="color:#0F2451"> <use href="#hri-heart-ekg"/> </svg> <!-- 3) Или с фирменным градиентом Navy → Blue: --> <svg width="48" height="48" style="color:url(#brandGrad)"> <use href="#hri-heart-pulse"/> </svg>
Заливные версии — для крупных размеров, тёмных фонов, плашек с filled-стилем (J / K / L). Используй #hri-X-fill через <use>. Регулярная и filled-версия живут рядом — выбирай по контексту.
Спецификации для дизайнеров
Перевод системы в значения для Adobe Illustrator / Photoshop / InDesign и для печати. Цвета даны в HEX / RGB / CMYK / Pantone (приблизительные). Размеры — в px (web), pt (Ai/Ps) и mm (печать).
Цветовые системы
| Цвет | HEX | RGB | CMYK (coated) | Pantone ≈ | Назначение |
|---|---|---|---|---|---|
| Navy | #0F2451 | 15 / 36 / 81 | C82 M56 Y0 K68 | PMS 2766 C | Primary · фон CTA, заголовки на светлом |
| Blue | #007AFF | 0 / 122 / 255 | C100 M52 Y0 K0 | PMS 2925 C | Accent · ссылки, фокус, выделения |
| Near Black | #121216 | 18 / 18 / 22 | C18 M18 Y0 K91 | PMS Black 6 C | Заголовки, ключевой текст |
| Body | #222224 | 34 / 34 / 36 | C6 M6 Y0 K86 | PMS Neutral Black C | Основной цвет текста статей и UI |
| Grey | #DDDDDD | 221 / 221 / 221 | C0 M0 Y0 K13 | PMS Cool Gray 1 C | Границы, разделители, нейтральный фон |
| Red | #b52b2e | 181 / 43 / 46 | C0 M76 Y75 K29 | PMS 7621 C | Скидки, ошибки, предупреждения |
Типографика — pt / tracking / leading
| Стиль | Шрифт | Вес | Размер (px / pt) | Leading | Tracking (Ai/Ps) |
|---|---|---|---|---|---|
| Display | Roboto Serif | 900 Black | 80 px · 60 pt | 60 pt (100%) | −40 / −2% |
| H1 | Roboto Serif | 900 Black | 50 px · 38 pt | 38 pt (100%) | −30 / −1.5% |
| H2 | Roboto Serif | 900 Black | 38 px · 28 pt | 28 pt (100%) | −20 / −1% |
| H3 | Roboto Serif | 900 Black | 28 px · 21 pt | 21 pt (100%) | 0 |
| H4 | Roboto Serif | 800 ExtraBold | 22 px · 16 pt | 17 pt (105%) | 0 |
| Lead | Roboto Serif | 400 Regular | 20 px · 15 pt | 23 pt (155%) | 0 |
| Body | Roboto Serif | 400 Regular | 16 px · 12 pt | 20 pt (165%) | 0 |
| Small | Roboto Serif | 400 Regular | 14 px · 10.5 pt | 17 pt (160%) | 0 |
| UI | Roboto | 400 Regular | 15 px · 11 pt | 15 pt (140%) | 0 |
| Subtitle | Roboto Condensed | 300 Light | 16 px · 12 pt | 17 pt (140%) | +10 / capitalize |
| Caption | Roboto Condensed | 500 Medium | 12 px · 9 pt | 11 pt | +140 / 0.14em / UPPER |
| Button | Roboto | 500 Medium | 15 px · 11 pt | 11 pt (100%) | 0 |
Отступы — px / pt / mm
| Token | Web (px) | Ai / Ps (pt) | Печать (mm) | Использование |
|---|---|---|---|---|
| --s-1 | 4 px | 3 pt | 1.06 mm | Иконка ↔ текст, внутренние зазоры чипа |
| --s-2 | 8 px | 6 pt | 2.12 mm | Паддинг бейджа, gap внутри инпута |
| --s-3 | 12 px | 9 pt | 3.17 mm | Паддинг малой кнопки, gap чипов |
| --s-4 | 16 px | 12 pt | 4.23 mm | Паддинг инпута, gap карточек |
| --s-5 | 24 px | 18 pt | 6.35 mm | Container side, gap карточек товара |
| --s-6 | 32 px | 24 pt | 8.47 mm | Между параграфами в статье |
| --s-7 | 48 px | 36 pt | 12.70 mm | Заголовок → первый блок секции |
| --s-8 | 64 px | 48 pt | 16.93 mm | Между подразделами |
| --s-9 | 80 px | 60 pt | 21.17 mm | Section padding (mobile) |
| --s-10 | 120 px | 90 pt | 31.75 mm | Section padding (desktop hero) |
Сетка и артборды
| Артборд / экран | Размер (px) | Размер (mm @ 300 dpi) | Колонки | Gutter | Side margin |
|---|---|---|---|---|---|
| Mobile | 375 × 812 | 31.75 × 68.75 | 1 | 16 px / 12 pt | 24 px / 18 pt |
| Tablet | 768 × 1024 | 65.02 × 86.69 | 2 | 20 px / 15 pt | 32 px / 24 pt |
| Desktop | 1440 × 900 | 121.92 × 76.20 | 12 (max 1180) | 24 px / 18 pt | 24 px / 18 pt |
| Print A4 | 2480 × 3508 | 210 × 297 | 12 | 5 mm | 15 mm |
| Print A5 | 1748 × 2480 | 148 × 210 | 6 | 4 mm | 12 mm |
Логотип — минимумы и форматы
| Параметр | Web | Print (300 dpi) | Комментарий |
|---|---|---|---|
| Минимальная ширина | 80 px | 20 mm · 236 px | Меньше — нечитаемо |
| Рекомендуемая ширина | 120–240 px | 30–60 mm | Для хедера / визитки |
| Охранное поле | = высота H | = высота H | Со всех сторон, обязательно |
| Формат — основной | SVG | AI / EPS / PDF | Вектор, без эффектов |
| Растровый | PNG @1x/@2x/@3x | TIFF 300 dpi | На прозрачном фоне |
| Цвет | #121216 / #FFFFFF | K100 / 0 paper | Один цвет, без градиентов |
DPI и экспорт
| Контекст | DPI | Цвет-профиль | Формат | Sharpening |
|---|---|---|---|---|
| Web · фото товара | 72 ppi | sRGB IEC61966-2.1 | WebP (q 80) / JPG (q 85) | Smart Sharpen 0.3 px |
| Web · hero / баннер | 72 ppi | sRGB | WebP @2x | Без |
| Soc · Instagram / VK | 72 ppi | sRGB | JPG (q 90) | Smart Sharpen 0.5 px |
| Print · карточка / визитка | 300 dpi | ISO Coated v2 (CMYK) | PDF/X-4 / TIFF | Output Sharpen Print |
| Print · широкоформат | 150 dpi | CMYK по спецификации | TIFF без сжатия | Smart Sharpen 1 px |