Palette de Couleurs

Guide complet des couleurs YaniPay. Cliquez sur une couleur pour copier sa classe Tailwind.

Overview

La palette YaniPay est construite autour de la gamme slate pour les fonds sombres, avec des accents emerald et cyan pour les éléments interactifs. Les couleurs sont optimisées pour le dark mode avec des opacités soigneusement choisies.

Primary Palette

Les couleurs d'accent principales utilisées pour les CTAs et éléments interactifs :

Emerald 600

emerald-600

#059669

Emerald 500

emerald-500

#10b981

Emerald 400

emerald-400

#34d399

Emerald 300

emerald-300

#6ee7b7

Cyan 600

cyan-600

#0891b2

Cyan 500

cyan-500

#06b6d4

Cyan 400

cyan-400

#22d3ee

Teal 500

teal-500

#14b8a6

Surfaces & Backgrounds

Couleurs de fond pour les différentes couches de l'interface :

Slate 950

slate-950

#020617

Slate 900

slate-900

#0f172a

Slate 800

slate-800

#1e293b

Slate 700

slate-700

#334155

Slate 900/90

slate-900/90

rgba(15, 23, 42, 0.9)

Slate 900/60

slate-900/60

rgba(15, 23, 42, 0.6)

Surfaces avec transparence

Surface Patternstsx

// Modal background
className="bg-slate-900/90 backdrop-blur-xl"

// Card surface (glassmorphism)
className="bg-slate-900/60 backdrop-blur-xl"

// Elevated surface
className="bg-slate-800/50"

// Input background
className="bg-white/5"

Text Colors

Hiérarchie des couleurs de texte pour différents niveaux d'importance :

Text Primarytext-white

Text Secondarytext-white/80

Text Tertiarytext-white/70

Text Mutedtext-white/60

Placeholdertext-white/40

Accent Emeraldtext-emerald-400

Accent Cyantext-cyan-400

Gradients

Gradients utilisés pour les boutons CTAs et éléments visuels importants :

Primary CTA Gradient

bg-gradient-to-r from-emerald-600 to-cyan-600

Badge Gradient

bg-gradient-to-r from-teal-500 to-cyan-500

Icon Badge Gradient

bg-gradient-to-br from-emerald-500/20 to-cyan-500/20

Surface Gradient (GlassSurface gradient)

bg-gradient-to-br from-emerald-950/40 via-slate-900/60 to-cyan-950/30

Gradient Usagetsx

// Primary button
<button className="bg-gradient-to-r from-emerald-600 to-cyan-600
                   hover:from-emerald-500 hover:to-cyan-500">
  Action
</button>

// Badge
<span className="bg-gradient-to-r from-teal-500 to-cyan-500
                 rounded-full px-4 py-1.5 text-white text-sm">
  Dev Mode
</span>

// Icon badge
<div className="p-2.5 rounded-xl border border-emerald-500/20
                bg-gradient-to-br from-emerald-500/20 to-cyan-500/20">
  <Icon className="w-5 h-5 text-emerald-400" />
</div>

Borders & Rings

Styles de bordures et effets ring pour délimiter les éléments :

Standard border

border border-white/10

Emphasized border

border border-white/20

Glow effect (emerald)

border border-emerald-500/20 ring-1 ring-emerald-500/30

Selected state

border-2 border-emerald-500

Error state

border border-red-500/50

Semantic Colors

Couleurs utilisées pour communiquer des états et des messages :

Success

emerald-500

Warning

amber-500

Error

red-500

Info

blue-500

Semantic Usagetsx

// Success state
<div className="bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">
  Operation successful
</div>

// Warning state
<div className="bg-amber-500/10 border border-amber-500/20 text-amber-400">
  Please review
</div>

// Error state
<div className="bg-red-500/10 border border-red-500/20 text-red-400">
  An error occurred
</div>

// Info state
<div className="bg-blue-500/10 border border-blue-500/20 text-blue-400">
  For your information
</div>

Design System