Дизайн-крафт против «AI-slop»: 37 признаков, 5 замеренных референсов

TL;DR

• AI-slop — не про качество исполнения, а про статистическую усреднённость. LLM/vibe-coding тулы генерируют «медиану обучающих данных»: одну и ту же тройку карточек, один и тот же индиго-градиент, один и тот же Inter. Есть даже задокументированный источник этому конкретно для фиолетового градиента: создатель Tailwind Адам Уотан публично извинился в августе 2025 за то, что bg-indigo-500 стал дефолтным цветом кнопки в Tailwind UI пять лет назад — из-за чего «каждый AI-сгенерированный интерфейс на Земле стал фиолетовым» (см. §1.2).
• Замер живых референсов (daylightcomputer.com, inkandswitch.com, teenage.engineering, remarkable.com, mercuryos.com) через реальный fetch HTML/CSS показывает: крафт — это не эстетика, а инженерная дисциплина. Кастомные fluid-type системы поверх стандартных фреймворков (Daylight, reMarkable), нулевая анимация как осознанный выбор (Ink & Switch), шрифт на продуктовую линейку (Teenage Engineering), задокументированный вручную код с комментарием «не форматируйте это» (Ink & Switch).
• Общий инсайт из обеих частей: единообразие = дёшево, вариативность = дорого. AI-slop делает всё одинаковым (один border-radius, один ритм отступов, одна анимация на каждый блок). Крафт-сайты умышленно нарушают единообразие: разный radius у кнопки и карточки, разный ритм секций, разные типы layout от блока к блоку.
• Часть 1 — чек-лист из 37 конкретных tell-ов AI-slop дизайна с источниками (2025-2026 статьи, дизайн-блоги, HN/твиттер-обзоры).
• Часть 2 — замеренный (не на глаз) разбор 5 референсов: точные шрифты, type scale, line-height, max-width, hex-цвета, число типов секций, способ показа продукта, анимация.
• Часть 3 — 22 конкретных приёма вёрстки, выведенных из частей 1+2, с прямой инструкцией «как сделать в статичном HTML/CSS» — это то, что напрямую применимо к пересборке cosy.

Часть 1 — Чек-лист tell-ов «AI slop»

Собрано через живой веб-поиск (июль 2026). Два источника оказались настолько плотными, что фактически сами являются чек-листами и цитируются многократно, потому что независимо сходятся в одних и тех же наблюдениях: impeccable.style/slop/ и 925studios.co (гайд по AI slop в веб-дизайне). Совпадение 3+ независимых источников по одному и тому же tell — сильный сигнал, что это реальный, обсуждаемый паттерн, а не выдумка одного автора.

1.1 Типографика

1. Монокультура Inter/Geist/системного шрифта — один шрифт закрывает все роли (заголовок, тело, лейблы), бренд-индивидуальность стирается. «Inter становится дефолтом для каждого SaaS/UI-проекта, 90% дизайнов используют один и тот же шрифт». Основатель одного B2B-продукта, поставивший Inter на заголовки/тело/лейблы, обнаружил, что сайт «выглядел чисто, но и как 30% остального SaaS-интернета». — madegooddesigns.com, pravinkumar.co
2. Instrument Serif + Inter/Geist как новый «editorial»-штамп. Прямо описывается как «трендовое editorial-сочетание, которое сейчас очень популярно» — то есть его выбирают именно чтобы не выглядеть шаблонно, отчего сам выбор становится tell-ом. Подтверждено независимо в таксономии impeccable.style как один из именованных «slop»-шрифтов («Inter, Geist, Space Grotesk, Instrument Serif»). — maxibestof.one, impeccable.style/slop/
3. Плоская иерархия размеров — кегли заголовков слишком близки друг к другу, нет ощутимого скачка между уровнями. Прямая цитата: «Font sizes are too close together. No clear visual hierarchy.» — impeccable.style/slop/
4. Гипертрофированный курсивный serif как единственный приём «премиальности» в хиро — стал настолько частым, что читается как шаблон, а не осознанный выбор. — impeccable.style/slop/
5. «Eyebrow»-пилюля над заголовком + повторяющиеся нумерованные kicker-ы секций («01 / 02 / 03») — структурный тик, а не решение, продиктованное контентом. — impeccable.style/slop/
6. Пережатый негативный letter-spacing на display-заголовках, за гранью, где буквы ещё держат форму — визуальная гиперкоррекция, которая читается как «ИИ пытается выглядеть дизайнерски». — impeccable.style/slop/
7. Caps-lock body-текст для стилистического акцента, несмотря на известную проблему читаемости для длинных пассажей. — impeccable.style/slop/

1.2 Цвет

8. Фиолетово-индиго-синий «AI-градиент». У этого tell-а есть документированное происхождение: создатель Tailwind Адам Уотан публично извинился в августе 2025 за то, что сделал bg-indigo-500 дефолтным цветом кнопки в Tailwind UI пять лет назад, сказав, что это «привело к тому, что каждый AI-сгенерированный интерфейс на Земле стал фиолетовым». Механизм: LLM обучены на медиане заскрапленных Tailwind-туториалов/GitHub-кода (2019-2024), где indigo-500 статистически доминирует, а поскольку сгенерированные фиолетовые сайты потом снова попадают в интернет и скрапятся в будущие датасеты — эффект самоусиливается. — prg.sh, подтверждено независимо в medium.com/@kai.ni и newsletters.ai
9. Градиент на весь заголовок целиком, использованный декоративно, а не для выделения конкретного слова/фразы — назван наравне с «прыгающими кнопками и виляющими иконками» как «движение без смысла». Best-practice возражение: градиент должен подсвечивать слово, а не нести целое предложение. — impeccable.style/slop/, HubSpot — gradients
10. Тёмная тема со светящимися цветными box-shadow вокруг карточек/кнопок как атмосферный «tech»-сигнал — прямо названо в таксономии slop как «dark backgrounds with colored box-shadow glows». — impeccable.style/slop/
11. Кремово-бежевый фон как новый дефолт «premium/tasteful» — отмечено, что стал таким же шаблонным, как фиолетовый градиент, который он должен был заменить: «warm cream or beige page background has become default tasteful surface». — impeccable.style/slop/
12. Серый текст на цветном/градиентном фоне — «выглядит блёкло», низкоусильный выбор контраста, повторяющийся в AI-генерируемых палитрах. — impeccable.style/slop/

1.3 Layout и spacing

13. Хиро + три одинаковые карточки фич (иконка, заголовок, строка описания), повторяющиеся бесконечно. Подтверждено как структурная сигнатура номер один в нескольких независимых источниках: «three-column grids with icons (структура каждого SaaS landing page template)»; аудит 40+ SaaS-лендингов находит «пять value proposition, борющихся за внимание, три CTA, тянущих посетителя в разные стороны». — prg.sh, Indie Hackers
14. Единый border-radius абсолютно на всех элементах — карточки, кнопки, инпуты, картинки с одним и тем же (часто экстремальным) скруглением. Названо напрямую в нескольких источниках: «identical padding, identical border radius, and identical card heights throughout», «extreme border-radius on cards», «16px border radius everywhere... 24px padding applied uniformly». Реальные дизайн-системы создают иерархию через вариативность; AI-slop механически держит всё одинаковым. — uxplanet.org, 925studios.co, impeccable.style/slop/
15. Монотонный вертикальный ритм — одно значение spacing используется везде, секции ощущаются равномерно отмеренными без ритма или акцента: «Same spacing value used everywhere. No rhythm, no variation.» — impeccable.style/slop/
16. Bento-грид без реальной содержательной причины. Сам паттерн не проблема — анализ 2025 года нашёл, что bento-секции увеличили time-on-page на 31% на SaaS-лендингах, где контент реально различался по размеру/важности — но паттерн неверно применяют к последовательному или сравнительному контенту (списки статей, e-commerce-листинги), где «переменные размеры карточек активно мешают» сравнению. Tell — это bento-как-декорация, а не bento-как-информационная-архитектура. — landdding.com
17. Вложенные карточки (карточка внутри карточки), создающие визуальный шум и избыточную, бессмысленную глубину. — impeccable.style/slop/
18. Центрированный текст и симметричная композиция везде, без асимметричных решений. И как UX-крафт-критика («центрирование длинных текстовых блоков — читатель теряет строку... резервировать центрирование для коротких заголовков и CTA»), и как именованная критика AI-дизайна — материал на Medium прямо формулирует, что дефолтная симметрия/центрирование AI-генерируемого дизайна — то, что явно сигнализирует человеческое намерение, когда с этим сознательно порывают. — UXPin, «The 6 Rules of Anti-Design That'll Make AI Designers Cry»
19. Формула «hero-метрика»: крупное число, мелкий лейбл, три вспомогательные статистики, градиентный акцент — конкретный повторяющийся под-паттерн, названный напрямую в таксономии slop, отдельно от паттерна карточек-фич, но столь же шаблонный. — impeccable.style/slop/
20. shadcn/ui с нулевой кастомизацией — дефолтный radius, дефолтная тема, дефолтный Inter, дефолтные значения shadow-opacity прямо из CLI. Прямая цитата: «Почти все ставят shadcn, принимают дефолтную тему, дефолтный radius, дефолтный шрифт Inter — и начинают строить. Компоненты отличные, но дефолты — те же дефолты, что получили все остальные. Результат компетентен и незапоминаем». Есть и контраргумент — не библиотека виновата, а неотредактированные дефолты: «shadcn не делает ваш UI скучным... только ваши решения делают». — freedesignmd.com, Medium

1.4 Motion / анимация

21. Fade-up-on-scroll на буквально каждой секции/элементе, вне зависимости от того, заслуживает ли это внимания — самый цитируемый motion-tell. Прямые цитаты: «scroll animations that either do not exist or are the same generic fade-in on every element»; исследование NN/g нашло, что такие задержки реально раздражают пользователей («пользователь вынужден ждать, пока страница «догружает» текст»), а повторение «быстро становится однообразным и изнашивает терпение пользователя». — uxplanet.org, NN/g — Scroll Fading 101, NN/g — Scroll-Triggered Text Animations Delay Users
22. Bounce/spring-easing с перелётом (overshoot) на диалогах и карточках как generic «delight»-приём, применённый без учёта контента. — impeccable.style/slop/
23. Hover-состояния, которые ничего не делают, или «щёлкают» вместо плавного перехода — движение добавлено как декорация, сигнализирующая «интерактивность» без функциональной отдачи. — uxplanet.org
24. Scale/rotate картинки при hover как повторяющаяся «фирменная» микро-анимация, применённая механически ко всем карточкам/картинкам вне зависимости от контекста. — impeccable.style/slop/

1.5 Копирайтинг

25. Расплывчатые, «hedge»-заголовки без конкретики о продукте. Конкретные примеры из двух независимых источников: «Build the future of work», «Your all-in-one platform», «Scale without limits», «supercharge», «unlock the power of». Критика: копия «ничего не говорит о реальном продукте». — 925studios.co
26. Стек баззвордов: «streamline, empower, supercharge, world-class, enterprise-grade» — используются как взаимозаменяемые filler-прилагательные вместо конкретных утверждений. — impeccable.style/slop/
27. Избыток тире (em-dash) как конкретный tell «AI-каденции» — «больше пары тире в body copy» назван выдающим ритмом LLM-сгенерированной маркетинговой прозы, наряду со склонностью ИИ к точке с запятой («AI любит точку с запятой... сыплет ими как приправой») и «более вычурной» лексикой вместо естественного разнообразия слов. — impeccable.style/slop/, uxplanet.org
28. Афористичная каденция копирайта — секции, инженерно выстроенные так, чтобы завершиться сконструированной фразой-«мудростью» с искусственным контрастом («Дело не в X. Дело в Y.») как риторический тик, а не подлинное наблюдение. — impeccable.style/slop/

1.6 Изображения и иконки

29. Дженерик абстрактные 3D-глянцевые «блобы» (в духе Spline), используемые чисто декоративно, оторванные от контента продукта. Позитивно настроенные источники детально описывают эстетику («clay-morphic elements, high-gloss 3D объекты, мягкие тени... apple-уровня полировка»), но отмечают, что применяется она ради бессознательного сигнала «качества», а не для передачи смысла — прямой критической статьи «это уже надоело» найти не удалось, поэтому фрейминг «переиспользовано» помечаю как экспертное наблюдение без единого источника (паттерн хорошо задокументирован, прямого backlash-материала не найдено).
30. AI-иллюстрации/фото «слегка слишком гладкие, слегка слишком симметричные, с пластиковым качеством» — названо напрямую как визуальный tell, отличающий AI-генерируемые изображения от человеческой иллюстрации, наряду с классическим tell-ом анатомических ошибок (лишние пальцы, слипшиеся зубы) для фотореалистичных AI-картинок. — uxplanet.org
31. Стоковые фото «разношёрстная группа людей смотрит на ноутбук в невозможно хорошо освещённом офисе», либо абстрактные 3D-блобы как filler hero-арт вместо показа реального продукта — названо напрямую как топ-ошибка наравне с паттерном трёх карточек. — 925studios.co
32. Любительские hand-drawn SVG-иллюстрации как декоративный filler — отмечено в таксономии slop как отличимый tell «пытается выглядеть человечно, но выходит неловко». — impeccable.style/slop/
33. Иконка/эмодзи ✨ (sparkles) как generic универсальный сигнификатор «AI-powered». Прямая критика: «sparkles — самый частый паттерн для представления AI... критики ненавидят, как sparkles были кооптированы, считая это скорее маркетингом, чем хорошим UI/UX», с иронией, что sparkles подразумевают чистоту/совершенство, тогда как реальная репутация ИИ — это непоследовательная точность. — Geoff Graham
34. Фальшивые или нераскрытые AI-сгенерированные аватары в отзывах. Помимо эстетики это уже живой регуляторный вопрос: правила Нью-Йорка, Калифорнии и ЕС теперь требуют раскрытия при использовании синтетических исполнителей/аватаров в отзывах/рекламе, а FTC требует раскрытия для синтетических отзывов в целом — то есть «отполированные, но generic-looking» аватары в отзывах теперь одновременно и эстетический, И юридический tell низкоусильного, не сделанного вручную сайта.

1.7 Компонентные / системные паттерны

35. Glassmorphism/матовое стекло на карточках повсеместно, а не выборочно на нескольких высокоэффектных элементах. Консенсус 2026 года прямо формулирует доминирующий паттерн производства как «плоский дизайн как основной интерфейсный язык с glassmorphism, применённым выборочно... без затрат на читаемость и производительность от применения его везде» — подразумевая, что glass-везде теперь устаревшая/slop-версия. Также отмечена конкретная провальная accessibility: контраст текста поверх blur «может опускаться ниже WCAG 2.1». — neelnetworks.com, Creative Boom
36. «Море одинаковости» (Sea of Sameness) / эффект дистрибутивной конвергенции — зонтичный феномен, под которым лежит весь этот чек-лист. Прямо назван и объяснён: «AI-модели не учат вкус или визуальную иерархию, только то, что повторяется чаще всего... по умолчанию получается среднее по обучающим данным — а это сейчас индиго-градиенты и скруглённые углы», порождая видимый backlash-движение «Anti-Vibe Coding» среди дизайнеров в 2026, явно отвергающих эту гомогенизацию. — axe-web.com, Medium — Anti-Vibe Coding Movement, Medium — Why All Vibe-Coded Designs Look the Same
37. Характеристика «визуальная лифтовая музыка» для категории AI-дизайна: «приятно, безобидно и абсолютно незапоминаемо, с одними и теми же предсказуемыми отступами, градиентными заливками, sans-serif типографикой и card-based layout, повторяющимися в несвязанных индустриях и брендах» — сильная рамка для того, почему hand-crafted сайты читаются как дорогие в контрасте (специфичность, трение, бренд-специфичные решения против гладкости-медианы-обучающих-данных). — Utsubo

Замечание по качеству источников: самые весомые находки — прямая цитата Адама Уотана про indigo-500 (#8, единственный полностью верифицируемый causal-механизм, а не просто «ощущение») и тройное независимое совпадение по border-radius/motion/copy tell-ам (#14, #21, #25-26). Слабее всего обоснованы #29 (переиспользование 3D-блобов как именно раскритикованное, а не просто описанное) и специфичные ссылки на законы в #34 — помечены как таковые.

Часть 2 — Замеренный разбор эталонов

Метод: HTML вытянут напрямую (curl), т.к. WebFetch с конвертацией в markdown срезает <link>/<style> теги и непригоден для структурного анализа. Все значения ниже — извлечены из реально загруженных файлов, не оценены на глаз. mercuryos.com — legacy CRA-приложение (клиент-рендер, 2016), в сыром HTML только <div id="root"></div>; структура секций восстановлена по CSS-классам (.hero, .section, .chapter и т.д.), а не подтверждена по фактическому DOM — это явно отмечено как ограничение.

Сравнительная таблица

Заметки по каждому сайту

daylightcomputer.com. Next.js, 3 стилевых файла. Оба кастомных шрифта (ABC Room, ABC Arizona Flare) грузятся с ascent-override/size-adjust — инженерная деталь против layout shift, которую не делают «на глаз». Помимо стандартной Tailwind-шкалы существует параллельная кастомная fluid-clamp-система, написанная вручную через calc(), а не через нативный CSS clamp(vw):

.title-md{font-size:clamp(var(--min),var(--current),var(--max));
--text-scale-min:3.5;--text-scale-max:4.5;
--text-scale-current-rem:calc(var(--text-scale-percentage)*(var(--text-scale-max)-var(--text-scale-min))+var(--text-scale-min-rem))}

Та же философия применена к spacing (--spacing-vw-1…-96, посчитан по брейкпоинтам). Цвет: --color-gray:#17190f (тёплый почти-чёрный) на --color-cream:#faf5f2, единственный акцент --color-amber:#ff9d00.

inkandswitch.com. Написан вручную, без фреймворка/бандлера. base.css открывается буквальным комментарием разработчика: «Please don't use a formatter (like Prettier). The file has been laid out by hand... The focus is on maintainability over elegance or performance.» Точная типографическая шкала (все теги, дословно):

h1 { font: 300 24px / 36px "Merriweather Sans", sans-serif; }
h2 { font: 300 19px / 24px "Merriweather Sans", sans-serif; }
h3 { font: 300 16px / 24px "Merriweather Sans", sans-serif; }
body { font: 400 16px / 24px "Merriweather", serif; }
aside { font: 400 13px / 24px "Merriweather Sans", sans-serif; }
figcaption { font: 300 13px / 24px "Merriweather Sans", sans-serif; }

Body — serif, заголовки — sans-serif светлого веса 300: инверсия конвенции. Собственная 12-колоночная сетка без display:grid:

--page-width: 62rem;
--rem: min(100vw / 62, 1rem);
--col: calc(var(--rem) * 3);
--gap: calc(var(--rem) * 2);

Ноль border-radius, ноль transition/keyframes во всём проекте — это осознанная, а не забытая пустота. Цвет почти монохромный: black/#999/#fcfcfc/#f2f2f2 + единственный акцент --link-color: #f7505e.

teenage.engineering. SPA с хешированными бандлами (18 css-файлов). Самый фрагментированный шрифтовый подход из пяти: помимо базовых te-20/te-40 — отдельный проприетарный шрифт под каждую продуктовую линейку (franxurter для EP-133/OP-1, swingus, riddim/riddimscript, TechnoType). Типографика не выражена в фиксированных px/rem вообще — единственное найденное буквальное значение font-size: 1.63265vw; всё остальное считается через JS-переменную --client-width (база проектирования 980px), например calc(.183673 * var(--client-width)). То есть сайт не использует ни CSS clamp, ни медиа-запросы для масштабирования — вместо этого перерисовывается пропорционально фиксированному canvas 980px, посчитанному в JS. Border-radius встречается только как 50% (круглые элементы управления/ручки) — ни одной скруглённой карточки, что согласуется с эстетикой «железной панели». Цвета — 5 насыщенных брендовых цветов, каждый привязан к реальному цвету корпуса устройства (#0071bb синий, #006837 зелёный, #f05a24 оранжевый, #b81d13 красный, #fab413 жёлтый).

remarkable.com. Next.js, один большой бандл 353KB — это полноценная система дизайн-токенов (Tailwind v4-подобные --color-*/--text-*/--spacing-*, префикс ark- намекает на Ark UI/Panda CSS). Самая развитая токен-система из пяти. Type scale целиком на нативном CSS clamp():

--text-fluid-md: clamp(1.25rem, .554vw + 1.086rem, 1.75rem);   /* 20→28px */
--text-fluid-6xl: clamp(2.75rem, 4.152vw + 1.517rem, 6.5rem);  /* 44→104px, вероятно H1 */

Полная светлая+тёмная семантическая цветовая система по каждому акценту (neutral/red/green — совпадает с реальными цветами устройства), 8-ступенчатые рампы каждая. Spacing — самая дисциплинированная шкала из пяти: --spacing-2: .125rem … --spacing-128: 8rem, кратно базе 2px. Самый богатый набор анимационных токенов (25+ именованных keyframes: slide-in-* по 8 направлениям, pop-in, blur-vignette, mask-fade) — сигнал зрелости и масштаба команды, а не «рукодельности» как таковой.

mercuryos.com. Загружается (HTTP 200, живой контент), но НЕ мёртв/не заброшен как ожидалось — CRA-приложение (2016, концепт-проект Джейсона Юаня), тело <div id="root"></div> без серверного DOM. CSS-бандл, однако, неминифицирован, с BEM-именами классов (.hero, .nero, .points, .section, .chapter), что позволяет с разумной уверенностью восстановить структуру секций по CSS даже без выполнения JS. Шрифт — self-hosted Söhne (Klim Type Foundry, немецкие имена начертаний «Mager»=light, «Kräftig»=medium), применяется глобально (html{font-family:Söhne}), без переопределений. Одновременно подключён Adobe Typekit (neue-haas-grotesk-display/text), но грепом по всему CSS-бандлу — ноль обращений к этому шрифту в каком-либо селекторе: реальный, замеренный «призрачный» импорт — лишний HTTP-запрос без визуального эффекта, оставшийся от более ранней итерации дизайна. Типографическая шкала — точные фиксированные px с резкими скачками, не fluid: .nero__title{font-size:120px} → .chapter__title{font-size:72px} → .section__title{font-size:48px} → .hero__caption{font-size:32px} → .section__desc{font-size:22px} → .point__desc{font-size:16-18px} → footer{font-size:14px}. На мобильном брейкпоинте (max-width:960px) — не fluid-пересчёт, а жёсткая пересадка на другие фиксированные числа (120px→54px). Контейнеры тоже все фиксированные px без rem/vw: .hero,.nero{width:900px}, .credits{width:600px}. Анимация — ровно один keyframe updown (покачивание стрелки скролла), никакой JS-библиотеки.

Ключевой вывод раздела: два сайта, которые по плотности сигналов читаются наиболее «hand-crafted» — Ink & Switch (буквальный комментарий разработчика, отвергающий тулинг, ноль анимации, задокументированная with-scratch fluid-сетка) и daylightcomputer.com (кастомная clamp-based fluid-система типографики/spacing, построенная поверх Tailwind вместо использования его дефолтов, лицензионные шрифты type-foundry с инженерными fallback-метриками). Teenage Engineering архитектурно — аутлаер: отказывается и от фиксированных брейкпоинтов, и от CSS clamp() в пользу JS-вычисляемого коэффициента масштаба --client-width, и назначает бесповую типографику на каждую продуктовую линейку — необычно глубокая бренд-кастомизация на уровне шрифта. reMarkable обладает самой зрелой, систематизированной архитектурой токенов (семантические светлые/тёмные/акцентные цветовые рампы, привязанные к физическим цветам устройства) — это сигнал масштаба/размера команды, а не «рукодельности» как таковой. mercuryos.com структурно не верифицирован за пределами CSS-инференции из-за client-side rendering.

Часть 3 — 22 приёма крафта для static HTML/CSS

Ниже — конкретные приёмы, выведенные из противопоставления частей 1 и 2: что именно отличает измеренные крафтовые сайты от tell-ов AI-slop, и как это воспроизвести в статичной вёрстке cosy. Формат на каждый: что это / почему читается как крафт / как сделать.

Типографика

1. Кастомная fluid-type шкала вместо дефолтного Tailwind/UI-kit scale.
   • Что: заголовки и текст масштабируются плавно между вьюпортами через clamp(), с индивидуально подобранными min/preferred/max для каждого уровня — не единая формула на всё.
   • Почему крафт: замерено у Daylight и reMarkable — оба вручную считают коэффициенты (.554vw + 1.086rem у reMarkable), а не берут text-4xl из дефолтной шкалы фреймворка. AI-slop использует framework-дефолты без изменений (tell #3, #14).
   • Как: h1 { font-size: clamp(2.75rem, 4.152vw + 1.517rem, 6.5rem); line-height: 1; } — коэффициент считается как (max_px - min_px) / (viewport_max - viewport_min) в vw, задать вручную под конкретный дизайн, не копировать чужие числа.
2. Инверсия конвенции: serif для тела текста, sans для заголовков (или наоборот, но осознанно, не по дефолту).
   • Что: Ink & Switch ставит Merriweather (serif) на body и Merriweather Sans на заголовки — обратный порядок тому, что «обычно делают».
   • Почему крафт: разрывает ожидание «serif = заголовок, sans = текст», сигнализирует осознанное типографическое решение, а не шаблон.
   • Как: body { font-family: "Your Serif", serif; } h1,h2,h3 { font-family: "Your Sans", sans-serif; font-weight: 300; } — лёгкий вес (300) на заголовках вместо bold усиливает эффект «шёпота, а не крика».
3. Разные шрифты на разные смысловые зоны, а не один шрифт на всё.
   • Что: Teenage Engineering даёт каждой продуктовой линейке свой проприетарный шрифт.
   • Почему крафт: прямая противоположность tell #1 (Inter-монокультура) — типографика становится частью бренд-идентичности конкретного раздела, а не нейтральным контейнером текста.
   • Как: для cosy — не обязательно кастомный шрифт под каждый раздел, но минимум 2 роли с чёткой границей (напр. один шрифт для UI/навигации, другой — для «человеческого», editorial-контента про семью/детей), с font-display: swap и explicit fallback stack.
4. Fallback-метрики на self-hosted шрифты против layout shift.
   • Что: Daylight задаёт ascent-override, size-adjust в @font-face для точного совпадения метрик кастомного шрифта и системного fallback.
   • Почему крафт: невидимая деталь, которую делают только когда действительно заботятся о CLS/восприятии загрузки — типичный AI-slop-сайт использует Google Fonts <link> без этого.
   • Как: сгенерировать через Fontaine или вручную посчитать ascent-override/descent-override/line-gap-override/size-adjust, прописать в @font-face fallback-блоке.
5. Editorial type ladder с крупными скачками кегля, а не плавной прогрессией.
   • Что: Mercury OS — 120px → 72px → 48px → 32px → 22px → 16-18px → 14px — резкие, «типографские» скачки вместо микро-прогрессии 1.125-множителя.
   • Почему крафт: читается как редакторское решение (журнал/книга), а не автоматически сгенерированная модульная шкала.
   • Как: выбрать 5-6 фиксированных значений вручную под реальные заголовки контента, не по формуле; допустить, что H1 в 3+ раза крупнее body — это нормально для print-эстетики.
6. Оптическая подстройка letter-spacing на больших кеглях.
   • Что: .nero__title { font-size: 120px; letter-spacing: -.02em } у Mercury OS — на display-размерах буквы физически ближе друг к другу для визуальной компактности.
   • Почему крафт: убирает «воздушность» гигантского заголовка, которая при масштабировании шрифта без коррекции выглядит рыхло — тонкая ручная настройка, не автоматика.
   • Как: на заголовках от ~48px добавлять letter-spacing: -0.01em до -0.03em в зависимости от размера, проверять глазами, не формулой.
7. Аскетичные подписи/сноски мелким кеглем как отдельная типографическая роль.
   • Что: Ink & Switch держит aside/figcaption на 13px/24px как самостоятельный, регулярно используемый уровень иерархии — не «мелкий текст где придётся», а систематическая маргиналия.
   • Почему крафт: сигнализирует academic/editorial дисциплину — сайт «знает», что у него есть контент разного статуса (основной текст vs. комментарий/сноска).
   • Как: ввести явный класс/тег <aside>/<figcaption> с уменьшенным кеглем (12-13px), увеличенным line-height (1.6-1.8) и приглушённым цветом текста; использовать для источников, дат, технических уточнений.

Цвет

8. Один акцентный цвет на тёплом нейтральном фоне вместо мульти-цветного градиента.
   • Что: reMarkable — #1142d4 (цвет пера) на #fcfbf8 (бумажный кремовый); Daylight — #ff9d00 (янтарный) на #faf5f2.
   • Почему крафт: прямая противоположность tell #8 (фиолетовый AI-градиент) — дисциплина «один цвет» читается как решение, а не как дефолт.
   • Как: зафиксировать ровно 1 акцент + 1-2 нейтральных (тёплый фон, тёплый почти-чёрный текст) в :root, запретить себе вводить второй яркий цвет без содержательной причины (напр. для второго продукта/режима).
9. Семантическая система цветовых токенов, привязанная к идентичности продукта, а не к абстрактной палитре.
   • Что: reMarkable — акценты neutral/red/green совпадают с реальными цветами корпуса устройства; Teenage Engineering — цвет UI-элемента равен цвету реального синтезатора.
   • Почему крафт: цвет перестаёт быть декоративным выбором и становится референсом к чему-то реальному — это невозможно скопировать бездумно, т.к. привязано к конкретному продукту.
   • Как: для cosy — если у продукта есть физические/визуальные «режимы» (напр. режим ребёнка/родителя/семьи), дать каждому свой приглушённый акцент вместо одного универсального на всё.
10. Тёплый почти-чёрный текст вместо #000/#1a1a1a.
    • Что: Daylight — #17190f; Ink & Switch держит чистый black, но на очень тёплом #fcfcfc фоне.
    • Почему крафт: чистый чёрный на чистом белом — дефолт браузера/Bootstrap; тёплый почти-чёрный (с лёгким сдвигом в жёлтый/коричневый) — осознанный колористический выбор под тёплую бумажную эстетику.
    • Как: --text: #2B2621 (не #000/#1a1a1a) — сдвиг на 2-3% в тёплый тон почти незаметен глазу напрямую, но меняет ощущение всей страницы.

Layout

11. 7-8 разных типов секций вместо повторения одного шаблона карточек.
    • Что: Daylight и reMarkable используют 7-8 структурно различных layout-типов на homepage (hero, icon-grid, testimonial wall, logo strip, spec table, carousel, use-case grid) — против tell #13 (хиро + 3 одинаковые карточки).
    • Почему крафт: разнообразие layout сигнализирует, что контент диктует форму, а не форма штампуется под любой контент.
    • Как: при планировании страницы явно перечислить 6-8 разных «типов» секций до вёрстки (напр.: полноэкранный hero, асимметричный 2-колоночный блок, спек-таблица, галерея/карусель, стена цитат, лого-полоса, финальный CTA, футер) и не повторять один и тот же грид дважды подряд.
12. Кастомная, не-display:grid-по-умолчанию сетка с задокументированной логикой.
    • Что: Ink & Switch строит 12-колоночную fluid-сетку через calc() и min(), явно документируя в комментарии, что «эта грид-система вообще не использует display:grid, это просто конвенция».
    • Почему крафт: показывает, что система спроектирована с нуля под конкретные пропорции сайта, а не взята as-is из CSS Grid tutorial.
    • Как: определить --rem: min(100vw / N, 1rem) (где N — число колонок дизайна), затем --col: calc(var(--rem) * X) для ширины блока — сетка становится fluid ниже контрольной точки и фиксированной выше неё, без единой медиа-запроса.
13. Радиус скругления как средство иерархии, а не единая константа.
    • Что: у всех пяти сайтов radius не одинаков — pill (9999px/50%) только на кнопках/интерактивных контролах, near-zero или маленький radius (.125rem-.25rem) на карточках/контейнерах.
    • Почему крафт: прямая противоположность tell #14 (единый radius на всём). Вариативность radius сигнализирует, что каждый элемент получил решение под свою функцию.
    • Как: минимум 2 значения radius в системе: --radius-control: 9999px (кнопки, теги, badges) и --radius-surface: 4-8px (карточки, изображения, инпуты) — никогда не использовать одно значение для обоих.
14. Фиксированные print-inspired контейнеры вместо 100%-fluid на всё.
    • Что: Mercury OS держит .hero{width:900px}, .credits{width:600px} — жёсткие, «страничные» ширины, не завязанные на vw.
    • Почему крафт: создаёт ощущение печатной полосы/книжной страницы вместо «резинового» веб-приложения — уместно для editorial/research-тона.
    • Как: для текстовых/editorial секций cosy — задать max-width в фиксированных px (не rem/vw), напр. 640px для длинного текста, 900px для широких композиций — не позволять тексту растягиваться на весь вьюпорт даже на большом мониторе.
15. Irregular (не 8px-grid) значения spacing, подобранные вручную.
    • Что: Ink & Switch использует .1rem, .3rem, .75rem, 1.5rem, 3rem — не строгую кратную-8 шкалу.
    • Почему крафт: прямая противоположность tell #15 (монотонный ритм). Ручная подгонка каждого отступа под конкретный визуальный результат вместо алгоритмической шкалы.
    • Как: не обязательно полностью отказываться от систематичности (reMarkable, наоборот, крайне систематичен — --spacing-2 … --spacing-128 кратно 2px, и это тоже читается как крафт, только другого типа — «дисциплина»). Ключевое решение: выбрать один из двух полюсов осознанно — либо строгая математическая прогрессия, либо ручная подгонка под глаз — и не смешивать их бессистемно, как это делает slop (одно случайное значение copy-paste везде).

Изображения, иконки, motion

16. Реальная фотография продукта в контексте, а не студийный «инфографик»-рендер.
    • Что: Daylight — alt="Daylight tablet on the grass", "a girl sitting on a park bench with Daylight tablet" — продукт в реальном сеттинге использования.
    • Почему крафт: прямая противоположность tell #29/#31 (абстрактные 3D-блобы, generic stock-фото офиса). Показ продукта в конкретном, специфичном контексте использования сигнализирует, что это реальная вещь, а не концепт.
    • Как: для cosy — если есть скриншоты интерфейса, показывать их в контексте реального устройства/сценария (напр. в руках, на кухонном столе), не на изолированном белом фоне с тенью.
17. Layered/parallax-композиция фото вместо плоского hero-изображения.
    • Что: Teenage Engineering собирает hero из отдельных PNG-фрагментов продукта, каждый с собственным transform: scale()/translate(), создавая слоистую композицию.
    • Почему крафт: требует ручной работы над композицией конкретного изображения — невозможно сделать автоматически шаблоном.
    • Как: разбить ключевой visual (скриншот приложения) на 2-3 слоя (фон, средний план, передний план УИ-элемент), расположить с небольшим CSS-параллаксом (transform: translateY() по scroll) вместо одной статичной картинки.
18. Hand-drawn line SVG диаграммы вместо generic icon-sets (Lucide/Heroicons россыпью).
    • Что: Ink & Switch иллюстрирует 4 области исследований собственными line-drawn SVG-иконками, не Lucide/Font Awesome.
    • Почему крафт: прямая противоположность tell #32 в его позитивном изводе — не «любительский filler», а осмысленная, штучная иллюстрация конкретной концепции (не генерическая метафора вроде «лампочка = идея»).
    • Как: заказать/нарисовать 4-6 кастомных line-иконок под конкретные концепции продукта (напр. семья/приватность/AI/устройства) вместо использования стандартного icon-пака целиком; толщина линии и стиль должны быть едины между всеми кастомными иконками.
19. Нулевая или предельно скромная анимация как осознанный выбор, а не «забыли добавить».
    • Что: Ink & Switch — 0 transitions/keyframes во всём проекте; Mercury OS — 1 keyframe на весь сайт.
    • Почему крафт: прямая противоположность tell #21 (fade-up на каждом элементе). Тишина в motion — сильный сигнал уверенности в контенте: сайту не нужно «оживлять» текст движением, чтобы удержать внимание.
    • Как: для research-раздела cosy — рассмотреть вариант вообще без scroll-reveal анимаций; если анимация нужна — не более 1-2 типов на весь сайт (напр. только hover на интерактивных элементах, без scroll-triggered fade).
20. Motion, функционально привязанный к содержанию, а не декоративный.
    • Что: reMarkable — --animate-draw-svg: draw-svg .5s ease .2s forwards (SVG буквально «дорисовывается»); Mercury OS — updown keyframe только на иконке-стрелке скролла (функция — подсказать «скролльте вниз»).
    • Почему крафт: каждая анимация имеет единственную, понятную функциональную роль — противоположность tell #22-24 (generic bounce/scale на всём).
    • Как: перед добавлением любой анимации задать вопрос «какую конкретную информацию это движение сообщает?» — если ответа нет («просто чтобы было красиво»), не добавлять.

Копирайт и общая композиция

21. Спека/техническая таблица как контент, а не украшение.
    • Что: Daylight завершает страницу «icon spec summary» — конкретными техническими характеристиками в табличном виде, а не расплывчатым CTA-блоком.
    • Почему крафт: прямая противоположность tell #25 (vague copy). Конкретные цифры/характеристики нельзя сгенерировать шаблоном без реального знания продукта.
    • Как: для research-страниц cosy — где уместно, заменить абстрактные формулировки («мощный AI помогает вашей семье») на конкретные, проверяемые утверждения/данные (что именно исследовано, какие метрики, какие ограничения).
22. Видимые «отпечатки автора» — задокументированные, осознанные технические решения.
    • Что: Комментарий разработчика Ink & Switch прямо в CSS-файле, объясняющий философию кода («maintainability over elegance or performance»).
    • Почему крафт: не элемент вёрстки как таковой, а мета-сигнал: за сайтом стоит конкретный человек с точкой зрения, а не безликий сгенерированный вывод.
    • Как: не обязательно оставлять комментарии в проде, но само наличие единого, последовательного, объяснимого технического решения на каждом уровне (почему этот шрифт, почему этот radius, почему нет анимации) — и способность это решение аргументировать — само по себе то, что отличает крафт от шаблона. Практически: вести короткий design rationale (даже на 1 страницу) при пересборке cosy, фиксируя почему, а не только что.

Источники (сводно)

Полный список ссылок — инлайн по тексту в частях 1 и 2. Основные: impeccable.style/slop/, 925studios.co, prg.sh — indigo-500, uxplanet.org — spot AI-generated design, NN/g — Scroll Fading 101, axe-web.com — Sea of Sameness; прямой fetch HTML/CSS: daylightcomputer.com, inkandswitch.com, teenage.engineering, remarkable.com, mercuryos.com (июль 2026).