diff --git a/apps/web/app/foundation/colors/page.tsx b/apps/web/app/foundation/colors/page.tsx index 327a2ff..229d0d0 100644 --- a/apps/web/app/foundation/colors/page.tsx +++ b/apps/web/app/foundation/colors/page.tsx @@ -55,42 +55,42 @@ const BRAND_COLORS = [ { oracal: "053M", name: "Основной бирюзовый", - hex: "#7ecfca", + hex: "#0089c3", usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния", cssVar: "--brand-053m", }, { oracal: "073M", name: "Тёмный серо-голубой", - hex: "#5b7b87", + hex: "#53514e", usage: "Тёмный фон, хедер, акценты на тёмных поверхностях", cssVar: "--brand-073m", }, { oracal: "066M", name: "Средний бирюзовый", - hex: "#5bb5ad", + hex: "#00818c", usage: "Вторичные акценты, фоны секций, иллюстрации", cssVar: "--brand-066m", }, { oracal: "050M", name: "Тёмно-синий", - hex: "#1b4c72", + hex: "#1b2e5d", usage: "Наружная реклама, полиграфия, заголовки на светлом фоне", cssVar: "--brand-050m", }, { oracal: "081M", name: "Бежевый", - hex: "#c4a882", + hex: "#a8885c", usage: "Форма сотрудников, оффлайн носители, тёплые акценты", cssVar: "--brand-081m", }, { oracal: "080M", name: "Тёмно-коричневый", - hex: "#5c2e0e", + hex: "#432f1e", usage: "Текст на бежевых поверхностях, логотип на форме", cssVar: "--brand-080m", }, @@ -106,32 +106,32 @@ const BRAND_COLORS = [ /* ─── Соответствие цветов ──────────────────────────────────────────── */ const COLOR_MAPPING = [ { - brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#7ecfca" }, + brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#0089c3" }, web: { name: "Бирюзовый", hex: "#63bac3", count: 4 }, - note: "Чуть темнее и насыщеннее на сайте", + note: "Oracal — насыщенный синий; сайт — светлее и голубее", }, { - brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#5b7b87" }, + brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#53514e" }, web: { name: "Серо-бирюзовый", hex: "#60959c", count: 7 }, - note: "Светлее на сайте", + note: "Oracal — тёмно-серый; сайт — серо-бирюзовый (значительное расхождение)", }, { - brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#5bb5ad" }, + brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#00818c" }, web: { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 }, - note: "Смещён в синеву", + note: "Oracal — тёмный бирюзовый; сайт — светлее", }, { - brand: { oracal: "081M", name: "Бежевый", hex: "#c4a882" }, + brand: { oracal: "081M", name: "Бежевый", hex: "#a8885c" }, web: { name: "Бежевый", hex: "#bf9975", count: 12 }, - note: "Темнее и насыщеннее на сайте", + note: "Oracal — тёплый охристый; сайт — прохладнее и светлее", }, { - brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b4c72" }, + brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b2e5d" }, web: null, note: "Не найден в CSS сайта", }, { - brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#5c2e0e" }, + brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#432f1e" }, web: null, note: "Не найден в CSS сайта", }, @@ -185,13 +185,13 @@ const WEB_COLORS = [ ]; const CONTRAST_PAIRS = [ - { fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" }, - { fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" }, - { fg: "#ffffff", bg: "#5c2e0e", label: "Белый на тёмно-коричневом" }, - { fg: "#ffffff", bg: "#5bb5ad", label: "Белый на среднем бирюзовом" }, - { fg: "#111827", bg: "#7ecfca", label: "Тёмный текст на основном бирюзовом" }, - { fg: "#111827", bg: "#c4a882", label: "Тёмный текст на бежевом" }, - { fg: "#5c2e0e", bg: "#c4a882", label: "Тёмно-коричневый на бежевом (форма)" }, + { fg: "#ffffff", bg: "#53514e", label: "Белый на тёмном серо-голубом (073M)" }, + { fg: "#ffffff", bg: "#1b2e5d", label: "Белый на тёмно-синем (050M)" }, + { fg: "#ffffff", bg: "#432f1e", label: "Белый на тёмно-коричневом (080M)" }, + { fg: "#ffffff", bg: "#00818c", label: "Белый на среднем бирюзовом (066M)" }, + { fg: "#111827", bg: "#0089c3", label: "Тёмный текст на основном бирюзовом (053M)" }, + { fg: "#111827", bg: "#a8885c", label: "Тёмный текст на бежевом (081M)" }, + { fg: "#432f1e", bg: "#a8885c", label: "Тёмно-коричневый на бежевом (форма, 080M/081M)" }, ]; /* ─── Компоненты ───────────────────────────────────────────────────── */ @@ -403,16 +403,16 @@ function exportTokens() { /* ─── LLM spec text ────────────────────────────────────────────────── */ const LLM_COLORS_TEXT = `# ЦВЕТА — LLM-СПЕЦИФИКАЦИЯ # Клиника ухо, горло, нос им. проф. Е.Н.Оленевой -# docs/LLM_CONTEXT.md · /foundation/colors · v2.1 · 2026-03-22 +# docs/LLM_CONTEXT.md · /foundation/colors · v2.2 · 2026-03-22 -ФИРМЕННЫЕ ЦВЕТА (Oracal) +ФИРМЕННЫЕ ЦВЕТА (Oracal) — точные значения из каталога Oracal | Название | HEX | RGB | CSS-переменная | Применение -053M | Основной бирюзовый | #7ECFCA | rgb(126,207,202) | --brand-053m | Акцент, CTA-кнопки, иконки, активные состояния -073M | Тёмный серо-голубой | #5B7B87 | rgb(91,123,135) | --brand-073m | Тёмный фон, хедер, заголовки навигации -066M | Средний бирюзовый | #5BB5AD | rgb(91,181,173) | --brand-066m | Вторичные акценты, фоны секций -050M | Тёмно-синий | #1B4C72 | rgb(27,76,114) | --brand-050m | Наружная реклама, полиграфия, заголовки -081M | Бежевый | #C4A882 | rgb(196,168,130) | --brand-081m | Форма сотрудников, тёплые акценты -080M | Тёмно-коричневый | #5C2E0E | rgb(92,46,14) | --brand-080m | Текст на бежевом, логотип на форме +053M | Основной бирюзовый | #0089C3 | rgb(0,137,195) | --brand-053m | Акцент, CTA-кнопки, иконки, активные состояния +073M | Тёмный серо-голубой | #53514E | rgb(83,81,78) | --brand-073m | Тёмный фон, хедер, заголовки навигации +066M | Средний бирюзовый | #00818C | rgb(0,129,140) | --brand-066m | Вторичные акценты, фоны секций +050M | Тёмно-синий | #1B2E5D | rgb(27,46,93) | --brand-050m | Наружная реклама, полиграфия, заголовки +081M | Бежевый | #A8885C | rgb(168,136,92) | --brand-081m | Форма сотрудников, тёплые акценты +080M | Тёмно-коричневый | #432F1E | rgb(67,47,30) | --brand-080m | Текст на бежевом, логотип на форме — | Белый | #FFFFFF | rgb(255,255,255) | --brand-white | Фон, инвертированный текст, логотип на тёмных ЦВЕТА САЙТА oclinica.ru (CSS: clinic_bootstrap_mobile/css/style.css) @@ -429,29 +429,29 @@ Oracal | Название | HEX | RGB | CSS-пер Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей -СООТВЕТСТВИЕ ORACAL → САЙТ -053M #7ECFCA → #63BAC3 (темнее, насыщеннее) -073M #5B7B87 → #60959C (светлее) -066M #5BB5AD → #52B4BD (смещён в синеву) -081M #C4A882 → #BF9975 (темнее, насыщеннее) -050M #1B4C72 → не найден в CSS сайта -080M #5C2E0E → не найден в CSS сайта +СООТВЕТСТВИЕ ORACAL → САЙТ (цифровая адаптация плёночных цветов) +053M #0089C3 → #63BAC3 (Oracal ярко-синий; сайт светлее и голубее) +073M #53514E → #60959C (Oracal тёмно-серый; сайт серо-бирюзовый — значительное расхождение) +066M #00818C → #52B4BD (Oracal тёмный бирюзовый; сайт светлее) +081M #A8885C → #BF9975 (Oracal тёплый охристый; сайт прохладнее и светлее) +050M #1B2E5D → не найден в CSS сайта +080M #432F1E → не найден в CSS сайта КОНТРАСТНОСТЬ WCAG 2.1 -#FFFFFF / #5B7B87 | 4.6:1 | AA PASS | AAA FAIL -#FFFFFF / #1B4C72 | 9.3:1 | AA PASS | AAA PASS -#FFFFFF / #5C2E0E | 11.2:1 | AA PASS | AAA PASS -#FFFFFF / #5BB5AD | 3.0:1 | AA FAIL | AAA FAIL | только крупный текст ≥18pt -#111827 / #7ECFCA | 5.8:1 | AA PASS | AAA FAIL -#111827 / #C4A882 | 4.8:1 | AA PASS | AAA FAIL -#5C2E0E / #C4A882 | 6.7:1 | AA PASS | AAA FAIL +#FFFFFF / #53514E | 7.9:1 | AA PASS | AAA PASS +#FFFFFF / #1B2E5D | 13.2:1 | AA PASS | AAA PASS +#FFFFFF / #432F1E | 12.6:1 | AA PASS | AAA PASS +#FFFFFF / #00818C | 4.7:1 | AA PASS | AAA FAIL +#111827 / #0089C3 | 4.7:1 | AA PASS | AAA FAIL +#111827 / #A8885C | 5.5:1 | AA PASS | AAA FAIL +#432F1E / #A8885C | 3.8:1 | AA FAIL | AAA FAIL | только крупный текст ≥18pt ПРАВИЛА ✓ Только цвета из фирменной палитры ✓ Digital → цвета сайта; оффлайн → коды Oracal ✓ Текст на цветном фоне: минимум WCAG AA (4.5:1) -✓ Белый текст на: 073M (#5B7B87), 050M (#1B4C72), 080M (#5C2E0E) -✓ Тёмный текст на: 053M (#7ECFCA), 081M (#C4A882) +✓ Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E) +✓ Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C) ✕ Произвольные цвета вне фирменной палитры ✕ Изменение насыщенности / оттенка фирменных цветов ✕ Тёплые и холодные акценты рядом без нейтрального разделителя`.trim(); @@ -480,12 +480,12 @@ export default function ColorsPage() {
- ⚠️ + - HEX-значения приблизительны. Для оффлайн-носителей используйте - официальные коды Oracal. + HEX-значения рассчитаны по точным RGB из каталога Oracal. + Для оффлайн-носителей используйте официальные коды Oracal.