Дизайн-система polomodov.tech
Новый бренд строится вокруг terminal prompt: тёплый тёмный монохром, один зелёный signal-accent, Space Grotesk для интерфейса и JetBrains Mono как голос. Hand-drawn (excalidraw) стиль остаётся только на визуализациях.
Палитры и поверхности
Глобальный сайт использует terminal ink tokens из src/index.css. Sketch-визуализации по-прежнему выбирают «бумагу» или «доску» через data-sketch-theme на обёртке.
--sketch-surface--sketch-surface-2--sketch-label-bg--sketch-ink--sketch-ink-soft--sketch-accent--sketch-accent-2--sketch-surface--sketch-surface-2--sketch-label-bg--sketch-ink--sketch-ink-soft--sketch-accent--sketch-accent-2Типографика
Каркас сайта — Space Grotesk с Inter как кириллическим fallback и JetBrains Mono для prompt, meta, тегов и терминальных блоков. Caveat — только на sketch-поверхностях.
Примитивы roughjs
Детерминированная геометрия от руки: один и тот же seed → одинаковые линии при каждом рендере, в PDF и в visual-smoke.
Рамки и карточки
HTML-контейнеры с «дрожащей» рамкой через CSS-фильтр — рамка кривая, текст внутри ровный.
Аннотации
Подчёркивание, обводка, рамка, зачёркивание, маркер — в стиле rough-notation, нарисованы на roughjs.
подчёркивание · обводка · рамка · зачёркнуто · маркер
Визуализации для слайдов
Доступны как варианты через единый switch — деки подключают их без правок рендереров.
Диаграммы фреймворков
Та же диаграмма в чистом и hand-drawn режимах — один проп sketch.
Когда уместно
- Диаграммы, схемы, потоки, аннотации — там, где «показать», а не «прочитать».
- Prompt-wordmark, mono-теги и terminal surfaces — для брендовых точек сайта.
- Всегда внутри SketchSurface — палитра и фильтры в скоупе.
- Стабильный seedId/seedKey, чтобы рендер был детерминированным.
- Подпись role="img" + aria-label на каждом sketch-SVG.
Когда не надо
- Не применять к навигации, тексту статей, общему фону сайта.
- Не использовать зелёный как декоративный фон — это сигнал, курсор и одно главное действие.
- Не делать рукописным основной текст — Caveat только для коротких подписей.
- Не использовать Math.random для геометрии — только хеш-seed.
- Не плодить декоративные фоны вопреки редакторскому стилю (AGENTS.md).