Дизайн-система 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 как кириллическим резервный сценарий и JetBrains Mono для prompt, meta, тегов и терминальных блоков. Основная проза — 16/18px, описания и навигация — от 14px, metadata — от 12px, подписи — от 14px. Caveat — только на sketch-поверхностях.
Примитивы roughjs
Детерминированная геометрия от руки: один и тот же seed → одинаковые линии при каждом рендере, в PDF и в visual-smoke.
Рамки и карточки
HTML-контейнеры с «дрожащей» рамкой через CSS-фильтр — рамка кривая, текст внутри ровный.
Аннотации
Подчёркивание, обводка, рамка, зачёркивание, маркер — в стиле rough-notation, нарисованы на roughjs.
подчёркивание · обводка · рамка · зачёркнуто · маркер
Визуализации для слайдов
Доступны как варианты через единый switch — деки подключают их без правок рендереров.
Диаграммы фреймворков
Та же диаграмма в чистом и hand-drawn режимах — один проп sketch.
1. Стартап
Startup Coder
строит первый продукт
2. Рост
Engineering Manager
масштабирует команды
3. Зрелость
All-in-one CTO
технологии · люди · бизнес
4. Усложнение
CIO · CTO · VP Eng
роль разделяется
5. Упадок
Новой роли нет
четыре симптома упадка
Страничные примитивы
src/components/ui: PageShell, BackLink, Eyebrow/PageTitle/Lede, MetaChip/TagChip, PillLink, TakeawaysBand, Card. Каждый замораживает одну строку классов; тест designSystemFrozenStrings режет сырые копии в страницах.
Заголовок в редакционном голосе
Лид в один абзац: Space Grotesk light, tracking-tight только на display-размерах, ниже — обычный текст.
Основное и вторичное действие: одна форма, высота и типографика. Приоритет задают заливка и рамка.
Три вывода
- 01Токены и деки уже были системой; не хватало слоя между ними и страницами.
- 02Примитивы не добавляют CSS: они замораживают уже существующие утилиты.
- 03Список сырых копий в тесте только уменьшается.
Вынос на полях (MarginNote)
Неформальный комментарий автора в правом поле лонгрида: маркер-стрелка стоит в тексте, заметка — курсивом в отдельной колонке со ссылками на «Книжный куб». На экранах уже 2xl заметка сворачивается, и её раскрывает тап по маркеру. Правила авторинга — в docs/design-system.md.
Колонка лонгрида имеет ширину max-w-5xl, а справа от неё на широких экранах живёт колонка заметок. Маркер ставится в конец аннотируемого предложения.01Примерно так это и выглядит: курсив, приглушённый цвет, стрелка-связка с маркером и моноширинная ссылка внизу.Книжный куб · канал
Когда уместно
- Диаграммы, схемы, потоки, аннотации — там, где «показать», а не «прочитать».
- Prompt-wordmark, mono-теги и terminal surfaces — для брендовых точек сайта.
- Всегда внутри SketchSurface — палитра и фильтры в скоупе.
- Стабильный seedId/seedKey, чтобы рендер был детерминированным.
- Подпись role="img" + aria-label на каждом sketch-SVG.
Когда не надо
- Не применять к навигации, тексту статей, общему фону сайта.
- Не использовать зелёный как декоративный фон — это сигнал, курсор и одно главное действие.
- Не делать рукописным основной текст — Caveat только для коротких подписей.
- Не использовать Math.random для геометрии — только хеш-seed.
- Не плодить декоративные фоны вопреки редакторскому стилю (AGENTS.md).