/* ========================================================================== Edit.OS — дизайн-токены Ежедневный рабочий инструмент автора и бренда: мысль → план → материал. -------------------------------------------------------------------------- Единственный источник истины по шрифтам, цвету, типографике, отступам, радиусам, рамкам, теням и движению. Компоненты (components.css) сырых значений не содержат — только ссылки на переменные отсюда. Слои: primitive → semantic → component. primitive — сырое значение, в разметке напрямую не используется; semantic — роль («фон страницы», «граница контрола», «предупреждение»); component — размер контрола, высота строки, ширина колонки. ── РЕШЕНИЯ, КОТОРЫЕ НЕ ПЕРЕСМАТРИВАЮТСЯ ────────────────────────────────── 1. Тема по умолчанию — СВЕТЛАЯ рабочая. Инструментом пользуются каждый день помногу часов. Тёмная включается атрибутом data-theme="dark" на и живёт переопределением того же смыслового слоя. 🔴 Системную настройку (prefers-color-scheme) НЕ слушаем намеренно: светлая — решение владельца, а не предпочтение операционной системы. Тёмная нужна для сравнения бок о бок и для тех, кто выберет её руками. 2. Акцент один — янтарь #FFB020 из презентации продукта (deck/index.html). Второго акцента нет: остальное графит и оттенки серого. 3. Плотность рабочая. Строка таблицы 32 px, контрол 30 px, поля экономные. Воздух — для витрин; здесь инструмент, всё должно быть на виду. 4. Шрифты те же, что в презентации: Geologica (заголовки), Golos Text (текст), JetBrains Mono (числа и служебное). Inter запрещён. ── ЦВЕТА ПОСЧИТАНЫ, А НЕ ПОДОБРАНЫ ─────────────────────────────────────── Каждое значение ниже прошло kontrast.py: 66 пар в каждой теме, 132 замера. Пороги: 4,5:1 для текста, 3:1 для границ и меток и отдельно 1,2:1 / 1,3:1 между СОСЕДНИМИ СОСТОЯНИЯМИ одного контрола. Первый прогон дал шесть провалов, пять из них в тёмной теме — ровно та ловушка, когда «переменные же переопределены». 🔴 Класс «соседние состояния» появился 01.09.2026 и сразу дал ещё 12 провалов: нажатие было неотличимо от наведения у всех четырёх видов кнопок (1,10–1,22:1), у опасной кнопки фон не менялся вовсе, подсветка строки давала 1,05:1 к белому. Замеров до этого было 74, и все 74 отвечали на один вопрос — «читается ли текст». Правишь цвет — прогоняешь `python3 kontrast.py` заново. ========================================================================== */ /* ========================================================================== 0. ШРИФТЫ — файлами рядом, не по сети Нарезки взяты из презентации продукта (deck/fonts) и скопированы сюда: дизайн-система должна открываться сама по себе, не завися от соседней папки. Обе нарезки содержат знак рубля ₽ (U+20BD), № (U+2116) и стрелки ←↑→↓ (U+2190–2193). 🔴 Чего в этих нарезках НЕТ: геометрических значков ●○◐▲✓ (U+25xx, U+2713). Поэтому ни одна метка статуса в системе не собрана из текстового символа — все знаки нарисованы SVG. Символ, которого нет в шрифте, молча заменяется системным: на другой машине вместо кружка встанет квадратик, и заметит это уже пользователь. ========================================================================== */ @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/Geologica-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD; } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/Geologica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/GolosText-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/GolosText-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/JetBrainsMono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Подогнанный системный запасной: пока грузится файл, строку рисует система. Без подгонки таблица «прыгает» при подмене — у Helvetica, Segoe UI и Roboto разная ширина знака. Числа по средней ширине на русско-латинской выборке. */ @font-face { font-family: "Golos Fallback"; src: local("Helvetica Neue"), local("Segoe UI"), local("Roboto"), local("Arial"); size-adjust: 104%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%; } /* ========================================================================== 1. PRIMITIVE — сырые значения. В компонентах напрямую не используются. ========================================================================== */ :root { /* --- Графит: основная нейтральная шкала ------------------------------- */ --c-graphite-900: #0E0F12; /* фон тёмной темы, взят из презентации */ --c-graphite-850: #15171C; /* основной текст светлой темы */ --c-graphite-800: #16181E; --c-graphite-750: #1E2128; --c-graphite-700: #2C3038; --c-graphite-600: #454A53; --c-graphite-500: #63696F; --c-graphite-450: #6E747F; --c-graphite-400: #7D8189; --c-graphite-350: #8A857C; --c-graphite-300: #9A9CA3; --c-graphite-250: #BEBCB5; --c-graphite-200: #DCD8D1; --c-graphite-180: #E0DCD4; /* подсветка контрола под курсором, светлая тема */ --c-graphite-100: #EDEBE5; --c-graphite-050: #F5F4F0; --c-paper: #F2F0EA; /* «бумага» презентации: текст тёмной темы */ --c-white: #FFFFFF; /* --- Янтарь: единственный акцент -------------------------------------- Светлый янтарь читается только как ЗАЛИВКА. Как текст на белом он даёт 1,83:1 — поэтому для ссылок и цены есть отдельный тёмный янтарь. */ --c-amber-400: #FFCF80; /* светлее: наведение в тёмной */ --c-amber-500: #FFB020; /* фирменный, из презентации */ --c-amber-600: #E09A12; /* наведение в светлой, нажатие в тёмной */ --c-amber-680: #BE7D02; /* нажатие в светлой */ --c-amber-700: #B57C00; /* кромка заливки на светлом */ --c-amber-800: #8A5200; /* янтарь-текст на светлом */ --c-amber-050: #FDF1DC; /* подложка на светлом */ --c-amber-950: #2A2007; /* подложка на тёмном */ /* --- Сигнальные: успех, предупреждение, ошибка ------------------------- Предупреждение — жжёная охра, а не фирменный янтарь: рядом с янтарной кнопкой они обязаны различаться и без иконки. */ --c-green-700: #116B41; --c-green-500: #4E9370; --c-green-400: #5FC38B; --c-green-600: #438F61; --c-green-050: #E3F2E9; --c-green-950: #11281C; --c-ochre-700: #8A4B08; --c-ochre-500: #A9762C; --c-ochre-400: #EFA44E; --c-ochre-600: #A07832; --c-ochre-050: #FBEEDA; --c-ochre-950: #2A1E0B; --c-red-700: #A3241B; --c-red-500: #B9564C; --c-red-400: #F08C82; --c-red-600: #A6544A; --c-red-050: #FBE9E7; --c-red-950: #2B1512; /* Две ступени сверх метки: опасная кнопка обязана менять фон и под курсором, и при нажатии. Ступени метки (050/950) для этого не годятся — метка своими значениями держит кромку 3:1, а кнопке нужен шаг по светлоте. */ --c-red-075: #F4E5E4; --c-red-100: #E6C4C1; /* наведение / нажатие, светлая */ --c-red-900: #3F2021; --c-red-850: #692725; /* наведение / нажатие, тёмная */ /* --- Шкала размера: шаг 4 px ------------------------------------------ Плотность рабочая, поэтому нижние ступени частые: между 4 и 12 живёт почти вся внутренняя разбивка контролов. */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 16px; --s-8: 20px; --s-9: 24px; --s-10:32px; --s-11:40px; --s-12:56px; /* --- Кегли ------------------------------------------------------------- Пол — 11 px, и только для набранных капителью служебных надписей с разрядкой. Содержание мельче 12 px не набирается. */ --fz-2xs: 11px; /* надзаголовок капителью, счётчик в меню */ --fz-xs: 12px; /* метки, подсказки, чипы */ --fz-sm: 13px; /* строка таблицы, мета карточки */ --fz-md: 14px; /* основной текст интерфейса */ --fz-lg: 15px; /* заголовок карточки */ --fz-xl: 18px; /* заголовок блока */ --fz-2xl: 24px; /* заголовок экрана */ --fz-3xl: 30px; /* число в кошельке, крупная величина */ /* --- Интерлиньяж ------------------------------------------------------ */ --lh-tight: 1.15; /* заголовки */ --lh-snug: 1.35; /* строки, чипы */ --lh-base: 1.5; /* абзац */ /* --- Насыщенность ----------------------------------------------------- */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Скругления ------------------------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* --- Время и кривые --------------------------------------------------- */ --t-fast: 110ms; --t-base: 170ms; --t-slow: 260ms; --ease: cubic-bezier(.2, .6, .3, 1); /* --- Семейства -------------------------------------------------------- */ --font-head: "Geologica", "Golos Fallback", system-ui, sans-serif; --font-body: "Golos Text", "Golos Fallback", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; } /* ========================================================================== 2. SEMANTIC — этим слоем пользуются компоненты. Светлая тема. ========================================================================== */ :root { color-scheme: light; /* Поверхности снизу вверх: утопленное → страница → карточка */ --bg: var(--c-graphite-050); /* фон страницы */ --surface: var(--c-white); /* карточка, панель, окно */ --surface-2: var(--c-graphite-100); /* шапка таблицы, вкладки */ --surface-nav: var(--c-white); /* боковое меню */ --overlay: rgb(21 23 28 / .42); /* затемнение под окном */ /* Две ступени взаимодействия — общие для строки, кнопки, вкладки и пункта меню. 🔴 Это НЕ оттенки поверхности: под курсором и при нажатии контрол обязан отличаться от соседнего состояния измеримо (kontrast.py, раздел «соседние состояния»: 1,2:1 под курсором и 1,3:1 при нажатии). Прежние значения давали 1,05–1,10 — нажатие было неотличимо от наведения. */ --surface-hover: var(--c-graphite-180); --surface-press: var(--c-graphite-250); /* Текст */ --text: var(--c-graphite-850); --text-2: var(--c-graphite-600); /* пояснение, подпись */ --text-3: var(--c-graphite-500); /* подсказка, дата, счётчик */ --text-off: var(--c-graphite-400); /* выключенный контрол */ /* Линии: волосяная — декоративная, контрольная — несёт смысл */ --line: var(--c-graphite-200); /* разделитель, рамка карточки */ --line-strong: var(--c-graphite-350); /* граница поля, селекта, чипа */ --focus: var(--c-graphite-850); /* кольцо фокуса */ /* Акцент. Под курсором заливка темнеет, при нажатии темнеет ещё — шаг между ступенями посчитан, а не подобран. */ --accent: var(--c-amber-500); --accent-hover: var(--c-amber-600); --accent-press: var(--c-amber-680); --accent-edge: var(--c-amber-700); /* кромка заливки: без неё границы кнопки не видно */ --accent-ink: var(--c-graphite-850);/* текст поверх заливки */ --accent-text: var(--c-amber-800); /* янтарь как текст и ссылка */ --accent-tint: var(--c-amber-050); /* Сигналы */ --ok: var(--c-green-700); --ok-tint: var(--c-green-050); --ok-edge: var(--c-green-500); --warn: var(--c-ochre-700); --warn-tint: var(--c-ochre-050); --warn-edge: var(--c-ochre-500); --err: var(--c-red-700); --err-tint: var(--c-red-050); --err-edge: var(--c-red-500); /* Опасная кнопка живёт обводкой, поэтому её ступени свои: заливка метки (--err-tint) занята чипом, сообщением и строкой конфликта. */ --danger-hover: var(--c-red-075); --danger-press: var(--c-red-100); /* Тени: только подъём над плоскостью. Смысл на тень не вешается — под каждой тенью есть рамка, поэтому в тёмной теме тень можно гасить. */ --shadow-sm: 0 1px 2px rgb(21 23 28 / .07); --shadow-md: 0 4px 12px rgb(21 23 28 / .10), 0 1px 3px rgb(21 23 28 / .06); --shadow-lg: 0 16px 40px rgb(21 23 28 / .16), 0 2px 8px rgb(21 23 28 / .08); } /* ========================================================================== 2b. SEMANTIC — тёмная тема. Только переопределение ролей. 🔴 Ни один компонент не имеет права объявлять цвет мимо этих переменных: цвет, записанный прямо в компоненте, в другой теме не переключится. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--c-graphite-900); --surface: var(--c-graphite-800); --surface-2: var(--c-graphite-750); --surface-nav: var(--c-graphite-800); --overlay: rgb(6 7 9 / .62); --surface-hover: var(--c-graphite-700); --surface-press: var(--c-graphite-600); --text: var(--c-paper); --text-2: var(--c-graphite-250); --text-3: var(--c-graphite-300); --text-off: #6A6E76; --line: var(--c-graphite-700); --line-strong: var(--c-graphite-450); --focus: var(--c-paper); /* На графите заливка светлеет под курсором и темнеет при нажатии: на тёмном фоне «подъём» читается лучше, чем ещё одно затемнение. */ --accent: var(--c-amber-500); --accent-hover: var(--c-amber-400); --accent-press: var(--c-amber-600); --accent-edge: var(--c-amber-500); /* на графите янтарь сам себе кромка: 10,5:1 */ --accent-ink: var(--c-graphite-850); --accent-text: var(--c-amber-500); --accent-tint: var(--c-amber-950); --ok: var(--c-green-400); --ok-tint: var(--c-green-950); --ok-edge: var(--c-green-600); --warn: var(--c-ochre-400); --warn-tint: var(--c-ochre-950); --warn-edge: var(--c-ochre-600); --err: var(--c-red-400); --err-tint: var(--c-red-950); --err-edge: var(--c-red-600); --danger-hover: var(--c-red-900); --danger-press: var(--c-red-850); /* На графите мягкая тень не видна и только грязнит — слой держит рамка. */ --shadow-sm: none; --shadow-md: 0 4px 14px rgb(0 0 0 / .45); --shadow-lg: 0 20px 48px rgb(0 0 0 / .60); } /* ========================================================================== 3. COMPONENT — размеры контролов, строк, колонок. 🔴 Порог пальца включается по ТИПУ УКАЗАТЕЛЯ, а не по ширине экрана. Планшет в портрете — 834 точки, мимо любого «мобильного» порога, а палец там ровно такой же. Ниже — блок @media (pointer: coarse). ========================================================================== */ :root { /* Контролы */ --h-control: 30px; /* кнопка, поле, селект — рабочая плотность */ --h-control-sm: 24px; /* чип-кнопка, действие в строке таблицы */ --h-control-lg: 36px; /* основная кнопка экрана, поле мастера */ --h-row: 32px; /* строка таблицы плана */ --h-nav-item: 28px; /* пункт бокового меню */ --h-nav-sub: 26px; /* вложенный пункт меню */ --h-inline-tap: auto; /* цель касания внутри строки текста */ /* Внутренние поля */ --pad-control: 0 var(--s-6); --pad-cell: var(--s-3) var(--s-5); --pad-card: var(--s-6); --pad-panel: var(--s-7); /* Каркас */ --w-nav: 232px; /* боковое меню */ --w-page-max: 1360px; /* рабочая зона: дальше строка становится нечитаемо длинной */ --gap-grid: var(--s-6); /* Рамки и фокус */ --bw: 1px; --bw-strong: 1.5px; --focus-w: 2px; --focus-offset: 2px; /* просвет показывает подложку — кольцо мерится против неё, а не против самой кнопки */ /* Метки */ --h-chip: 20px; --icon: 14px; --icon-sm: 12px; --icon-lg: 16px; } @media (pointer: coarse) { :root { --h-control: 44px; --h-control-sm: 44px; /* 🔴 не 40: «маленькая» кнопка под пальцем не бывает маленькой. Замер живым браузером поймал ровно это. */ --h-control-lg: 48px; --h-row: 44px; --h-nav-item: 44px; --h-nav-sub: 44px; --h-chip: 24px; --icon: 16px; --pad-cell: var(--s-5) var(--s-6); /* Исключение для целей внутри строки текста — метка источника, ссылка в предложении, крошка. Растянуть их до 44 нельзя: строка разъедется. Стандарт такое исключение допускает; берём 24 и говорим об этом вслух, а не молчим. */ --h-inline-tap: 24px; } } /* Движение выключается системной настройкой. Кольцо загрузки не убираем — оно единственный признак работы, — но замедляем втрое. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } }