uzhhorod.online
Design system / v1.0

Uzhhorod Digital UI

A dark, high-contrast system for the city's digital hub. Friendly, fast and accessible.

01 · Palette

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 · Typography

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 · Foundation

Radii

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

md · 12px · кнопки

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

card · 20px · картки

full · 999px · піли

Shadows and glows

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

Motion

Everything is disabled under prefers-reduced-motion.

Resource is available pulse-dot · 2000mscard-lift · 160msstagger · 420ms / 40ms

04 · Components

Buttons

Badges and statuses

Editor's picknewunder reviewResource is available

Platforms

Icon only (admin)

Labeled, active on the right

Hashtags

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

Pick from the suggestions or type your own — a moderator will review it.2 of 5 added

Inputs

Enter a valid link

Pick from the suggestions or type your own — a moderator will review it.0 of 5 added

Resource card

The card in every variant: all badges, minimal, under review, skeleton.

All badges

Minimal

Under review

Skeleton

05 · Accessibility

  • The neon CTA always has dark text: white on #FF3366 fails AA.
  • "Online" and "verified" statuses have a shape (dot, check), not just a color.
  • Input outlines are ≥ 3:1 against the canvas.
  • One visible focus style — the sakura ring.
  • Touch targets are ≥ 44×44 on mobile.