Design Kit

Підтверджена палітра / Confirmed palette

• Expressive Yellow

  #FFD500 --color-brand-yellow-expressive

  Головний сигнал: акцентна поверхня, кільце фокуса, індексні підписи. / primary signal · focus · accent surface

• Primary Yellow

  #C4A006 --color-brand-yellow-primary

  Стриманий сигнал: інтерактивний стан головної дії. / restrained signal · interactive primary action

• Expressive White

  #FFFFFF --color-brand-white-expressive

  Основний текст на темних поверхнях. / primary text on dark surfaces

• Primary White

  #B8B8B8 --color-brand-white-primary

  Другорядний текст, тиха інформація та сильна рамка. / secondary text · strong border

• Neutral Gray

  #7A7A7A --color-brand-gray-neutral

  Тихі рамки та графіка. Не для звичайного тексту на Plain Black. / quiet borders · graphics · not normal text

• Neutral Dark Gray

  #212121 --color-brand-gray-dark

  Піднята редакційна поверхня. / raised editorial surface

• Plain Black

  #171717 --color-brand-black

  Чорнило на акцентних поверхнях і друга поверхня дій; полотно з 2026-08-25 глибше за нього (D-055). / ink on accent · secondary action surface

Семантичні ролі / Semantic roles

Кожна роль посилається на підтверджений примітив, з одним задокументованим відхиленням: полотно з 2026-08-25 — глибший за Plain Black #101010 (рішення власника, D-055), щоб плити, мапа і патерн читалися на глибині. Ролі дій показано зі специменами дій.

• Полотно / canvas

  --color-surface-canvas = #101010

• Піднята поверхня / raised surface

  --color-surface-raised = --color-brand-gray-dark = #212121

• Акцентна поверхня / accent surface

  --color-surface-accent = --color-brand-yellow-expressive = #FFD500

• Основний текст / primary text

  --color-text-primary = --color-brand-white-expressive = #FFFFFF

• Другорядний текст / secondary text

  --color-text-secondary = --color-brand-white-primary = #B8B8B8

• Текст на акценті / text on accent

  --color-text-on-accent = --color-brand-black = #171717

• Тиха рамка / quiet border

  --color-border-quiet = --color-brand-gray-neutral = #7A7A7A

• Сильна рамка / strong border

  --color-border-strong = --color-brand-white-primary = #B8B8B8

• Фокус / focus

  --color-focus = --color-brand-yellow-expressive = #FFD500

Пари контрасту / Contrast pairs

Звичайний текст потребує щонайменше 4.5:1, нетекстові індикатори та фокус — 3:1. Співвідношення обчислені під час збірки з тих самих значень токенів. Текстові пари показані літерами, нетекстові — рамкою і смугою в кольорі індикатора; остання пара свідомо задокументована як несхвалена.

• Аа

  Основний текст на полотні / primary text on canvas

  --color-text-primary on --color-surface-canvas

  19.02:1 мінімум 4.5:1 — проходить / passes

• Аа

  Другорядний текст на полотні / secondary text on canvas

  --color-text-secondary on --color-surface-canvas

  9.59:1 мінімум 4.5:1 — проходить / passes

• Аа

  Основний текст на піднятій поверхні / primary text on raised surface

  --color-text-primary on --color-surface-raised

  16.10:1 мінімум 4.5:1 — проходить / passes

• Аа

  Другорядний текст на піднятій поверхні / secondary text on raised surface

  --color-text-secondary on --color-surface-raised

  8.11:1 мінімум 4.5:1 — проходить / passes

• Аа

  Текст на акцентній поверхні / text on accent surface

  --color-text-on-accent on --color-surface-accent

  12.60:1 мінімум 4.5:1 — проходить / passes

• Кільце фокуса на полотні (нетекстовий індикатор) / focus ring on canvas

  --color-focus on --color-surface-canvas

  13.38:1 мінімум 3:1 — проходить / passes

• Кільце фокуса на піднятій поверхні / focus ring on raised surface

  --color-focus on --color-surface-raised

  11.32:1 мінімум 3:1 — проходить / passes

• Сильна рамка на полотні / strong border on canvas

  --color-border-strong on --color-surface-canvas

  9.59:1 мінімум 3:1 — проходить / passes

• Тиха рамка на полотні (лише графіка й рамки) / quiet border on canvas

  --color-border-quiet on --color-surface-canvas

  4.43:1 мінімум 3:1 — проходить / passes

• Аа

  Neutral Gray як звичайний текст на полотні — свідомо не схвалено / Neutral Gray as normal text — not approved

  --color-brand-gray-neutral on --color-surface-canvas

  4.43:1 мінімум 4.5:1 — не проходить / fails

Ролі та шкала / Roles and scale

Ролі родини та нульовий трекінг підтверджені; адаптивний розмір і висота рядка кожної ролі — провізорна веб-шкала, позначена окремою плашкою.

1. Дисплей / display --type-size-display: clamp(3.5rem, 1.72rem + 8.9vw, 10rem) --type-line-display: 0.86 --font-weight-black: 900 --font-width-condensed: 75% .u-display-type letter-spacing: 0 text-transform: uppercase

   Тримай рубіж

   Заголовок першого рівня та великі композиції; не використовується як дрібний текст інтерфейсу.

2. Титул / title --type-size-title: clamp(2.5rem, 1.68rem + 4.1vw, 5.5rem) --type-line-title: 0.94 --font-weight-black: 900 --font-width-condensed: 75% .u-title-type letter-spacing: 0 text-transform: uppercase

   Hold the line

   Заголовки розділів і великих блоків.

3. Заголовок / heading --type-size-heading: clamp(1.75rem, 1.41rem + 1.7vw, 3rem) --type-line-heading: 1.05 --font-weight-black: 900 --font-width-condensed: 75% .u-heading-type letter-spacing: 0 text-transform: uppercase

   Ґрунтовність, єдність, ініціатива

   Заголовки секцій; у цьому кіті — кожен h2.

4. Підзаголовок / subheading --type-size-subheading: clamp(1.25rem, 1.11rem + 0.7vw, 1.75rem) --font-weight-medium: 600 --font-width-regular: 100%

   Підзаголовок запису чи картки

   Заголовки підрозділів і карток звичайним накресленням; без утиліти пакета.

5. Основний текст / body --type-size-body: clamp(1rem, 0.97rem + 0.16vw, 1.125rem) --type-line-body: 1.58 --font-weight-regular: 400 --font-width-regular: 100%

   Український текст перевіряє ритм, апостроф ʼ, літери Ґ, Є, І, Ї та читабельність довгого повідомлення без реального контенту сайту.

   Читабельна ширина рядка обмежена мірою основного тексту. Міра рядка: --type-measure-body: 68ch.

6. Дрібний текст / small --type-size-small: 0.875rem --type-line-small: 1.45 --font-weight-regular: 400 --font-width-regular: 100%

   Service line, labels, and metadata never go below this size.

   Нижня межа розміру службового тексту; дисплейне накреслення для нього не використовується.

Походження шрифту та ліцензія / Font provenance and license

Файли шрифту є імплементаційними активами з зафіксованим походженням залежності та ліцензії, а не претензією на фінальний клієнтський пакет шрифту.

Родина / family

Tektur Variable (токен --font-family-brand із системними запасними шрифтами)

Пакет / package

@fontsource-variable/tektur 5.3.0

Ліцензія / license

SIL Open Font License 1.1 (OFL-1.1), реліз Google Fonts

Формат і розміщення / format · hosting

WOFF2 з варіативними осями, самостійне розміщення; жодного зовнішнього запиту шрифтів

Підмножини / subsets

cyrillic, cyrillic-ext, latin, latin-ext — рівно чотири файли в збірці

Осі / axes

wght 400–900, wdth 75–100 %

Шкала відступів / Spacing scale

Дискретна шкала від 4 до 128 CSS px для внутрішнього ритму; кожна смуга має ширину свого токена.

1. --space-1 0.25rem · 4 px
2. --space-2 0.5rem · 8 px
3. --space-3 0.75rem · 12 px
4. --space-4 1rem · 16 px
5. --space-6 1.5rem · 24 px
6. --space-8 2rem · 32 px
7. --space-12 3rem · 48 px
8. --space-16 4rem · 64 px
9. --space-24 6rem · 96 px
10. --space-32 8rem · 128 px

Контейнер і плавні проміжки / Container and fluid gaps

Максимальна ширина вмісту / max content width

--layout-max-width: 90rem · 1440 px Утиліта контейнера центрує вміст і не перевищує цю ширину.

Зовнішнє поле / gutter

--layout-gutter: clamp(1rem, 0.45rem + 2.75vw, 3rem) Плавне поле від 1rem до 3rem; контейнер віднімає його з обох боків.

Проміжок сітки / grid gap

--layout-grid-gap: clamp(0.75rem, 0.55rem + 1vw, 1.5rem) Плавний проміжок між колонками й рядами.

Відступ між секціями / section space

--layout-section-space: clamp(4rem, 2.9rem + 5.5vw, 8rem) Плавний вертикальний ритм для великих композицій.

Сітка 4 / 8 / 12 / Column grid

Кількість колонок за шириною вікна; проміжок — --layout-grid-gap. Демонстрація нижче використовує ті самі точки перемикання.

• 4 до 48rem (менше 768 px) / below 48rem
• 8 від 48rem до 64rem (768–1023 px) / 48rem to below 64rem
• 12 від 64rem (1024 px) / 64rem and up

Пропорції медіа / Media ratios

Лише CSS-абстракції без зображень. Реальні фото, альтернативний текст, фокусна точка, намір кадрування, права та авторство належать Strapi.

• 16:9 Широке документальне поле / wide documentary field --media-ratio-landscape: 16 / 9
• 4:3 Редакційний стандарт / editorial default --media-ratio-editorial: 4 / 3
• 1:1 Квадрат / square --media-ratio-square: 1
• 3:4 Портретне кадрування / portrait crop --media-ratio-portrait: 3 / 4

Фокус і цілі вводу / Focus and targets

Товщина кільця фокуса / focus ring width

--focus-ring-width: 0.1875rem · 3 px Суцільний контур для кожного елемента у стані видимого фокуса (focus-visible).

Відступ кільця фокуса / focus ring offset

--focus-ring-offset: 0.25rem · 4 px Кільце малюється поза елементом і не перекриває його вміст.

Колір кільця фокуса / focus colour

--color-focus: var(--color-brand-yellow-expressive) = #FFD500 Expressive Yellow; на полотні й піднятій поверхні контраст не менше 3:1.

Мінімальна ціль вводу / minimum target size

--control-target-min: 2.75rem · 44 px Мінімальний квадрат для інтерактивних цілей; перевищує мінімум 24 px WCAG 2.2.

Тривалості й криві руху / Motion durations and easing

Швидка тривалість / fast duration

--motion-duration-fast: 120ms Мікрозміни стану: фокус, наведення.

Базова тривалість / base duration

--motion-duration-base: 200ms Стандартні переходи елементів.

Повільна тривалість / slow duration

--motion-duration-slow: 320ms Скінченні акценти; специмен нижче — чотири ітерації.

Стандартна крива / standard easing

--motion-easing-standard: cubic-bezier(0.2, 0, 0, 1) Переходи без акценту.

Акцентована крива / emphasized easing

--motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1) Поява та акцентні рухи.

Принципи руху / Motion principles

Рух скінченний / finite motion

Анімація має обмежену кількість ітерацій; нескінченні цикли й автозапуск декоративного руху не використовуються.

Лише transform і opacity / transform and opacity only

Анімуються лише transform та opacity, щоб рух не спричиняв перекомпонування й зсувів макета.

Зменшений рух / reduced motion

За prefers-reduced-motion: reduce тривалість анімацій і переходів стискається до 0.01 ms, кількість ітерацій — до однієї, а плавний скрол вимикається.

Вміст і перекомпонування / Content and reflow

Перекомпонування до 320 px / reflow at 320 CSS px

Вміст перекомпоновується без горизонтального скролу за ширини вмісту 320 CSS px, зокрема з класичним 15 px скролбаром; мінімальної ширини сторінки немає.

Масштаб 200 % / 200 % zoom

Еквівалент збільшення 200 % зберігає читабельність і порядок вмісту без обрізання.

Структура заголовків і орієнтири / headings and landmarks

Один h1, кожна секція має h2, рівні не пропускаються; є орієнтири, посилання пропуску та видимий фокус.

Мова частин тексту / language of parts

Документ українською; англійські терміни позначені атрибутом lang="en".

Перенесення довгих рядків / long-string wrapping

Основа дозволяє перенесення будь-де як крайній засіб для довгих рядків; заголовки та терміни кіту переносяться лише між словами.

Нижня межа дрібного тексту / small-text floor

Службовий текст не менший за 0.875rem; дисплейне накреслення не використовується для дрібного тексту.

Прямокутні дії / Rectangular actions

Жовтий позначає головний намір, контур — альтернативний шлях. Прямокутна форма без зрізаних кутів (D-029) не конкурує з фокусним кільцем; мінімальна ціль вводу — 2.75rem · 44 px.

Наведення, натискання і клавіша Tab показують справжні псевдокласи, а не намальовані дублікати станів.

Стани кнопки / Button states

Чесний стан без імітацій: недоступна кнопка — справжній disabled, зайнята — disabled разом з aria-busy і власним підписом процесу.

Текстові посилання / Text links

Підкреслений перехід у текстовому потоці: звʼязок видно завжди, а не лише при наведенні. Фікстури трьох локалей перевіряють довгі підписи без переповнення.

Поля форми / Form fields

Нативні контроли з чесними станами: видимі підписи, повʼязані підказки й помилки через aria-describedby, стандартний селект без скриптової імітації та реальний чекбокс згоди.

Рухомий рядок / Ticker

Нескінченна стрічка з дубльованими доріжками, схованими від допоміжних технологій. За explicit owner direction стрічка не має окремого control; для prefers-reduced-motion анімація вимикається, а елементи розгортаються статичним рядком без втрати вмісту.

Навігація та іконні посилання / Navigation and icon links

Посилання навігації з чесним станом поточної сторінки через aria-current; перемикач мов — той самий атом. Іконне посилання гарантує ціль 44 пікселі, доступну назву і безпечний rel для зовнішніх переходів; гліф передається слотом.

Той самий атом із графічним гліфом у слоті — саме так його вживає герой. У продакшні гліф приходить файлом із CMS; кіт не публікує растрові активи, тож тут це вбудований умовний контур. Повна геометрія соціального ряду перевіряється нижче через справжній package-owned HeroPanel, без ручного відтворення його внутрішньої структури.

Картки / Cards

Картка цінності — заголовок, правило, текст. Картка вакансії завжди показує медіа, назву й опис одним стабільним потоком; optional-дія додається останнім рядком і не змінює геометрію в hover/focus. Якщо робочої дії ще немає, картка лишається звичайною статтею без мертвого посилання. Замість фото — умовний плейсхолдер.

Кроки процесу / Process steps

Нумерація — CSS-лічильник упорядкованого списку, а не текст у контенті: кількість кроків визначає CMS. Опис кроку необовʼязковий.

1. Заявка

   Заповніть форму — рекрутер звʼяжеться протягом доби.

2. Співбесіда

   Розмова про досвід, мотивацію та очікування.

3. Медогляд

4. Підготовка

   Базова загальновійськова підготовка та фахове навчання.

5. Розподіл

   Фінальна розмова та призначення до підрозділу.

Стрічка медіа / Media strip

Горизонтальна стрічка на CSS scroll-snap без жодного скрипта: прокрутка колесом, дотиком і клавіатурою (регіон фокусується), а нативна смуга прокрутки — чесний індикатор прогресу.

Шапка секції / Section header

Шапка секції публічного сайту: надзаголовок, заголовок і правило. У продакшні рендериться рівнем h2; тут — h3, щоб не ламати ієрархію заголовків кита.

Хедер і панель меню / Header and menu panel

Глобальний хедер у двох станах: суцільна темна смуга не пропускає патерн, у спокої тримає повний рядок оголошень, а у пристикованому рядок згортається і зʼявляється коротка марка. Перед мовами живе merch utility з реальною 44px ціллю та підказкою. Навігація живе за бургером на всіх ширинах; панель — це нативний popover, тож Escape, закриття кліком поза панеллю, верхній шар і повернення фокуса на кнопку працюють без жодного скрипта. Чого popover не дає — це модальності: фокус із відкритої панелі виходив би на перекритий вміст. Її додає скрипт, який їде всередині компонента MenuPanel (D-046): відкрита шухляда робить решту сторінки inert, утримує Tab усередині й закривається при переході за пунктом меню — і тут, і на сайті це та сама одна імплементація. Бренд-марка передається слотом: у продакшні це зображення з CMS, у киті — текстова фікстура, тож реальний тип вмісту слота кит показати не може — пакет обмежує його висоту сам.

Текстовий потік / Prose

Типографіка редакторського тексту: правила навішуються на самі елементи, бо розмітка приходить із CMS і класів на ній немає. Міра рядка обмежена, щоб довгий юридичний текст лишався читабельним.

Рендерер CMS-тексту / Blocks renderer

Той самий текстовий потік, але розмітку до нього робить не автор сторінки, а рендерер CMS-полів: перелічені тут блоки — це все, що редактор бачить у тулбарі Strapi. Вузол, якого рендерер не вміє, валить білд, а не зникає тихо. Зразок парситься тим самим контрактом, що й сайт, тож розбіжність між союзом вузлів і гілками рендеру ламає цю сторінку.

GET /api/legal-pages?locale=uk

Перелік локацій / Location list

Перелік населених пунктів бойового шляху — це список назв, а не таблиця даних, тож розмітка — список. Кожен рядок несе стабільний data-location зі слаґу CMS і тримає мінімальну висоту цілі вводу: за цей ідентифікатор наступний зріз чіпляє точку на мапі.

• Оборона Гостомеля 2022
• Деокупація Лиману
• Попасна 2022
• Бахмут 2022–2023
• Станиця Луганська 2014
• Маріуполь

Карта бойового шляху / Combat path map

Стилізований контур України з точками бойового шляху. Координати mapX/mapY приходять із CMS-колекції локацій. Наведення або фокус на рядок у списку підсвічує відповідну точку на мапі. На самій мапі компонент геометрично вибирає найближчу до курсора точку, тому щільні координати не перекривають одна одну невидимими цілями. Стан тимчасовий: жодного кліку, фіксації чи окремого режиму мапи немає.

Відеофон / Video backdrop

Повна композиція героя належить пакету: високий шеврон, справжній заголовок із формальною назвою та соціальні посилання. Обгортка фонового відео — <video autoplay muted loop playsinline> з постером, резервним <img> і підтримкою prefers-reduced-motion. Кит показує справжній HeroPanel на геометричному фоні без production-медіа; сайт підставляє в його media-slot VideoBackdrop зі Strapi.

Анкета рекрутингу / Recruitment form

Єдина inline-анкета з полями, згодами, статусом і optional медіаслотом. Production Turnstile тут навмисно відсутній: Design Kit не робить зовнішніх запитів.

Анімований шум / Noise overlay

Анімований плівковий шум з оригінального сайту: NoiseOverlay малює на canvas дрібні випадкові монохромні цятки низької прозорості й оновлює їх через кадр; шар фіксований на весь в'юпорт, pointer-events: none, а за prefers-reduced-motion текстура малюється один раз і не мерехтить. Кит лишається вільним від медіаелементів (та сама межа, що й у відеофону), тож живий canvas тут не рендериться — поведінку доводить браузерний прогін публічного сайту.

Атоми футера / Footer atoms

Смуга футера з трьома слотами, посилання «догори» як звичайний якір без скрипта і акцентні контактні посилання.

Фінальний контактний блок / Contact panels

Окремий темний блок запитань завершує процес, а компактний темний Contact збирає ідентичність, канали та прямі контакти без повноекранного фіналу. Production lockup, emblem та social icons надходять зі Strapi; тут їх замінюють текстові й геометричні fixtures без медіафайлів.