uzhhorod.online
Design system / v1.0

Uzhhorod Digital UI

Темна, контрастна система для міського цифрового хабу. Дружня, швидка та доступна.

01 · Палітра

Sakura Pink

500 · #FF3366 — єдиний акцент дії
50
100
200
300
400
500
600
700
800
900
950

Uzh Blue

500 · #4F8DFF — «річка Уж»
50
100
200
300
400
500
600
700
800
900
950

Carpathian Green

500 · #10B981 — онлайн / перевірено
50
100
200
300
400
500
600
700
800
900
950

Slate

900 · #0F172A полотно, 800 · #1E293B картки
50
100
200
300
400
500
600
700
800
900
950

Брендбук міста

заливки й декор; текст на них — білий
Crimson · #C41348
Burgundy · #921734
Pink · #F170B5
Blue (довідково) · #00CCFF

02 · Типографіка

Display — Unbounded 700 · clamp(30→56) / 1.08

Цифровий пульс Ужгорода

H1 — Unbounded 600 · 40 / 48

Про проєкт та методологія

H2 — Manrope 700 · 28 / 36

Каталог ресурсів міста

H3 — Manrope 600 · 17 / 24

Ужгород Новини Live

Body — Manrope 400 · 15 / 26

Оперативні новини міста, оголошення міськради та аварійні відключення — усе в одному потоці.

Caption — Manrope 500 · 13 / 18

Центр · Telegram · оновлено 2 години тому

Mono tag — JetBrains Mono 600 · 11 / 16

#доставка #київстар 1.2k перейшли

Діакритика hu / sk / ro: ő ű á é ä ľ š č ž ť ă â î ș ț

03 · Фундамент

Радіуси

sm · 8px · чипи, інпути

md · 12px · кнопки

lg · 16px · меню, модалки

card · 20px · картки

full · 999px · піли

Тіні та світіння

shadow-card
shadow-card-hover
shadow-modal
shadow-sakura
shadow-sakura-strong
shadow-success

Рух

Усе вимикається при prefers-reduced-motion.

Ресурс доступний pulse-dot · 2000mscard-lift · 160msstagger · 420ms / 40ms

04 · Компоненти

Кнопки

Бейджі й статуси

Вибір редакціїновена перевірціРесурс доступний

Платформи

Іконка (адмінка)

З підписом, активний — праворуч

Хештеги

#новини#кава#доставка#афіша
#кава#доставка

Оберіть із підказок або впишіть свій — модератор перевірить.Додано 2 з 5

Поля вводу

Вкажіть коректне посилання

Оберіть із підказок або впишіть свій — модератор перевірить.Додано 0 з 5

Картка ресурсу

Картка в усіх варіантах: з усіма бейджами, мінімальна, на перевірці, скелетон.

Усі бейджі

Мінімальна

На перевірці

Скелетон

05 · Доступність

  • Неоновий CTA завжди з темним текстом: білий на #FF3366 не проходить AA.
  • Статуси «онлайн» і «перевірено» мають форму (крапка, галочка), а не лише колір.
  • Контур інпутів ≥ 3:1 до полотна.
  • Єдиний видимий фокус — кільце sakura.
  • Цільова область натискання ≥ 44×44 на мобільному.