/* Delivery Pro China — design tokens * Hallmark · genre: modern-minimal · theme: custom (vibe: "signal blue on ink, white daylight") * paper oklch(98.4% 0.003 258) light · accent oklch(63.9% 0.117 250) chromatic-blue · display grotesk-sans * * ═══ СМЕНА БРЕНДА 19.08.2026: лайм → синий из нового логотипа ═══ * * Тон 258 взят из логотипа и снят ПИПЕТКОЙ с файла, а не подобран на глаз: * тёмный синий (хохолок, линии скорости, полоса под «DPC») — #0060d1, светлый * (буква «P») — #3e8fe1. Нейтрали переведены на тот же тон — холодный серый * вместо зеленоватого, потому что логотип живёт на белом, а не на тёплой бумаге. * * ПОЧЕМУ ЭТО НЕ «ПОВОРОТ ТОНА». Синий и зелёный по-разному существуют в sRGB. * Лайм держит хрому 0.200 на светлоте 72% — синий на той же светлоте не даёт * больше 0.147, и поворот превратил бы акцент в блёклый #68a5ff. Максимум * насыщенности у синего на светлоте около 60%, у лайма — около 80%. Поэтому * менялась не только координата тона, но и светлота, а за ней — расчёт * контраста в каждой паре. * * ЧТО ИЗ ЭТОГО ВЫШЛО ВАЖНОГО. Заливка акцента стоит на 69%, а не на логотипных * 59%, и это вынужденно: на 59% тёмный текст ещё читается (4.64), а светлый уже * нет (3.61), и одновременно акцент обязан читаться КАК ТЕКСТ на тёмной полосе, * где нужно не ниже 59.3%. Два требования смыкались в щель. Разжало их то, что * в логотипе синих ДВА: тёмный (буквы, хохолок) и светлый (буква P) — светлый и * взят в заливку. Теперь обе пары дают 6.66 вместо впритык. * * НИ ОДНО ЗНАЧЕНИЕ НЕ ВЫХОДИТ ЗА sRGB, и это не педантизм. Проверка контраста * зажимает КАНАЛ, а браузер для `oklch()` сжимает ХРОМУ — на цвете вне охвата * это два разных цвета, и сторож считал бы по одному, а человек смотрел на * другой. Держит `scripts/check-contrast.py`, раздел охвата. */ :root { /* ---------- цвет ---------- Тон 258 у ВСЕГО, включая нейтрали: логотип чёрно-синий на белом, и зеленоватый подтон бумаги спорил бы с ним на каждом экране. Хрома у нейтралей мизерная (0.003–0.022) — это не «синий серый», а серый, у которого холодная сторона, а не тёплая. */ --color-paper: oklch(98.4% 0.003 258); --color-paper-2: oklch(96% 0.006 258); --color-paper-3: oklch(92.8% 0.009 258); --color-rule: oklch(88% 0.009 258); /* Рамка полей ввода — НЕ та же линия, что декоративные разделители. Разделитель между строками таблицы может быть еле заметным: он ничего не сообщает. Граница поля ввода сообщает, где поле, и по WCAG 1.4.11 обязана давать 3:1 против фона. Замер 08.08.2026: --color-rule давал 1,38 против бумаги и 1,27 против карточки — поле почти не видно тому, кто плохо различает светлые оттенки. После смены бренда: 3,48 против бумаги и 3,24 против карточки — на волос лучше прежних 3,38 и 3,12. */ --color-field-rule: oklch(62% 0.014 258); /* То же на тёмных полосах: 3,63 против тёмной карточки (было 3,40). */ --color-field-rule-deep: oklch(56% 0.020 258); /* Та же граница ПОД КУРСОРОМ. Отдельный токен, а не литерал в стилях, по той же причине, что и `--color-muted-invert` ниже: цвет, которого нет в токенах, не проверяет никто. И проверять здесь есть что — до 20.08.2026 литерал давал 2,37 против тёмной карточки, то есть наведение делало границу ТУСКЛЕЕ покоя (3,63). Отклик, отменяющий сам себя, хуже отсутствующего: человек видит, что поле откликнулось, и не понимает, что стало хуже. Теперь 5,86 — шаг вверх, а не вниз, и его сторожит отдельный раздел `check-contrast.py`. */ --color-field-rule-deep-hover: oklch(68% 0.014 258); /* Подсказка ВНУТРИ поля на тёмной полосе (формат ввода: «400», «2,4»). Тоже был литерал, тоже мимо проверки: 3,07 при норме 4,5 для текста. Стало 5,02. Светлее делать нельзя — подсказка начнёт спорить с введённым текстом (--color-ink-invert, 96 %). */ --color-field-hint-deep: oklch(64% 0.012 258); /* 53,5 %, а не 58: на бумажном фоне мелкий текст этим цветом давал контраст 3,98 при норме 4,5. Замер — подписи полей, крошки, заголовки таблиц. На зелёной палитре стало 4,71, на синей 4,93 — то же решение, пересчитанное под новую светлоту бумаги. */ --color-neutral: oklch(53.5% 0.013 258); --color-muted: oklch(44% 0.016 258); --color-ink: oklch(20% 0.018 258); /* чёрный логотипа, с синей стороной */ --color-ink-invert: oklch(96% 0.006 258); --color-deep: oklch(18% 0.020 258); /* тёмные полосы */ --color-deep-2: oklch(23% 0.022 258); --color-deep-rule: oklch(32% 0.020 258); /* Приглушённый текст НА ТЁМНОЙ полосе. Тот же оттенок, что --color-muted на бумаге, но вывернутый по светлоте. До 15.08.2026 это значение стояло литералом в двух местах стилей — и в проверку контраста не попадало вовсе: она сверяет пары ТОКЕНОВ. Цвет, которого нет в токенах, не проверяется никем, а на тёмном фоне ошибиться в светлоте легче всего. */ --color-muted-invert: oklch(78% 0.014 258); /* СВЕТЛЫЙ синий логотипа — тот, которым набраны хохолок и буква «P». Значение ФИРМЕННОЕ: `#5090D0` из пакета дизайнера (20.08.2026), а не снятое пипеткой. Он и есть заливка: на нём лежит ТЁМНЫЙ текст, и он же читается на тёмной полосе. Логотипный тёмный синий в этой роли не годится — разбор в шапке файла. ДО 20.08.2026 ЗДЕСЬ СТОЯЛО УГАДАННОЕ ЗНАЧЕНИЕ. Пипетка по картинке дала `#3e8fe1` = oklch(64% 0.146 251): светлота и тон угаданы почти точно, а насыщенность завышена на четверть (0.146 против 0.117). Разница не бросается в глаза по отдельности и видна рядом с настоящим логотипом — кнопка «звонче» марки в шапке. Пипетка снимает пиксель, а пиксель растра несёт сглаживание; фирменный цвет берут у автора, а не у картинки. */ --color-accent: oklch(63.9% 0.117 250); /* ТЁМНЫЙ синий логотипа — линии скорости, стрелка и полоса под «DPC». Фирменный `#284880`. Ссылки и акцентные слова на бумаге. Прежнее значение `#0060d1` = oklch(51.3% 0.188 258) было не из логотипа вовсе: там нет такого цвета ни в одном пикселе. Новое ТЕМНЕЕ на десять процентов светлоты, то есть контраст текста на бумаге вырос, а не упал. */ --color-accent-deep: oklch(40.7% 0.102 261); --color-focus: oklch(56% 0.195 258); /* ---------- отказ формы ---------- */ /* Три цвета отказа лежали ЛИТЕРАЛАМИ в стилях и потому не проверялись никем — ровно то состояние, из-за которого 20.08.2026 нашлись подсказка на 3,07 и наведение на 2,37. Значения перенесены сюда как есть, ни один экран не изменился; смысл переноса в том, что теперь они под сторожем. Замер при переносе: 6,87 на бумаге, 7,07 на тёмной полосе, рамка 5,11. */ --color-error: oklch(48% 0.18 25); /* текст отказа на бумаге */ --color-error-rule: oklch(55% 0.19 25); /* рамка поля с ошибкой */ --color-error-invert: oklch(72% 0.16 25); /* текст отказа на тёмной полосе */ /* ---------- шрифты ---------- */ /* Onest, а не Bricolage Grotesque: у Bricolage нет кириллицы — русские заголовки рендерились системным шрифтом, а 150 КБ латинских начертаний грузились впустую. */ --font-display: "Onest", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* ---------- размер ---------- */ --text-xs: 0.75rem; --text-sm: 0.8438rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 2.875rem; --text-display: clamp(2.5rem, 4.4vw + 1rem, 4.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem); /* ---------- трекинг и интерлиньяж ---------- Одно значение letter-spacing на все размеры — ошибка, которую видно на краях шкалы. Крупный кегль набирается разреженно: на 76 px буквы физически дальше друг от друга, чем на 16 px, при том же значении в em. Мелкий — наоборот, слипается. До 15.08.2026 у всех заголовков стояло -0.028em: на H1 главной этого мало (буквы стоят рыхло), на h4 в 18 px — уже много (слова липнут). Шкала ниже идёт от -0.04em у дисплейного кегля к нулю у текста и к плюсу у мелочи. Интерлиньяж движется навстречу: чем крупнее буква, тем теснее строки. */ --track-display: -0.04em; --track-3xl: -0.03em; --track-2xl: -0.025em; --track-xl: -0.02em; --track-lg: -0.015em; --track-md: -0.01em; --track-base: 0em; --track-sm: 0.005em; --track-caps: 0.08em; /* прописные всегда просят воздуха */ --lead-display: 0.95; --lead-3xl: 1.02; --lead-2xl: 1.08; --lead-xl: 1.15; --lead-lg: 1.25; --lead-body: 1.6; /* ---------- мера строки ---------- Ширина колонки текста задавалась пятью разными числами, разложенными по стилям внутри страниц: 54ch на 404, 62ch у лидов, 68ch у основного текста и у оферты. Мера задана в rem, а НЕ в ch, и это исправление первой редакции того же дня. Единица ch тянется за размером шрифта, поэтому «62ch у лида, 68ch у текста» давало на экране 682 px против 544: лид, который по замыслу должен быть уже, оказывался на 138 px шире основного текста. Правый край колонки шёл ступенькой на каждой странице — как раз то, что читается как съехавшая вёрстка. Одно число на всё: у лида и у абзаца общий правый край, число знаков в строке подстраивается само (≈68 при 16 px, ≈49 при 22 px — оба в пределах читаемого). */ --measure: 34rem; /* ---------- пространство (4pt) ---------- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; --page-gutter: clamp(1rem, 4vw, 3.5rem); /* ---------- глубина ---------- Тени построены на цвете чернил, а не на чёрном: чёрная тень на бумаге даёт серый ореол, который спорит с холодным подтоном фона. Смещение и размытие растут вместе с высотой — предмет, поднятый выше, отбрасывает тень и дальше, и мягче. Тон 258, как у чернил: тень это чернила, разбавленные прозрачностью, а не отдельный цвет. */ --shadow-sm: 0 1px 2px oklch(20% 0.02 258 / 0.05), 0 2px 6px -2px oklch(20% 0.02 258 / 0.08); --shadow-md: 0 2px 4px oklch(20% 0.02 258 / 0.04), 0 8px 20px -8px oklch(20% 0.02 258 / 0.14); --shadow-lg: 0 4px 8px oklch(20% 0.02 258 / 0.04), 0 20px 44px -16px oklch(20% 0.02 258 / 0.2); /* Свет, поднимающийся от синего акцента, — для тёмных полос. Светлота, хрома и тон обязаны совпадать с --color-accent: разойдутся — свечение перестанет быть светом ОТ кнопки и станет самостоятельным цветом рядом с ней. Однажды уже разошлись: 19.08.2026 акцент уточнили по файлу логотипа (69% 0.16 258 → 64% 0.146 251), а свечение осталось на прежних числах — то есть запрет в этом же комментарии нарушила та самая правка, ради которой он писался. Держит раздел «свечение» в check-contrast.py. */ --glow-accent: 0 0 0 1px oklch(63.9% 0.117 250 / 0.18), 0 12px 40px -12px oklch(63.9% 0.117 250 / 0.25); /* ---------- линии, радиусы ---------- */ --rule-hair: 1px; --rule-thick: 3px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---------- движение ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ---------- слои ---------- */ --z-base: 1; --z-raised: 10; --z-nav: 20; --z-overlay: 30; --z-modal: 40; }