Design System · V0

UI Showcase — AVEALOC

Validation visuelle des tokens et primitives du Design System. Tous les éléments ci-dessous utilisent les composants réels de l'application. Aucune logique métier.

Palette

Light (ivoire / obsidian / terracotta) + tokens sémantiques d'état.

background

#F9F9F7

card

#FFFFFF

foreground

#1A1A1A

primary (clay)

#B85C38

muted

#E8E7E2

border

#D1D1CB

success

#3A8A5E

warning

#C9912A

destructive

#E04545

info

#65708A

Dark mode

background

card

foreground

primary (clay)

muted

border

success

warning

destructive

info

Typographie

Space Grotesk (titres) · Inter (corps) · JetBrains Mono (données).

Display

Louez, voyagez

Réservez un hébergement

Véhicules disponibles

Détail de la réservation

Body

La plateforme idéale pour trouver et louer des hébergements et véhicules au Gabon.

Small

Tous les prix sont en FCFA, taxes incluses.

Label

Prix par nuit

Price

45 000 FCFA/nuit

Buttons

Coins coupés, plats, accent terracotta sur primary uniquement.

Inputs

h-11, focus terracotta, état error via bordure destructive.

Default

Avec valeur

Erreur

Disabled

Badges

Variantes sémantiques pour statuts métier.

Confirmé

En attente

Refusé

Terminé

Brouillon

Outline

Price

Pattern mono standardisé pour les montants FCFA.

45 000 FCFA/nuit

Logement

35 000 FCFA/jour

Véhicule

Cartes

Composants PropertyCard & VehicleCard réels avec données mock.

4 ch · 3 sdb · 220 m²

Featured

Libreville

Villa contemporaine Libreville

Villa

45 000FCFA/nuit

4 3 220 m²

Port-Gentil

Toyota Land Cruiser

Toyota · SUV

35 000FCFA/jour

7 places Automatique Diesel

Navigation

NavigationBeam réel en haut de cette page. Desktop: liens horizontaux (≥1024px). Mobile: bouton menu ouvre l'overlay plein écran.

La barre de navigation en haut de cette page est le composant NavigationBeam réel. Sur desktop (≥1024px), les liens s'affichent en ligne. En dessous, un bouton menu déclenche l'overlay animé plein écran.

Astuce: redimensionnez la fenêtre sous 1024px puis cliquez sur l'icône menu.