v3 Ultra‑Pro Docs

Design System

Event Mobility Command visuaalne, interaktsiooniline ja süsteemne disainialus. See leht loeb runtime’is sinu päris config.js väärtuseid ning dokumenteerib need elava dokina.

Design System Operations Guide Role Guide Data Model Docs Portal

1. Ülevaade

Design system katab kogu ökosüsteemi: marketing site, dashboard, admin, staff, field apps, public event page, taxi PDF ja docs-lehed.

Brand

Event Mobility Partners + Mobility Command

Admin

Map-first operational planning UI

Field

Stressitaluvad QR-põhised mobiilivood

Public

Lihtne, selge, avalik liikuvusinfo

2. Bränd

Kahekihiline identiteet: äri-/partnerbränd ja operatiivne command center.

Event Mobility Partners

B2B / usaldus / müük / readiness check / kickoff / referentsid.

Mobility Command

Live ops / kontroll / kõrge kontrast / minimaalne visuaalne müra.

3. Värvid

Navy#0B1F33

Navy 2#14314d

Orange#FF6B1A

White#F7F9FB

Slate#5C6670

Border#E2E8F0

Red#D72638

Green#1A9D5B

Amber#E8A317

Blue#227C9D

Purple#8B5CF6

4. Tüpograafia

Kõik põhisüsteemi vaated kasutavad Inter fonti.

Hero / page title

H2 / H1 admin

Admin/staff page level

Section title

Card heading

Body / UI text

Primary readable system copy

5. Spacing, radius, varjud

Spacing

4810121416202432

Radius

681014999

Varjud

shadow-smshadow-md

6. Tokenid

:root{ --navy:#0B1F33; --navy2:#14314d; --orange:#FF6B1A; --white:#F7F9FB; --slate:#5C6670; --border:#E2E8F0; --red:#D72638; --green:#1A9D5B; --amber:#E8A317; --blue:#227C9D; --purple:#8B5CF6; --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:14px; --pill:999px; }

7. Nupud

Variant	Kasutus
Orange	Peamine CTA: loo, avalda, impordi, saada
Ghost	Teisene tegevus: tühista, juhend, ava, csv
Navy	Sisemine tugev süsteemitegevus
Green	Heli lubamine, success, publish-adjacent
Red	Kustuta, sulge, kriitiline
Purple	Traffic access flow

8. Vormid

Login

Inline admin

Field input

9. Kaardid

Stat card

KPI, loendur, summary

Functional card

Import, tabel, workflow block

Content block

Editable notes / image block

Public info card

POI, transport, contact, warning

10. Tabelid

Kontekst	Roll	Muster
Admin	Redigeerimine	Inline edit + bulk select + autosave
Staff	Jälgimine	Operatiivtabel + kiire tegevus
Public	Lugemine	Lihtne informatiivne tabel
Payroll	Raport	Eksporditav koondtabel

11. Staatused

OK / AVALDATUD OOTEL / MUSTAND TÖÖS / INFO KRIITILINE

📊 Active tab Inactive tab has new

12. Navigatsioon

Header

Mobility Command Juhendid Staap

Event switch / tabs

IRONMAN Tallinn Expo + Uus

13. Kaardi UI

Map-first admin + status-colored public map + field situational maps.

Toolbar

Visibility chips

Kaarditüübid, ikoonid, värvid ja geomeetria tulevad runtime’is config.js failist.

14. MAP_TYPES (runtime config)

See tabel loetakse otse window.APP_CONFIG.MAP_TYPES objektist.

Key	Icon	Label	Geom	Color	KML

15. PAGE_LAYERS (runtime config)

Avaliku event lehe lehepõhine kaardikihtide kontroll.

Page	Layers

16. FLAGS (runtime config)

Arendus- või turvakäitumise runtime lülitid.

Flag	Value