AroksDS 2027: перевірка глобальних налаштувань
Тестова сторінка для перегляду типографіки, кольорів, кнопок, полів та адаптивності. Це не сторінка сайту для відвідувачів. Не публікуйте її і не надсилайте даних у демонстраційні поля.
Типографіка · Кольори · Кнопки · Поля · Картки
01. Типографіка теми
Заголовок цієї сторінки вище має тег H1. Наступні три рядки мають H2, H3 та H4 без локального оформлення. Їхній вигляд повинен надходити зі стилю теми Elementor.
H2: Доступна цифрова присутність
H3: Послуга, результат і наступний крок
H4: Деталь картки або запитання
Основний текст: Робота із сайтом починається з чіткого маршруту користувача. Перевірте читабельність, довжину рядка, висоту рядка і контраст. Посилання має відрізнятися від звичайного тексту.
Напівжирний текст не повинен замінювати заголовок. Довге слово для перевірки мобільного перенесення: Mehrsprachigkeitsanforderungen.
Системні глобальні шрифти
Primary: Roboto 44 / 700 / 1,2
Secondary: Roboto 32 / 700 / 1,25
Text: Roboto 16 / 400 / 1,55
Accent: Roboto 16 / 700 / 1,2
02. Системні кольори
Чотири кольорові смуги нижче прив’язані до системних глобальних кольорів. Якщо змінити колір у Site Settings, відповідна смуга має змінитися. Біля кожної смуги наведено очікуваний HEX.
Primary · #333333
Secondary · #0B0B0B
Text · #333333
Accent · #333333
Власні базові кольори для перевірки за списком: Light Background #F7F8FA; Text Secondary #666666; Text Muted #8A8A8A; White #FFFFFF; Black #000000; Surface Soft #F2F4F6; Line Soft #E6E8EB; Line Neutral #C0C0C0. Ці значення тут надруковані як довідка, не прив’язані до власних глобальних ідентифікаторів.
03. Стани інтерфейсу
Ці смуги є статичними зразками HEX. Вони не доводять прив’язку до нових Custom Colors. Після отримання ідентифікаторів із Default Kit їх можна прив’язати через значок глобуса.
State Success · #067647
State Success BG · #ECFDF3
State Error · #B42318
State Error BG · #FEF3F2
State Warning · #B54708
State Warning BG · #FFFAEB
State Info · #175CD3
State Info BG · #EFF8FF
04. Кольори напрямів
Кожен напрям має два затверджені кінцеві кольори. Це статичні зразки, а не глобально пов’язані градієнти. Текст на градієнтах тут навмисно не розміщено: контраст необхідно перевіряти на кожній ділянці.
Multilingual: Start #1D315F / End #3B5998
SMM / Ads: Start #1A1A1A / End #E54922
Support / Hosting / Automation: Start #3E689C / End #73B3D1
Graphic Design: Start #2233B8 / End #00D8E8
05. Кнопки та посилання
Основна кнопка не має локального оформлення. Перевірте фон, текст, заокруглення, висоту, наведення мишею та фокус клавіатури. Другорядна має тільки клас: її окреме правило ще треба додати глобально.
Текстове посилання до демонстраційних полів. Натискайте Tab, щоб перевірити видимість фокуса без миші.
06. Поля та стани форми
Це тільки безпечний огляд елементів. Тут немає тега form, надсилання, скриптів чи CSS. Поля перевіряють стилі Label та Field, а не доставку заявки або поведінку віджета Elementor Pro Form.
Помилка: перевірте значення поля.
07. Контейнер, картки та вузький екран
Перевірте ширину вмісту 1240 px, бокові поля 32 / 24 / 20 px та відсутність горизонтальної прокрутки на 320 px і при збільшенні 200 %. Наступні картки мають локальні параметри, тому вони не є доказом глобального стилю картки.
Стандартна картка
Біла поверхня, радіус 22 px, внутрішній відступ 28 px і декоративна межа. Важливі активні поля форми використовують сильнішу рамку.
Контроль переповнення: український, польський, англійський та німецький тексти мають залишатися читабельними. Beispielwort: Unternehmensdigitalisierungsmaßnahmen. Перевіряйте сторінку також з клавіатури, без миші.