YaniPay Design System
Guide complet du design system YaniPay. Couleurs, typographie, composants et patterns pour une interface fintech cohérente et moderne.
Pourquoi un Design System
Dans l'univers fintech, la confiance se construit visuellement. YaniPay a développé un design system complet pour garantir une expérience utilisateur cohérente et premium sur toutes les plateformes. Ce système unifié permet aux équipes de développement de créer rapidement des interfaces professionnelles tout en respectant les standards bancaires les plus exigeants.
Le design system YaniPay n'est pas qu'une collection de composants : c'est une philosophie visuellequi reflète les valeurs de l'entreprise - innovation, sécurité et accessibilité. Chaque élément a été pensé pour créer une connexion émotionnelle avec les utilisateurs tout en leur inspirant confiance pour gérer leurs finances.
Fintech Design Best Practice
Cas d'Utilisation
Crée une nouvelle page de dashboard en utilisant les tokens de design pour assurer la cohérence visuelle avec le reste de la plateforme.
✓ Interface cohérente en 2h au lieu de 8h grâce aux composants pré-définis
Implémente un nouveau modal de confirmation de transaction en suivant les patterns glassmorphism documentés.
✓ Modal professionnel qui respecte les guidelines sans besoin de validation design
Présente la charte graphique YaniPay aux partenaires financiers pour valider l'identité visuelle premium.
✓ Validation immédiate grâce à la documentation complète du design system
Adapte les design tokens pour l'application React Native tout en maintenant la parité visuelle avec le web.
✓ Expérience utilisateur identique sur toutes les plateformes
Overview
Le design system YaniPay est conçu pour créer une expérience utilisateur premium, moderne et cohérente à travers toute la plateforme fintech. Il combine les principes du glassmorphism, un thème dark mode dominant, et des accents emerald/cyan pour une identité visuelle distinctive.
Couleurs
Palette, gradients et opacités
Composants
Buttons, inputs, cards, badges
Modals
Patterns et structure des modals
Typographie
Fonts, sizes et hiérarchie
Design Philosophy
Le design YaniPay repose sur trois piliers fondamentaux qui guident toutes les décisions visuelles de la plateforme :
1. Glassmorphism
Effet de verre dépoli avec transparences et flous pour créer de la profondeur et une hiérarchie visuelle claire. Les surfaces utilisent backdrop-blur-xl combiné avec des fonds semi-transparents.
// Surface glassmorphism standard
<div className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl">
{/* Content */}
</div>
// Avec effet glow (emerald)
<div className="bg-slate-900/60 backdrop-blur-xl border border-emerald-500/20
ring-1 ring-emerald-500/30 rounded-2xl shadow-lg shadow-emerald-500/10">
{/* Content */}
</div>2. Dark Mode First
Le thème sombre est le mode par défaut, optimisé pour réduire la fatigue oculaire et créer une ambiance premium. Les fonds sont basés sur la palette slate de Tailwind.
3. Accents Emerald/Cyan
La combinaison emerald-cyan crée une identité visuelle distinctive et moderne. Ces couleurs sont utilisées pour les CTAs, les états actifs, et les éléments interactifs.
/* Gradient principal */
background: linear-gradient(to right, #10b981, #06b6d4);
/* Tailwind: from-emerald-500 to-cyan-500 */
/* Glow effect */
border-color: rgba(16, 185, 129, 0.2);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);Brand Colors NEW
La palette officielle YaniPay comprend 41 couleurs organisees en 7 groupes semantiques. Ces couleurs definissent l'identite visuelle de la marque sur toutes les plateformes.
Logo Y Mark
Orange
#FDB62E
Blue
#748BC5
Rose
#F16878
Green
#50C878
7 Groupes de Couleurs
/* Primary — Emerald/Cyan gradient */
--primary-500: #10b981; /* emerald-500 */
--primary-600: #059669; /* emerald-600 */
--primary-accent: #06b6d4; /* cyan-500 */
/* Secondary — Slate/Blue tones */
--secondary-500: #6366f1; /* indigo-500 */
--secondary-600: #4f46e5; /* indigo-600 */
/* Accent 1 — Gold / Premium */
--accent1-400: #FDB62E; /* YaniPay Gold */
--accent1-500: #f59e0b; /* amber-500 */
/* Accent 2 — Rose / Alerts */
--accent2-400: #F16878; /* YaniPay Rose */
--accent2-500: #f43f5e; /* rose-500 */
/* Accent 3 — Purple / DeFi */
--accent3-400: #a78bfa; /* violet-400 */
--accent3-500: #8b5cf6; /* violet-500 */
/* Accent 4 — Teal / Success */
--accent4-400: #2dd4bf; /* teal-400 */
--accent4-500: #14b8a6; /* teal-500 */
/* Premium — Blue / Institutional */
--premium-400: #748BC5; /* YaniPay Blue */
--premium-500: #3b82f6; /* blue-500 */Background Hierarchy
Dark Mode
Light Mode
Typographie NEW
YaniPay utilise 5 familles typographiques pour creer une hierarchie visuelle claire et professionnelle :
Texte principal, paragraphes, UI elements. Excellente lisibilite multi-scripts.
Weights: 400, 500, 600, 700
Titres et sous-titres. Caractere geometrique moderne avec coins arrondis.
Weights: 500, 600, 700, 800
Labels, boutons, inputs, tableaux. Optimise pour les petites tailles.
Weights: 400, 500, 600
Pages publiques, landing page, campagnes. Elegance et modernite.
Weights: 400, 600, 700
Logo, elements decoratifs, accents visuels premium. Usage ponctuel.
Weights: 400
/* Font Families */
--font-body: 'Noto Sans', system-ui, sans-serif;
--font-heading: 'Rubik', 'Noto Sans', sans-serif;
--font-ui: 'Inter', 'Noto Sans', sans-serif;
--font-marketing: 'Avenir Next', 'Inter', sans-serif;
--font-decorative: 'Herculanum', serif;
/* Font Sizes (Section Titles) */
--text-section: clamp(1.875rem, 4vw, 3rem);
/* Tailwind: text-3xl md:text-4xl lg:text-5xl font-bold */
/* Font Sizes (Subtitles) */
--text-subtitle: clamp(1.125rem, 2vw, 1.25rem);
/* Tailwind: text-lg md:text-xl text-white/70 */
/* Font Sizes (Card Titles) */
--text-card-title: 1.125rem;
/* Tailwind: text-lg font-semibold */
/* Font Sizes (Descriptions) */
--text-description: 0.875rem;
/* Tailwind: text-sm text-white/60 */Design Tokens
Les design tokens sont les variables fondamentales qui définissent le système visuel. Voici les principaux tokens utilisés dans YaniPay :
Surfaces
/* Background Layers */
--bg-base: #0f172a; /* slate-950 */
--bg-elevated: #1e293b; /* slate-800 */
--bg-surface: rgba(15, 23, 42, 0.6); /* slate-900/60 */
--bg-overlay: rgba(15, 23, 42, 0.9); /* slate-900/90 */
/* Glass Effects */
--glass-blur: blur(24px); /* backdrop-blur-xl */
--glass-bg: rgba(30, 41, 59, 0.5); /* slate-800/50 */
/* Borders */
--border-subtle: rgba(255, 255, 255, 0.1); /* white/10 */
--border-default: rgba(255, 255, 255, 0.2); /* white/20 */
--border-accent: rgba(16, 185, 129, 0.2); /* emerald-500/20 */Texte
/* Text Colors */
--text-primary: #ffffff; /* white */
--text-secondary: rgba(255, 255, 255, 0.7); /* white/70 */
--text-muted: rgba(255, 255, 255, 0.6); /* white/60 */
--text-placeholder: rgba(255, 255, 255, 0.4); /* white/40 */
/* Accent Text */
--text-accent: #34d399; /* emerald-400 */
--text-accent-cyan: #22d3ee; /* cyan-400 */Espacements
/* Base spacing (Tailwind scale) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
/* Component spacing */
--padding-card: var(--space-6); /* p-6 */
--padding-button: var(--space-3) var(--space-6); /* py-3 px-6 */
--gap-default: var(--space-4); /* gap-4 */Component Patterns
Les composants suivent des patterns cohérents pour assurer une expérience uniforme :
Boutons
Inputs
Badges
Cards / GlassSurface
import { GlassSurface } from '@/components/dashboard/shared/GlassSurface';
// Standard card
<GlassSurface className="p-6">
<h3 className="text-white font-semibold">Titre</h3>
<p className="text-white/60">Description...</p>
</GlassSurface>
// With glow effect
<GlassSurface glow className="p-6">
{/* Ajoute border-emerald-500/20 ring-1 ring-emerald-500/30 */}
</GlassSurface>
// With gradient background
<GlassSurface gradient className="p-6">
{/* Ajoute bg-gradient-to-br from-emerald-950/40 via-slate-900/60 to-cyan-950/30 */}
</GlassSurface>PayWithYaniPayButton NEW
Le composant PayWithYaniPayButton est le bouton de paiement officiel YaniPay. Il utilise le ShimmerButton de Magic UI avec un effet shimmer dore pour creer un CTA premium et reconnaissable.
Integration Partenaire
Import
import { PayWithYaniPayButton } from '@/components/payments';3 Variantes
3 Tailles
Usage
import { PayWithYaniPayButton } from '@/components/payments';
// Default variant (gold shimmer) — medium size
<PayWithYaniPayButton
amount={29.99}
currency="EUR"
onPayment={handlePayment}
/>
// Outline variant — small size
<PayWithYaniPayButton
variant="outline"
size="sm"
amount={9.99}
currency="YANI"
onPayment={handlePayment}
/>
// White variant — large size (for dark backgrounds)
<PayWithYaniPayButton
variant="white"
size="lg"
amount={199.99}
currency="EUR"
onPayment={handlePayment}
label="Confirmer le paiement"
/>
// ShimmerButton gold effect (internal implementation)
// Uses Magic UI ShimmerButton with:
// shimmerColor="#FDB62E" (YaniPay Gold)
// shimmerSize="0.08em"
// background="linear-gradient(to right, #f59e0b, #eab308)"ShimmerButton de Magic UI
Architecture du Design System
Le design system YaniPay suit une architecture en couches qui garantit la cohérence et la maintenabilité :
Atomic Design
Cohérence Cross-Platform
Sections
Explorez chaque section du design system pour des informations détaillées :
Palette de Couleurs
Couleurs primaires, accents, gradients et opacités
Composants UI
Buttons, inputs, cards, tables et plus
Patterns Modals
Structure, animations et exemples de modals
Typographie
Bientôt disponible
Références
Sources officielles et best practices qui ont inspiré le design system YaniPay :
Standards Respectés
Tailwind CSS
Documentation officielle
Radix UI Primitives
Composants accessibles
Flowbite
Composants Tailwind
Atomic Design
Méthodologie Brad Frost
Last updated: 2026-03-25