0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

2026-10-15 21:17:28 +08:00

32 KiB

Raw Blame History

Design System Inspired by Nike

Category: Електронна комерція та роздрібна торгівля Спортивний роздріб. Монохромний інтерфейс, масивний uppercase-шрифт, фотографії на весь екран.

1. Візуальна тема та атмосфера

Nike.com — це кінетичний собор роздрібної торгівлі: сайт, що транслює вибухову енергію спорту в цифровий досвід покупок. Дизайн будується на принципі радикальної простоти: все зведено до чорного, білого та сірого, щоб спортивна фотографія та кольори продукту панували без жодної конкуренції. Результат нагадує не стільки вебсайт, скільки спортивне видання, оформлене з точністю розкішного журналу. Кожен піксель або продає товар, або веде до нього.

«Podium CDS» (внутрішня Core Design System Nike) встановлює агресивно монохроматичну основу. Інтерфейс розчиняється в тексті кольору #111111 та білих поверхнях, дозволяючи героїчній фотографії — потіючим атлетам, кросівкам у повітрі, енергії стадіону — нести весь емоційний заряд. Коли колір з'являється в інтерфейсі, він майже виключно функціональний: червоний для помилок, синій для посилань, зелений для успіху. Сам продукт — це і є колір. Така стриманість створює візуальний парадокс: найколоритніші сторінки в інтернеті виглядають найбільш мінімалістичними, бо вся яскравість виходить із товару, а не з інтерфейсу.

Типографічна система — друга половина візуальної ідентичності Nike. Масивні uppercase-заголовки на Nike Futura ND — власному конденсованому варіанті Futura з неймовірно щільним міжрядковим інтервалом (0.90) — прорізають героїчні зображення, наче типографічна ударна хвиля. Нижче робоча сім'я Helvetica Now обробляє все — від навігації до описів продуктів — зі швейцарською точністю. Цей поділ між виразним дисплейним шрифтом і функціональним текстовим відображає дуальність бренду Nike: натхнення зустрічає виконання.

Key Characteristics:

Монохроматичний інтерфейс (чорний/білий/сірий), де єдиним джерелом кольору слугує фотографія продуктів
Масивна uppercase-дисплейна типографіка (96px, line-height 0.90), що пробиває героїчні зображення
Фотографії на весь екран без border radius — зображення заповнюють кожен доступний край
Кнопки у формі «пігулки» (30px radius) як основний інтерактивний елемент
Сітка відступів 8px з атлетичною дисципліною — кожен розмір прив'язаний до системи
Архітектура шопінгу, побудована на категоріях, з великими навігаційними картками-зображеннями
Модель глибини без тіней і з мінімумом рамок — диференціація поверхонь лише через відтінки сірого

2. Кольорова палітра та ролі

Primary

Nike Black (#111111): Основа — основний текст, фони кнопок, текст навігації, оверлеї на героїчних зображеннях. Навмисно не чистий чорний (#000000), що створює трохи м'якший досвід читання
Nike White (#FFFFFF): Основний фон сторінки, текст кнопок на темному фоні, поверхні карток, фон навігаційної панелі

Surface & Background

Snow (#FAFAFA): Найсвітліша поверхня, майже біла з тонкою диференціацією (--podium-cds-color-grey-50)
Light Gray (#F5F5F5): Вторинний фон, заповнення поля пошуку, плейсхолдер зображень, скелетон завантаження (--podium-cds-color-grey-100)
Hover Gray (#E5E5E5): Фон стану hover, заповнення відключеної кнопки (--podium-cds-color-grey-200)
Dark Surface (#28282A): Основний фон у темних/інвертованих секціях (--podium-cds-color-grey-800)
Deep Charcoal (#1F1F21): Інвертований основний фон, найтемніша поверхня, що не є чорною (--podium-cds-color-grey-900)
Dark Hover (#39393B): Стан hover на темних фонах (--podium-cds-color-grey-700)

Neutrals & Text

Primary Text (#111111): Основний текст, заголовки, посилання навігації (--podium-cds-color-text-primary)
Secondary Text (#707072): Описовий текст, метадані, мітки часу, підписи цін (--podium-cds-color-text-secondary)
Disabled Text (#9E9EA0): Неактивні елементи, недоступні опції (--podium-cds-color-text-disabled)
Disabled Inverse (#4B4B4D): Відключений текст на темних фонах (--podium-cds-color-text-disabled-inverse)
Border Primary (#707072): Стандартний колір рамки, що збігається з вторинним текстом
Border Secondary (#CACACB): Тонкі рамки, рамки полів введення, лінії розділювачів (--podium-cds-color-grey-300)
Border Disabled (#CACACB): Неактивний стан рамки
Border Active (#111111): Активна/сфокусована рамка, що збігається з основним текстом

Semantic & Accent

Nike Red (#D30005): Критичні помилки, значки розпродажу, термінові сповіщення (--podium-cds-color-red-600)
Bright Red (#EE0005): Red-500, трохи яскравіший червоний для акцентів
Nike Orange Badge (#D33918): Текст значків, рекламні виноски (--podium-cds-color-text-badge)
Orange Flash (#FF5000): Виразний помаранчевий акцент (--podium-cds-color-orange-400)
Success Green (#007D48): Підтвердження, наявність, позитивні стани (--podium-cds-color-green-600)
Success Inverse (#1EAA52): Успіх на темних фонах (--podium-cds-color-green-500)
Link Blue (#1151FF): Текстові посилання, інформаційні виділення (--podium-cds-color-blue-500)
Info Inverse (#1190FF): Посилання на темних фонах (--podium-cds-color-blue-400)
Warning Yellow (#FEDF35): Фони попереджень, банери для привернення уваги (--podium-cds-color-yellow-200)
Focus Ring (rgba(39, 93, 197, 1)): Кільце фокусу для навігації з клавіатури

Розширений кольоровий спектр (Podium CDS)

Кожна кольорова шкала йде від 50 до 900 для виразного використання в кампаніях і на сторінках продуктів:

Red: #FFE5E5 → #EE0005 → #530300
Orange: #FFE2D6 → #FF5000 → #3E1009
Yellow: #FEF087 → #FCA600 → #99470A
Green: #DFFFB9 → #1EAA52 → #003C2A
Teal: #D4FFFB → #008E98 → #043441
Blue: #D6EEFF → #1151FF → #020664
Purple: #E4E1FC → #6E0FF6 → #1C0060
Pink: #FFE1F3 → #ED1AA0 → #4C012D

Система градієнтів

Nike уникає градієнтів в інтерфейсі. Коли градієнти з'являються, вони фотографічні — застосовуються до фонів героїчних зображень продуктів (наприклад, червоний кросівок на градієнті від червоного до глибшого червоного). Сама дизайн-система використовує лише суцільні кольори.

3. Правила типографіки

Font Family

Display: Nike Futura ND (власний конденсований варіант Futura, ексклюзивний для Nike)

Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
Використовується виключно для великих uppercase-дисплейних заголовків
Характерно щільний line-height (0.90) та uppercase-трансформація

Heading: Helvetica Now Display Medium

Fallbacks: Helvetica, Arial
Використовується для заголовків секцій і назв продуктів розміром 24–32px

Body Medium: Helvetica Now Text Medium (weight 500)

Fallbacks: Helvetica, Arial
Використовується для посилань, кнопок, підписів, виділеного основного тексту

Body: Helvetica Now Text (weight 400)

Fallbacks: Helvetica, Arial
Використовується для стандартного основного тексту, описів, метаданих

Arabic: Neue Frutiger Arabic — локальна альтернатива

Ієрархія

Роль	Розмір	Weight	Line Height	Letter Spacing	Примітки
Display	96px	500	0.90	—	Nike Futura ND, uppercase, героїчні заголовки
Heading 1	32px	500	1.20	—	Helvetica Now Display Medium, заголовки секцій
Heading 2	24px	500	1.20	—	Helvetica Now Display Medium, підсекції
Heading 3	16px	500	1.50	—	Helvetica Now Text Medium, заголовки карток
Body	16px	400	1.75	—	Helvetica Now Text, описи продуктів
Body Medium	16px	500	1.75	—	Helvetica Now Text Medium, виділений текст
Link	16px	500	1.75	—	Helvetica Now Text Medium, навігаційні посилання
Link Small	14px	500	1.86	—	Helvetica Now Text Medium, посилання у футері/утилітарні
Button	16px	500	1.50	—	Helvetica Now Text Medium, текст CTA
Button Small	14px	500	1.50	—	Helvetica Now Text Medium, вторинні кнопки
Caption	14px	500	1.50	—	Helvetica Now Text Medium, підписи цін
Small	12px	500	1.50	—	Helvetica Now Text Medium, мітки часу
Tiny	12px	400	1.50	—	Helvetica Now Text, юридичний текст

Принципи

Типографіка Nike — це дослідження напруги. Дисплейний рівень — Nike Futura ND розміром 96px з вражаючим line-height 0.90 — спроектований так, щоб нагадувати стадіонне табло: масивний, конденсований, uppercase, неможливо ігнорувати. Він перетворює заголовки на бойові клики. Нижче Helvetica Now слугує клінічним контрапунктом: швейцарська точність читабельності зі щедрим line-height 1.75 для зручного перегляду продуктів. Weight 500 (Medium) домінує у всьому основному тексті, надаючи прозі Nike легкої наполегливості без важкості bold — кожне речення читається як впевнена рекомендація, а не крик.

4. Стилізація компонентів

Кнопки

Primary

Background: Nike Black (#111111)
Текст: White (#FFFFFF), 16px/500, Helvetica Now Text Medium
Border: none
Border radius: повністю округла пігулка (30px)
Padding: ~12px 24px
Hover: фон переходить до Grey-500 (#707072), колір тексту при hover
Active: ефект ripple з scale(0) та opacity 0.5
Focus: 2px box-shadow ring у rgba(39, 93, 197, 1)
Transition: background 200ms ease

Primary on Dark

Background: White (#FFFFFF)
Текст: Black (#111111)
Hover: фон переходить до Grey-300 (#CACACB)

Secondary (Outlined)

Background: transparent
Текст: Nike Black (#111111)
Border: 1.5px solid #CACACB (grey-300)
Border radius: 30px
Hover: рамка темнішає до #707072, фон до grey-200

Disabled

Background: Grey-200 (#E5E5E5)
Текст: Grey-400 (#9E9EA0)
Cursor: not-allowed

Icon Button

Background: Grey-100 (#F5F5F5)
Форма: radius 30px (або 50% для кругової)
Padding: 6px
Hover: фон Grey-500

Картки та контейнери

Background: White (#FFFFFF) — у більшості випадків без видимої межі картки
Border radius: 0px для карток із зображеннями продуктів (зображення від краю до краю), 20px для інтерактивних контейнерів
Shadow: none — Nike не використовує жодних тіней під картками
Hover: без ефекту підйому на картках продуктів; підкреслення на текстових посиланнях у картках
Картки продуктів: зображення зверху (без radius), текстові метадані знизу з проміжком 12px
Картки категорій: фотографія на весь екран із текстовим оверлеєм на темному градієнті
Transition: opacity 200ms ease для заміни зображення при hover

Поля введення та форми

Background: Grey-100 (#F5F5F5)
Border: 1px solid #CACACB при відображенні, або без рамки у пошуку
Border radius: 24px (поля пошуку), 8px (поля форм)
Font: Helvetica Now Text, 16px
Focus: рамка переходить до #111111 (border-active), 2px кільце фокусу у rgba(39, 93, 197, 1)
Error: рамка #D30005 (критичний)
Placeholder: Grey-500 (#707072)
Transition: border-color 200ms ease

Навігація

Background: White (#FFFFFF), sticky
Висота: ~60px на десктопі
Ліворуч: логотип Nike Swoosh (SVG 24x24px)
По центру: посилання категорій (New & Featured, Men, Women, Kids, Sale) у 16px/500 Helvetica Now Text Medium
Праворуч: пошук (поле введення з радіусом 24px), іконки вибраного та кошика
Hover: колір тексту переходить до Grey-500 (#707072)
Мобільна версія: hamburger-меню, оверлей на весь екран
Верхній банер: панель рекламного повідомлення з темним фоном (#111111) і білим текстом

Обробка зображень

Героїчні зображення: на весь екран, без border radius, від краю до краю
Сітка продуктів: квадратне співвідношення (1:1) або 4:3, без border radius
Картки категорій: 16:9 або 4:3, на весь екран із текстовим оверлеєм
Плейсхолдер зображення: суцільний фон Grey-100 (#F5F5F5)
Lazy loading: нативний loading="lazy", скелетон використовує фон #F5F5F5
Hover продукту: заміна на вторинне зображення (вид спереду → вид збоку)

Рекламні банери

Темний (#111111) фон на всю ширину з білим текстом
Мінімальний padding (8-12px по вертикалі)
Текст по центру, 12px/500 Helvetica Now Text Medium
Використовуються для просування доставки, переваг учасників, анонсів розпродажів

5. Принципи компонування

Система відступів

Базова одиниця: 4px (основна сітка кратна 8px)

Token	Значення	Використання
space-1	4px	Щільні проміжки для іконок, inline-відступи
space-2	8px	Базова одиниця, проміжки між іконкою та кнопкою
space-3	12px	Внутрішній padding картки, щільні відступи
space-4	16px	Стандартний padding, відступи навігації
space-5	20px	Проміжки між картками продуктів
space-6	24px	Внутрішній padding секцій, проміжки сітки
space-7	32px	Розділювачі секцій
space-8	48px	Великий padding секцій
space-9	64px	Padding героїчних секцій
space-10	80px	Великі відступи між секціями

Сітка та контейнер

Максимальна ширина контейнера: 1920px
Стандартна ширина контейнера: ~1440px з горизонтальним padding
Сітка продуктів: 3 колонки на десктопі, 2 колонки на планшеті, 1 колонка на мобільному
Сітка категорій: 3 колонки із зображеннями на весь екран
Проміжок сітки: 4-12px між картками продуктів (навмисно щільно)
Горизонтальний padding: 48px на десктопі, 24px на планшеті, 16px на мобільному

Філософія whitespace

Стратегія використання whitespace у Nike навмисно агресивна — не в розкішному, «дихаючому» стилі fashion-бренду, а у стислому, високощільному вигляді, що заповнює кожен піксель або контентом, або навмисною відсутністю. Сітки продуктів використовують мінімальні проміжки (4-12px), щоб створити відчуття достатку та вибору. Розривники між секціями щедрі (48-80px), щоб розділяти різні контексти шопінгу. Загальний ефект — магазин, що відчувається наповненим товаром, але залишається зручним для навігації, наче добре організований спортивний супермаркет.

Шкала border radius

Значення	Контекст
0px	Зображення продуктів, героїчна фотографія (гострі краї)
8px	Поля форм (не пошукові)
18px	Дрібні інтерактивні елементи
20px	Контейнери, картки з UI-контентом
24px	Поля пошуку, середні пігулки
30px	Кнопки, теги, фільтри (повна пігулка)
50%	Кругові іконки-кнопки, плейсхолдери аватарів

6. Глибина та рівні

Рівень	Обробка	Використання
Flat	Без тіні, без рамки	Стан за замовчуванням для всього
Divider	`0px -1px 0px 0px #E5E5E5 inset`	Тонка вставна лінія між секціями
Focus	`0 0 0 2px rgba(39, 93, 197, 1)`	Кільце фокусу клавіатури
Overlay	Темний скрім поверх фотографії	Читабельність тексту на зображенні

Філософія глибини Nike — радикально плоска. Тіней під картками немає, ефектів підйому при hover немає, плаваючих елементів немає. Глибина передається виключно через колір: темні секції відступають, світлі виходять вперед, зміни відтінків сірого сигналізують про зміни стану. Ця плоскість підкріплює атлетичний, безкомпромісний характер бренду: жодних візуальних прикрас, лише пряме спілкування. Єдина «тінь» у всій системі — це 1px вставний розділювач та обов'язкове з точки зору доступності кільце фокусу.

Декоративна глибина

Оверлеї на героїчній фотографії: Темні градієнтні скріми поверх фотографій на весь екран для читабельності тексту
Градієнти фонів продуктів: Кольорові фони за героїчними знімками продуктів (наприклад, червоний кросівок на червоному градієнті)
Банерні смуги: Суцільні темні (#111111) рекламні смуги у верхній частині сторінки

7. Що робити і чого уникати

Що робити

Використовувати Nike Black (#111111) для всього основного тексту — ніколи не чистий #000000
Зберігати форму кнопок у вигляді пігулки (30px radius) із обмеженням до варіантів primary/secondary
Використовувати фотографію від краю до краю для героїчних секцій — без border radius на зображеннях
Дозволяти фотографії продуктів бути єдиним джерелом кольорової яскравості; зберігати UI монохроматичним
Використовувати uppercase Nike Futura ND ЛИШЕ для дисплейних заголовків (від 96px)
Зберігати мінімальні проміжки в сітці продуктів (4-12px) для щільного відчуття достатку
Використовувати Grey-100 (#F5F5F5) для всіх фонів полів введення та плейсхолдерів
Залишати колір виключно для семантичних значень (червоний=помилка, зелений=успіх, синій=посилання)
Використовувати weight 500 (Medium) для всіх інтерактивних текстових елементів

Чого уникати

Не додавати тіні до карток — модель глибини Nike повністю плоска
Не використовувати border radius на зображеннях продуктів — заокруглені кути лише для UI-елементів
Не вводити фірмові кольори за межами шкали сірого для UI-елементів
Не використовувати Nike Futura ND нижче 24px — це виключно дисплейний шрифт
Не додавати ефекти підйому при hover — картки Nike не анімуються при наведенні
Не використовувати regular weight (400) для кнопок або посилань — завжди weight 500
Не розміщувати кольорові фони за UI-елементами — колір зарезервований для контексту продуктів
Не використовувати більше двох рівнів текстової ієрархії на одній картці (заголовок + основний текст)
Не додавати декоративні розділювачі — 1px вставна лінія є єдиним шаблоном розділювача
Не пом'якшувати контраст — дизайн Nike навмисно доводить чорне на білому до максимуму

8. Адаптивна поведінка

Breakpoints

Назва	Ширина	Ключові зміни
Mobile	<640px	Одна колонка, hamburger-навігація, дисплейний текст зменшується, щільний padding 16px
Small Tablet	640-768px	Починається сітка з 2 колонок, навігація залишається згорнутою
Tablet	768-960px	Сітки з 2 колонок, картки категорій масштабуються, горизонтальний padding 24px
Small Desktop	960-1024px	Навігація розгортається в повну горизонтальну, сітка продуктів на 3 колонки
Desktop	1024-1440px	Повне компонування, розгорнута навігація, сітки на 3 колонки, padding 48px
Large Desktop	>1440px	Контейнер з max-width по центру, збільшені відступи, героїчні зображення на весь екран

Touch targets

Мінімальна область дотику: 44x44px (WCAG AAA)
Іконки мобільної навігації: область дотику 48x48px
Картки продуктів: вся поверхня доступна для дотику
Пігулки фільтрів: мінімальна висота 36px із padding 12px

Стратегія колапсу

Навігація: Повні посилання категорій → hamburger-меню нижче 960px; іконки пошуку, вибраного та кошика залишаються видимими
Сітки продуктів: 3 кол. → 2 кол. при 960px → 1 кол. при 640px
Героїчні секції: Дисплейний текст масштабується від 96px → 64px → 48px; героїчні зображення залишаються на весь екран на всіх розмірах
Картки категорій: 3 кол. → 2 кол. → 1 кол. зі збереженням зображень на весь екран
Padding секцій: 80px → 48px → 32px → 24px у міру звуження viewport
Рекламний банер: текст переноситься або усікається, темний фон зберігається

Поведінка зображень

Responsive images через Nike CDN (c.static-nike.com) з параметрами ширини
Зображення продуктів: srcset з кількома роздільними здатностями (w_320, w_640, w_960, w_1920)
Героїчні зображення: на весь екран на всіх breakpoints, співвідношення сторін змінюється (16:9 десктоп → 4:3 мобільний)
Lazy loading: нативний loading="lazy", плейсхолдер grey-100 під час завантаження
Art direction: кадрування героїчних зображень змінюється між десктопною та мобільною компоновками

9. Посібник з промптів для агента

Швидкий довідник кольорів

Основний CTA: Nike Black (#111111)
Фон: White (#FFFFFF)
Вторинна поверхня: Light Gray (#F5F5F5)
Текст заголовків: Nike Black (#111111)
Основний текст / hover: Secondary Text (#707072)
Рамка: Border Secondary (#CACACB)
Помилка: Nike Red (#D30005)
Посилання: Link Blue (#1151FF)

Приклади промптів для компонентів

"Створи героїчну секцію продукту з фотографією на весь екран від краю до краю, без border radius, темним градієнтним оверлеєм для тексту, масивним uppercase заголовком 96px/500 у стилі Nike Futura з line-height 0.90 та кнопкою-пігулкою Nike Black (#111111) (30px radius)"
"Спроектуй сітку карток продуктів на 3 колонки з квадратними зображеннями (без border radius), проміжком 4px між картками, назвою продукту в 16px/500 Nike Black (#111111), ціною в 14px/500 та вторинним текстом у Grey-500 (#707072)"
"Побудуй sticky білу навігаційну панель з логотипом ліворуч, посиланнями категорій по центру у 16px/500 (#111111) з кольором hover #707072 та пошуком праворуч (radius 24px, фон #F5F5F5), іконками вибраного та кошика"
"Створи рекламну банерну смугу з фоном #111111, білим центрованим текстом 12px/500 та вертикальним padding 8px — на всю ширину, без border radius"
"Спроектуй вторинну outlined-кнопку з прозорим фоном, рамкою 1.5px #CACACB, pill-радіусом 30px, текстом 16px/500 #111111, рамка темнішає до #707072 при hover"

Посібник з ітерацій

Під час доопрацювання існуючих екранів, згенерованих із цією дизайн-системою:

Зосереджуйся на ОДНОМУ компоненті за раз
Посилайся на конкретні назви кольорів і hex-коди з цього документа
Пам'ятай: фотографія продукту — це і є колір; UI залишається монохроматичним
Використовуй шкалу сірого для змін стану: #F5F5F5 → #E5E5E5 → #CACACB → #707072
Якщо щось в інтерфейсі видається занадто барвистим — швидше за все, так і є: Nike зберігає UI у відтінках сірого
Дисплейний шрифт (Nike Futura) ЗАВЖДИ має бути uppercase і ніколи не менше 24px
Основний шрифт (Helvetica Now) для інтерактивних елементів майже завжди має бути weight 500

32 KiB Raw Blame History Unescape Escape