SECTION LABEL
01 · ИЕРАРХИЯ
ТЕСТОВАЯ СТРАНИЦА · HYPOTHESIS V1
Типографический паспорт DOOB
Проверяем не отдельный красивый экран, а устойчивую систему: иерархию, длину строки, интервалы и поведение текста на разных ширинах.
01 · ИЕРАРХИЯ
Одна шкала — разные задачи
Каждая строка ниже является полноценным текстовым стилем: размер, интерлиньяж и вес меняются вместе. Значения справа пересчитываются при изменении ширины окна.
PAGE TITLE
Упаковка с характером
SECTION TITLE
Создаём вещи надолго
SUBSECTION TITLE
От идеи до тиража
LARGE CARD TITLE
Производство полного цикла
CARD TITLE
Гравировка
LEAD · ЭКСПЕРИМЕНТ
Короткий вводный текст помогает понять назначение блока до чтения подробностей.
BODY
Основной текст остаётся 16 пикселей на всех ширинах. Комфортный интерлиньяж и ограниченная длина строки важнее попытки уместить прежнюю композицию за счёт уменьшения букв.
COMPACT BODY
Короткая подпись, характеристика или дополнительное пояснение.
LEGAL
Служебная информация и юридические пояснения.
02 · КОНТЕНТНЫЙ БЛОК
Разработаем дизайн под ключ
От эскиза и подбора материала до готового изделия, упаковки и доставки тиража.
Наши дизайнеры и технологи помогут превратить идею в воспроизводимую конструкцию. Объяснят разницу между материалами, заранее покажут ограничения технологии и предложат решение, которое можно уверенно повторить в тираже.
03 · КАРТОЧКИ
Повторяемая структура карточек
Одинаковые отношения «изображение → заголовок → текст» помогают воспринимать карточки как одну группу, даже когда содержание и длина текста различаются.
Берёмся за невозможное
Сложный срок или необычная конструкция — сначала ищем рабочий способ, а не причину отказаться.
Полный цикл производства
Все основные этапы выполняем сами и контролируем качество от раскроя материала до упаковки тиража.
Работаем как партнёры
Вникаем в задачу, предлагаем варианты и честно объясняем, что получится в рамках бюджета.
04 · КОНТАКТЫ И ФОРМА
Свяжитесь с нами
Короткий lead объясняет действие. Подробности и контактные данные остаются простыми и легко сканируются.
Телефон
+7 (921) 994-10-38
Леонид
Info@doob.bz
Ответим при первой возможности
Обсудим ваш проект
Демонстрационная форма ничего не отправляет. На рабочей странице здесь размещается согласие с политикой конфиденциальности.
05 · SPACING & MEASURE
Расстояния и длина строки
Мелкие значения формируют компоненты, средние группируют содержание, крупные создают ритм страницы. Блок выбирает токен по смыслу, а не произвольное число.
4px
деталь
8px
деталь
12px
деталь
16px
компонент
24px
компонент
32px
компонент
40px
группа
48px
группа
64px
секция
80px
секция
96px
секция
Label → заголовок
24 px wide/medium, 16 px compact.
Заголовок → текст
24 px wide/medium, 16 px compact.
Текст → коллекция
48 px wide/medium, 32 px compact.
Смена сценария
64 px wide, 48 px medium, 40 px compact.
Матрица вертикальных связей
Значение выбирается по отношению между соседними элементами. Поэтому один и тот же интервал повторяется во всех блоках с одинаковой структурой.
| Связь | Wide | Medium | Compact |
|---|---|---|---|
section-yкрай секции → контент | 80 | 64 | 48 |
section-y-compactкомпактная секция | 64 | 48 | 32 |
label-titleмаркер → заголовок | 24 | 24 | 16 |
title-copyзаголовок → lead/body | 24 | 24 | 16 |
lead-bodylead → основной текст | 16 | 16 | 16 |
copy-collectionтекст → карточки/список | 48 | 48 | 32 |
group-groupкрупная группа → следующая группа | 40 | 40 | 32 |
major-semantic-breakзавершённый сценарий → альтернативный сценарий | 64 | 48 | 40 |
same-surface-sectionконтент секции → заголовок следующей на одном фоне | 96 | 80 | 80 |
same-surface-mediaконтент секции → крупное медиа на одном фоне | 96 | 80 | 64 |
groupDivider-slotполный интервал с линией внутри | 40 | 40 | 32 |
rowDivider-paddingконтент строки → линия | 16 | 16 | 12 |
sectionDivider-extraдобавка сверх section-y | 0 | 0 | 0 |
media-titleизображение → заголовок | 24 | 24 | 24 |
media-captionизображение → подпись | 12 | 12 | 12 |
card-title-bodyзаголовок карточки → текст | 16 | 16 | 12 |
contact-title-valueназвание контакта → значение | 8 | 8 | 8 |
body-actionтекст → кнопка | 32 | 32 | 24 |
subsection-formзаголовок → поля | 32 | 32 | 24 |
field-stackгруппа поля → группа поля | 16 | 16 | 16 |
label-controllabel → input | 8 | 8 | 8 |
field-actionпоследнее поле → кнопка | 24 | 24 | 24 |
form-legalформа → пояснение | 24 | 24 | 16 |
Ограничения ширины текста
ch — ширина символа «0» текущего шрифта. Итоговая ширина всегда равна меньшему из двух значений: доступной ширине контейнера или лимиту роли.
06 · DIVIDERS
Разделители без лишнего воздуха
Линия не добавляет второй комплект отступов. Она либо занимает середину уже существующего интервала, либо становится границей элементов с собственными padding.
A · ВНУТРИ ГОТОВОГО ИНТЕРВАЛА
Первая смысловая группа
Завершённый фрагмент контента.
Следующая смысловая группа
Общий интервал остаётся 40/32 px.
B · ГРАНИЦА СТРОК
МатериалБерёзовая фанера
rowDivider
ТехнологияЛазерная гравировка
rowDivider
ТиражОт 50 экземпляров
C · ШИРИНА ЛИНИИ
container100% контейнера
textдо 65ch — по текстовой колонке
component100% локального компонента
groupDivider40 / 40 / 32pxЭто полный слот между группами. Линия 1 px центрируется внутри него; интервал не становится 80 px.
rowDivider16 / 16 / 12pxPadding каждой строки до границы. Между текстом соседних строк получается padding + линия + padding.
sectionDivider0px дополнительноЛиния находится на границе секций. До контента работают уже существующие section-y.