Дизайн-контракт: почему 57 сайтов не прошли проверку и как это исправить

Проверили 57 сайтов — от Apple и Stripe до CSS Design Awards — по детерминированному дизайн-контракту из 26 проверок. Контракт описывает токены, motion, доступность, типографику, ритм и производительность. Результат: один сайт получил A (это сам сайт дизайн-системы Designesy, который использовали как эталон), ни один чужой не поднялся выше C.

Что показала проверка

Оценки считались по 100-балльной шкале. Разброс — от 37,9 до 100,0. Двойки и тройки? Забудьте: 88% сайтов получили D или F, а оценка B не досталась никому. Между C (77,7 у Apple) и A (100 у Designesy) — пропасть в 22 балла, и она пустая.

Ни одна индустрия не показала проходной результат. В трёх категориях — дизайн-системы, дев-тулзы, финтех — лучшие оценки такие: Apple с 77,7 (C), Netlify с 64,6 (D), Stripe с 72,9 (D). Худшая ситуация у разработчиков: их лучший сайт занял бы лишь седьмое место в подборке дизайн-систем.

Семь закономерностей, которые видны в данных

Оценка не зависит от капитализации

Stripe стоит $91,5 млрд и использует 719 дизайн-токенов. Robinhood стоит около $30 млрд — у него 2 токена. Ramp с оценкой $16,5 млрд — вообще 0. tokens.studio, инструмент для управления токенами, имеет 3 токена на собственном сайте. Разница не в бюджете, а в приоритете: в Stripe кто-то решил, что токены важны, в Robinhood такого решения не приняли.

Финтех проваливает контраст

Сайты для разработчиков (Stripe, Square, Vercel, Netlify) проходят WCAG AA по контрасту кнопок все четыре. Сайты для потребителей (Klarna, Wise, Adyen, Robinhood) — ни один. У Klarna кнопка «Buy Now» имеет контраст 1,00:1. У Adyen — 0,00:1. Люди, которые могут исправить контраст, видят свои кнопки. Люди, которые не могут, должны нажимать на нечитаемую кнопку.

Маркетинговый сайт обгоняет собственную дизайн-систему

Vercel набрал 73,6 балла, а Geist — дизайн-система самого Vercel — только 50,3. Маркетинг оптимизируют под визуальный лоск, дизайн-системы — под стабильность API. Контракт вознаграждает первое.

Премии дизайна не гарантируют системность

CSS Design Awards (37,9) и FWA (41,1) существуют, чтобы отмечать выдающийся дизайн. Оба получили F. Их собственные сайты используют голые hex-цвета, магические отступы и не имеют уровней reduced-motion. Галереи в духе Awwwards оценивают визуальное впечатление, а не системную дисциплину.

Потолок в 40 баллов — это база безразличия

Пять сайтов из разных отраслей набрали от 37,9 до 42,0: CSS Design Awards, tokens.studio, Robinhood, Ramp, Bun. У них нет дизайн-токенов, нет :focus-visible, нет prefers-reduced-motion. Их построили без дизайн-контракта, и это видно на каждом уровне.

Три универсальные ошибки

Есть проверки, которые проваливают почти все 57 сайтов. И это не сложные вещи, а три однострочных CSS-свойства.

Все три свойства поддерживаются браузерами уже много лет. Их просто нет в чек-листах. Дизайн-контракт превращает «надо бы сделать» в «это падает в CI».

Что сделать, чтобы пройти проверку

Если хотите, чтобы сайт не оказался в нижней половине рейтинга, начните с малого.

• Заведите дизайн-токены по стандарту DTCG: со схемой ($schema) и структурным цветом, а не голыми hex-кодами.
• Добавьте tabular-nums всем числовым значениям — счётчикам, ценам, балансам. Это одна строка CSS.
• Включите font-synthesis: none, чтобы браузер не искажал шрифт.
• Укажите text-decoration-skip-ink: auto для нормальных подчёркиваний.
• Реализуйте :focus-visible с заменой обводки, а не просто outline: none.
• Сделайте трехуровневый prefers-reduced-motion: Tier 1 — убрать, Tier 2 — смягчить, Tier 3 — оставить. Не превращайте всё в один «килл-свитч».
• Проверяйте контраст кнопок по WCAG AA. Особенно в финтехе.
• Запустите проверку в CI, чтобы регрессия ловилась автоматически.

Дизайн-контракт не оценивает красоту и не заменяет вкус. Это детерминированный минимум: токены, доступность, типографика, анимация. Пока 88% веба не дотягивает даже до D, у сайта, который пройдёт проверку, почти нет конкурентов.