Стайлгайд для робочих артефактів: звітів, досліджень, оглядів, дашбордів і калькуляторів. Всі приклади - нейтральні плейсхолдери: серії, канали, записи, етапи. Зміст прикладів не є частиною стилю і нічого не означає - дивись тільки на форму.
1 Основа
Два шари. Дані малює машина: моно-шрифт, піксель-спрайти, бари, схеми з рівними лініями. Коментар малює рука: стрілки, обведення, короткі примітки рукописним шрифтом. Шари не змішуються.
Без коробок. Блоки не мають рамок і фонових плашок. Все лежить прямо на папері. Структуру тримають відступи, підписи секцій і один лівий край.
Різкість за призначенням. Графіки і схеми малюються різко, у роздільності екрана. Піксельна естетика живе у спрайтах і дизері, не в розмитому тексті. Рукописний шар єдиний має право на неточність.
Рух. Рукописний шар малюється один раз при появі. Дані не анімуються. Виняток один - жива схема: повільний рух пакетів показує потік.
2 Кольори
папір, чорнилоФон і текст. Інших нейтральних тонів два: muted для другорядного тексту, faint для підписів.
серії данихФіксований порядок: кораловий, синій, м'ятний, фіолетовий. Палітра пройшла CVD-валідатор без зауважень.
статусиготово · увага · блокер · аналіз. Статусний колір не використовується як серія даних.
жовтий, помаранчевийЖивуть тільки всередині спрайтів. На сторінці їх нема.
дизерШаховий піксель-патерн означає "частково" або "прогноз". Не декор.
3 Типографіка
заголовок сторінкиМоно 700 · 30px
заголовок секціїМоно 700 · 18px · звичайний регістр
дані, хромМоно 400-700 · 11-13px · табличні цифри
довгий текстСистемний sans · 13.5px · інтерліньяж 1.6 · до 640px шириною
рукаChalkboard - тільки в рукописному шарі
Капслок і розріджений трекінг не використовуються ніде. Ієрархію тримають розмір, вага і колір.
4 Відступи і сітка
Крок відступів - 8px: 8, 16, 24, 32, 48. Колонка контенту - до 860px, довгий текст - до 640px. Між секціями 56px, між блоками всередині секції 16-24px. На вузьких екранах сітка складається в одну колонку.
5 Пікто-набір
Кольорові піксель-спрайти 24×24 - домашня заміна емодзі. Малюються кодом: пласка фігура, дизер-тінь шаховим патерном на нижній частині і чорнильний контур. Бліків нема. У схемах спрайти йдуть без тіні, тільки контур.
У рядку спрайт стоїть зліва, один:
Терміновий запис із дедлайномсьогодні
Запис Б - завершено і переданоготово
Очікуємо вхідні дані від сторони2 дні
6 Списки і посилання
Вбудований опис - термін і пояснення в одному рядку:
Поняття А
- пояснення в один рядок, одразу після терміна.
Поняття Б
- друге пояснення тим самим патерном: термін жирним, опис звичайним.
Опис збоку - коли пояснення довше за рядок:
Варіант Аумова застосування
Довше пояснення варіанта на два-три речення. Термін ліворуч, опис праворуч, дрібна умова під терміном.
Варіант Бінша умова
Другий запис того самого списку. Порівнюваність тримається однаковою будовою рядків.
Меню. Дропдаун - рамка 1px, пункти mono, небезпечна дія коралова, шорткати праворуч:
Відкрити↵
Дублювати⌘D
Експорт у PDF
Видалити
Шари. Модал - по центру, з затемненням. Шухляда - справа, для деталей запису. Escape і клік по фону закривають обидва:
Видалити запис №214?
Дію не можна скасувати. Повʼязані дані лишаться в архіві.
Запис №214
Повʼязаний обʼєкт
до п'ятниці
Дрібниці. Тултіп - чорнильна плашка над елементом. Скелетон - дизер-смуги на місці даних, без пульсації. Аватар - квадрат з mono-ініціалами:
остання подія: вчора 18:40
ОК
ІР
ДМ
квадрат, тінт серії відділу, ініціали чорнилом
Сповіщення. Рядки зі спрайтом і часом mono праворуч:
Процес №212 завершено14:20
Ресурс А закінчується11:05
Стани. Кожен інтерактивний елемент має чотири стани. Hover - фон на крок темніший. Фокус - контур 2px синім, без радіуса. Press - зсув на 1px. Disabled - прозорість 40%.
13 Схеми
Розділ застарів. Канонічна мова звʼязків з 21 серпня 2026 - дроти з вантажем: сторінка схеми. Стрілкові схеми нижче лишаються до переписання розділу і не використовуються в нових артефактах.
Аналог mermaid-схем: різкі ортогональні лінії, вузли з рамкою 1px, спрайт зліва, підпис моно. Рамка тут дозволена - вузол і є даними.
словаОдне слово - одне значення. Термін не змінюється заради різноманіття. Розмиті дієслова (опрацювати, забезпечити) замінюються точними (виправ, надішли, видали).
без продажуЖодних оцінок: "потужний", "зручний", "інноваційний". Тільки факт і механізм. Читач сам вирішить, чи це зручно.
без хеджів"Здається", "можливо, варто" - геть. Стверджуй факт або постав питання прямо.
дати, моваУ тексті: 18 серпня 2026. У даних і frontmatter: 2026-08-18. Українська і англійська мішаються природно, терміни не перекладаються силоміць.
Погано: "Наш потужний модуль дозволяє легко та зручно керувати всіма вашими замовленнями." Добре: "Модуль веде замовлення: створення, чергу і статуси."
17 Темна тема "Вугілля"
Світлий папір - дефолт для звітів і документів. Темна тема служить інтерфейсам, дашбордам і настінним екранам. Вона приглушена: чорнило #d9d9d5 на вугіллі #151517, ~11:1 - чітко, але не кричить. Серії мають окремі темні значення, у спрайтах кольори повні, пригашені тільки нейтрали (білий #c6c6c1, сірий #9d9e99), контур #c9c9c5. Повна версія: окремий артефакт "PixelKit Вугілля".
Мапінг стилю на Word і PDF. Готові шаблони лежать у 📁 Docs; їх зміст - теж плейсхолдер. Все нижче - правила шаблонів.
сторінкаA4, поля 2.5 см зліва/зверху/знизу, 2 см справа. Верхній колонтитул - назва документа, faint mono 9pt, hairline під ним. Нижній - номер сторінки "2 / 12" mono праворуч.
шрифтиЗаголовки і дані - Consolas. Тіло - Calibri 11pt, інтерліньяж 1.45. Числа в таблицях завжди Consolas.
шапкаСпрайт-марка, назва mono bold 22pt, мета-рядок "автор · дата · версія · аудиторія" faint mono, суцільна лінія під шапкою.
таблиціБез вертикальних ліній. Шапка faint mono з суцільною межею знизу. Рядки з тонкими сірими лініями. Числа праворуч. Підсумок над суцільною лінією, bold.
врізки, спискиВрізка - лівий кант 3pt статусного кольору з відступом. Маркер списку - тире.
спрайти, рукаСпрайт - тільки на титулі, вставленим PNG. У тілі документа спрайтів і емодзі нема. Рукописного шару у формальних документах нема.
memo, актMemo - одна сторінка: шапка звіту, три-п'ять абзаців, без розділів. Рахунок і акт - таблиця специфікації плюс реквізити, все з шаблонів у 📁 Docs. Лист на бланку, протокол і короткий NDA будуються з тих самих блоків.
друкHTML-звіти мають print-стилі: білий фон, без тултіпів і тостів, секції не рвуться між сторінками. PDF з артефакта - через друк браузера.
контрактЩільніша верстка: тіло 10pt, інтерліньяж 1.26, поля 2 см. Номери пунктів - mono bold, текст - sans. Числа, суми, строки і відсотки в тексті - mono. Підпункти - тире з відступом. Реквізити - дві безрамкові колонки з IBAN у mono. Колонтитул знизу - місця для парафування "Виконавець ___ Замовник ___" і номер сторінки. Додатки - з нової сторінки, з власною шапкою. Зразок: PixelKit-contract.docx у 📁 Docs.
19 Слайди
PPTX-шаблон: PixelKit-slides.pptx у 📁 Docs. Світлі слайди для друку і роздачі, "Вугілля" - для проєктора.
титулСпрайт-марка, назва mono bold 32pt, мета-рядок faint mono, лінія. Все зліва.
контентОдна думка на слайд. Заголовок mono 22pt, тіло sans 16pt, до п'яти рядків. Список - тире.
даніОдин графік на слайд, з прямими підписами. Числа великі, mono. Таблиці - максимум п'ять рядків.
заборониБез буліт-пірамід, градієнтів, тіней і переходів. Спрайт - максимум один на слайд.
20 Рукописний шар
Рука з'являється тільки за рішенням автора і показує на головне. До трьох приміток на екран. Кожна примітка - стрілка або обведення плюс два-чотири слова. Рука ніколи не дублює те, що вже написано поруч.
21 Дозування
рукаДо трьох приміток на екран, тільки за рішенням автора. Немає автоматичних коментарів.
спрайтиКольоровий спрайт - заміна емодзі. Один на рядок, зліва. Не в заголовках, не в кнопках. Системні емодзі не використовуються ніде.
дизерОзначає "частково" або "прогноз". Хвіст прогрес-бара, прогнозна зона, зовнішній вузол схеми, "частково" в таблиці.
серіїПорядок фіксований: кораловий, синій, м'ятний, фіолетовий. Більше чотирьох серій - розбий на кілька графіків.
рамкиКоробок нема. Рамка 1px дозволена там, де вона є даними: вузол схеми, свотч, спрайт. Кант врізки 3px несе статусний колір.
регістрКапслок і трекінг не використовуються. Ієрархія - розміром, вагою, кольором.