🏙️ Smart App City

UI/UX Design System v2 — Blue Ocean Palette

Martinique Digital Twin · React Native · DPI/OTN
🗺️
Carte Live
🏛️
Services Ville
💳
Wallet DPI
🚌
Transport
⚡
Énergie
🏥
Santé
🤖
AI Chat
📸
Signalements
v2.0 Blue · 16 écrans · FR/EN/ES/DE · OpenSource
🎨 Charte Graphique v2 — Blue Ocean
Palette principale: bleu océan (#1565C0) indigo (#3949AB) cyan (#00ACC1) — inspirée de la mer et du ciel de Martinique.
Primary (Blue Ocean)
50
100
200
300
400
500
600
700
800
900
Ocean / Cyan
50
100
200
300
400
500
600
700
Indigo Accent
50
100
200
300
400
500
Alerts
Danger
Warning
Success
Info
📱 Écrans — Navigation principale
01 Onboarding v2
01 Onboarding
Splash / Langue
02 Home Dashboard v2
02 Home Dashboard
IoT + Services
09 Services Hub v2
09 Services Hub
8 services villes
06 Profil Blue
06 Profil
Compte · i18n · DID
💳 Écrans — Wallet & Transport
10 Wallet v2
10 Wallet DPI
DPI / OTN / DID
11 Bus Tracker v2
11 Bus Tracker
Temps réel / Lignes
12 Énergie v2
12 Énergie
Smart Grid / IoT
13 Santé v2
13 Santé
Pharmacies / RDV
🗺️ Écrans — Carte, AI, Marché, Signalements
03 Carte Blue
03 Carte Interactive
IoT / Filtres
05 AI Chat Blue
05 AI Chat
RAG Assistant
04 Marketplace Blue
04 Marketplace
DPI
08 Signalements Blue
08 Signalements
ODK / Citoyen
🌤️ Écrans — Météo, Notifications, Transport
09 Météo Blue
09 Météo
Prévisions · Alertes
07 Notifications Blue
07 Notifications
Alertes · IoT · Marché
10 Transport Blue
10 Transport
Réseau · Horaires
11 Énergie Blue
11 Énergie
Conso · Solaire
🏥 Écrans — Santé & Événements
12 Santé Blue
12 Santé
Pharmacies · RDV
13 Événements Blue
13 Événements
Agenda · Culture
🧩 Bibliothèque de composants
Bottom Navigation
🏠
Accueil
🗺️
Carte
🤖
Chat
🏪
Marché
👤
Profil
Buttons
Primary
Secondary
Ghost
Chips / Badges
Marché DPI OTN IoT RAG
Metric Card
60
Capteurs actifs
Toggle Switch
Avatar
👤
🤖
🏙️
🔄 Parcours utilisateur principal
📱
Onboarding
Langue / Login
→
🏠
Dashboard
IoT / Services
→
🏛️
Services
Choix service
→
🤖
AI Chat
RAG / Data
→
💳
Wallet
Paiement DPI
📋 Spécifications techniques
Platform: React Native (iOS + Android)
Backend: NestJS + FastAPI + RAG (MindsDB/LocalAI)
Protocol: DPI/OTN (paiements)
IoT: MQTT (EMQX/Mosquitto) → Telegraf → InfluxDB → Grafana
Identity: DID / Verifiable Credentials
Data: NGSI-LD (Orion-LD/Stellio) + QuantumLeap + CrateDB
Mobile Data: ODK Central
i18n: FR / EN / ES / DE
Design: Inter + SF Pro · 390×844pt · 16 screens v2